Inline editing is a quick way to update database information by making changes directly in the row of the grid, as seen in the image below:
To use Inline Editing, users select a row with the mouse.
In response, jqGrid converts each editable field to a data entry cell, as seen in the Name and Price fields above.
Cells that aren't editable, such as the ID field above, don't change appearance and remain read-only.
Whether an individual column is editable or read-only is controlled by setting the attribute in the ColModel.
When finished, users hit the “enter” key to send the data to the server.
In order to use this functionality, make sure you put a check mark by the Inline Editing and Common modules when you downloaded jqGrid.
For more information refer to .
Note to Developers - Source code can be found in the grid.inlinedit.js file, located in the src directory.
The methods used in inline editing are a sub-set of those of the parent grid.
They are described below.
For inline editing, we have five additional methods (of the Grid API) available:
restoreRow
These methods can be called, of course, only on an already-constructed grid, from a button click or from an event of the grid itself:
jQuery(&#grid_id&).jqGrid({
onSelectRow: function(id){
if(id && id!==lastSel){
jQuery('#grid_id').restoreRow(lastSel);
jQuery('#grid_id').editRow(id, true);
});
In this example, if another was row being edited and has not yet been saved, the original data will be restored and the row “closed” before “opening” the currently-selected row for editing (where lastSel was previously defined as a var).
If you want to save instead to restore the editing you can call saveRow in place of restoreRow.
Calling conventions:
jQuery(&#grid_id&).editRow(rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
or when we use the new API
jQuery(&#grid_id&).jqGrid('editRow',rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
grid_id is the already constructed grid
rowid: the id of the row to edit
keys: when set to true we can use [Enter] key to save the row and [Esc] to cancel editing.
oneditfunc: fires after successfully accessing the row for editing, prior to allowing user access to the input fields. The row's id is passed as a parameter to this function.
succesfunc, url, extraparam, aftersavefunc,errorfunc and afterrestorefunc are described below, in the saveRow section.
The row can not be edited if it has class 'not-editable-row' instead that in colModel some fields can have a property editable set to true.
When set in the editRow the parameter function oneditfunc should not be enclosed in quotes and not entered with () - show just the name of the function.
As of version 4 of the jqGrid,
parameters passed to the method can be enclosed in object see below
Calling with object parameter:
jQuery(&#grid_id&).jqGrid('editRow',rowid,
keys : true,
oneditfunc: function() {
alert (&edited&);
});
The default object parameter is as follow:
editparameters = {
&keys& : false,
&oneditfunc& : null,
&successfunc& : null,
&url& : null,
&extraparam& : {},
&aftersavefunc& : null,
&errorfunc&: null,
&afterrestorefunc& : null,
&restoreAfterError& : true,
&mtype& : &POST&
jQuery(&#grid_id&).jqGrid('editRow',rowid,
parameters);
If keys is true, then the remaining settings – successfunc, url, extraparam, aftersavefunc, errorfunc and afterrestorefunc - are passed as parameters to the saveRow method when the [Enter] key is pressed (saveRow does not need to be defined as jqGrid calls it automatically). For more information see saveRow method below.
When this method is called on particular row, jqGrid reads the data for the editable fields and constructs the appropriate elements defined in edittype and editoptions
Saves the edited row.
Calling convention:
jQuery(&#grid_id&).saveRow(rowid, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
or when we use the new API
jQuery(&#grid_id&).jqGrid('saveRow',rowid, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
As of version 4 of the jqGrid,
parameters passed to the method can be enclosed in object see below
Calling with object parameter:
jQuery(&#grid_id&).jqGrid('saveRow',rowid,
successfunc: function( response ) {
return true;
});
The default object parameter is as follow:
saveparameters = {
&successfunc& : null,
&url& : null,
&extraparam& : {},
&aftersavefunc& : null,
&errorfunc&: null,
&afterrestorefunc& : null,
&restoreAfterError& : true,
&mtype& : &POST&
jQuery(&#grid_id&).jqGrid('saveRow',rowid,
saveparameters);
rowid: the id of the row to save
succesfunc: if defined, this function is called immediately after the request is successful. This function is passed the data returned from the server. Depending on
this function should return true or false.
url: if defined, this parameter replaces the editurl parameter from the options array. If set to 'clientArray', the data is not posted to the server but rather is saved only to the grid (presumably for later manual saving).
extraparam: an array of type name: value. When set these values are posted along with the other values to the server.
aftersavefunc: if defined, this function is called after the data is saved to the server. Parameters passed to this function are the rowid and the response from the server request. Also the event is called too when the url is set to 'clientArray'.
errorfunc: if defined, this function is called after the data is saved to the server. Parameters passed to this function are the rowid and the the response from the server request.
afterrestorefunc if defined, this function is called in restoreRow (in case the row is not saved with success) method after restoring the row. To this function we pass the rowid
When set in the saveRow the parameters functions should not be enclosed in quotes and not entered with () - show just the name of the function.
Except when url (or editurl) is 'clientArray', when this method is called, the data from the particular row is POSTED to the server in format name: value, where the name is a name from colModel and the value is the new value. jqGrid also adds, to the posted data, the pair id: rowid. For example,
jQuery(&#grid_id&).saveRow(&rowid&, false);
will save the data to the grid and to the server, while
jQuery(&#grid_id&).saveRow(&rowid&, false, 'clientArray');
will save the data to the grid without an ajax call to the server.
or using the new API
jQuery(&#grid_id&).jqGrid('saveRow',&rowid&, false);jQuery(&#grid_id&).jqGrid('saveRow',&rowid&, false, 'clientArray');
Using the object parameter this should be written:
jQuery(&#grid_id&).jqGrid('saveRow',&rowid&, { url : 'clientArray' });
Additionally to this we have other two options which can be set in grid options.
PropertyTypeDescriptionDefault
ajaxRowOptionsobjectThis option allow to set global ajax settings for the row editiing when we save the data to the server. Note that with this option is possible to overwrite all current ajax setting in the save request including the complete event.empty object
serializeRowDatapostdataIf set this event can serialize the data passed to the ajax request when we save a row. The function should return the serialized data. This event can be used when a custom data should be passed to the server - e.g - JSON string, XML string and etc. To this event is passed the data which will be posted to the servernull
This method restores the data to original values before the editing of the row.
Calling convention:
jQuery(&#grid_id&).restoreRow(rowid, afterrestorefunc);
or when we use the new API
jQuery(&#grid_id&).jqGrid('restoreRow',rowid, afterrestorefunc);
As of version 4 of the jqGrid,
parameters passed to the method can be enclosed in object
Calling with object parameter:
jQuery(&#grid_id&).jqGrid('restoreRow',rowid,
&afterrestorefunc& : function( response ) {
// code here
});
The default object parameter is as follow:
restoreparameters = {
&afterrestorefunc& : null
jQuery(&#grid_id&).jqGrid('restoreRow',rowid,
restoreparameters);
rowid is the row to restore
afterrestorefunc if defined this function is called in after the row is restored. To this function we pas the rowid
This method add a row for inline edit.
Calling convention:
jQuery(&#grid_id&).addRow(rowid, parameters);
or when we use the new API
jQuery(&#grid_id&).jqGrid('addRow',parameters);
where parameters is a object and has the following default values:
parameters =
rowID : &new_row&,
initdata : {},
position :&first&,
useDefValues : false,
useFormatter : false,
addRowParams : {extraparam:{}}
rowID - (string) the value of the id of the new added row
- (object) the object of the pair name:value where the name correspond to the name in colMode. When set this is the initial value of the the cell.
position - (string) determines the position of the new adde row in the grid. Default is first. Can have a value last to be added at the last position
useDefValues - (boolean) if set to true uses the defaultValue property in editoptions of the colModel
useFormatter : (boolean) if set to true synchronises the parameters from the formatter actions
addRowParams : (object) parameters which are passed to the addRow - they are the same as of editRow
Actually this method uses two already constructed methods. When calling the method first executes the addRowData method which add a local row.
After this the method call editRow method to edit the row. If the keys parameter is set to true and the user press ESC key the row is automatically deleted.
Add a navigators buttons which correspond to the inline methods addRow, editRow, saveRow, restoreRow. In order to use this method a navGrid method should be called before to call this method
Calling convention:
jQuery(&#grid_id&).navGrid(pagerid, {...});
jQuery(&#grid_id&).inlineNav(pagerid, parameters);
or when we use the new API
jQuery(&#grid_id&).jqGrid('navGrid',pagerid, {...});
jQuery(&#grid_id&).jqGrid('inlineNav',pagerid, parameters);
Where parameters is a object with the following default values
parameters = {
edit: true,
editicon: &ui-icon-pencil&,
add: true,
addicon:&ui-icon-plus&,
save: true,
saveicon:&ui-icon-disk&,
cancel: true,
cancelicon:&ui-icon-cancel&,
addParams : {useFormatter : false},
editParams : {}
PropertyTypeDescriptionDefault
addboolean Enables or disables the add action in the Navigator. When the button is clicked a addRow with parameters addParams is executedtrue
addiconstringSet a icon to be displayed if the add action is enabled. Note that currently only icons from UI theme images can be addedui-icon-plus
addtextstring The text than can be set in the add buttonempty
addtitlestringThe title that appear when we mouse over to the add button (if enabled) Add new row
editboolean Enables or disables the edit action in the Navigator. When the button is clicked a editRow method is executed with editParams parameter the - current selected rowtrue
editiconstringSet a icon to be displayed if the edit action is enabled. Note that currently only icons from UI theme images can be usedui-icon-pencil
edittextstring The text than can be set in the edit buttonempty
edittitlestringThe title that appear when we mouse over to the edit button (if enabled) Edit selected row
positionstringDetermines the position of the Navigator buttons in the pager. Can be left, center and right. left
savebooleanEnables or disables the save button in the pager. When the button is clicked a saveRow method is executed with
editParams parameterstrue
saveiconstringSet a icon to be displayed if the refresh action is enabled. Note that currently only icons from UI theme images can be usedui-icon-disk
savetextstring The text than can be set in the refresh buttonempty
savetitlestringThe title that appear when we mouse over to the refresh button (if enabled)Save row
cancelbooleanEnables or disables the cancel(restore) button in the pager.When the button is clicked a restoreRow method is executed with parameters editParamstrue
canceliconstringSet a icon to be displayed if the search action is enabled. Note that currently only icons from UI theme images can be usedui-icon-cancel
canceltextstring The text than can be set in the cancel buttonempty
canceltitlestringThe title that appear when we mouse over to the search button (if enabled)Cancel trow editiong
addParamsobjectParameters that can be passed to the addRow method in navigator. For detailed information see addRow parameters{useFormatter : false}
editParamsobjectParameters that can be passed to the editRow, saveRow, restoreRow methods in navigator. For detailed information
the related methods{}
When the row is edited and the input elements are created we set the following rules:
the table row becomes attribute editable=“1”
the array savedRow (option in the grid) is filled with the values before the editing. This is a name:value pair array with additional pair id:rowid
Hidden fields are not included
The id of the editable element is constructed as 'rowid_'+ the name from the colModel array. Example if we edit row with id=10 and the only editable element is 'myname' (from colModel) then the id becomes 10_myname.
The name of the editable element is constructed from the name of the colModel array - property - name
after the row is saved or restored the editable attribute is set to “0” and the savedRow item with id=rowid is deleted
When the data is posted to the server we construct an object {} that contain(s):
the name:value pair
where the name is the name of the input element represented in the row (this is for all input elements)
additionally we add a pair id:rowid where the rowid is the id of the row
if the extraparam parameter is not empty we extend this data with the posted data
&script type=&text/javascript&&
jQuery(document).ready(function(){
var lastsel2
jQuery(&#rowed5&).jqGrid({
datatype: &local&,
height: 250,
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:&int&, editable: true},
{name:'name',index:'name', width:150,editable: true, editoptions:{size:&20&,maxlength:&30&}},
{name:'stock',index:'stock', width:60, editable: true, edittype:&checkbox&,editoptions: {value:&Yes:No&}},
{name:'ship',index:'ship', width:90, editable: true, edittype:&select&,formatter:'select', editoptions:{value:&FE:FedEx;IN:InTTN:TNT;AR:ARAMEX&}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:&textarea&, editoptions:{rows:&2&,cols:&10&}}
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#rowed5').restoreRow(lastsel2);
jQuery('#rowed5').editRow(id,true);
editurl: &server.php&,
caption: &Input Types&
});
var mydata2 = [
{id:&12345&,name:&Desktop Computer&,note:&note&,stock:&Yes&,ship:&FE&},
{id:&23456&,name:&Laptop&,note:&Long text &,stock:&Yes&,ship:&IN&},
{id:&34567&,name:&LCD Monitor&,note:&note3&,stock:&Yes&,ship:&TN&},
{id:&45678&,name:&Speakers&,note:&note&,stock:&No&,ship:&AR&},
{id:&56789&,name:&Laser Printer&,note:&note2&,stock:&Yes&,ship:&FE&},
{id:&67890&,name:&Play Station&,note:&note3&,stock:&No&, ship:&FE&},
{id:&76543&,name:&Mobile Telephone&,note:&note&,stock:&Yes&,ship:&AR&},
{id:&87654&,name:&Server&,note:&note2&,stock:&Yes&,ship:&TN&},
{id:&98765&,name:&Matrix Printer&,note:&note3&,stock:&No&, ship:&FE&}
for(var i=0;i&mydata2.length;i++)
jQuery(&#rowed5&).addRowData(mydata2[i].id,mydata2[i]);
});
&table id=&rowed5& class=&scroll&&&/table&
Will produce this:
Personal Tools
wiki/inline_editing.txt & Last modified:
22:07 by logantracyoJqgrid入门-别具特色的Pager Bar (四)
- 难道真的是我的错 - ITeye技术网站
Pager Bar位于表格最下边。默认情况下，分为三部分。如图：
第一部分：导航按钮栏(Navigator)
第二部分：页码栏(Pager)
第三部分：记录信息栏(Record)
要实现这个功能也不难，最基本的语法就一句。
$("#gridTable").jqGrid('navGrid', '#gridPager');
但是很多时候我们需要的不仅仅是这种，还有很多属性需要了解。
1. Navigator
默认有5个预定义好的按钮：
编辑选中的行
删除选中的行
Navigator通过navGrid方法来配置导航栏，用法是：$(“#grid_id”).navGrid(‘#gridpager’,{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView); 或$(“#grid_id”).jqGrid(‘navGrid’,'#gridpager’,{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
1.1. Navigator相关参数
add：定义是否启用添加操作的按钮；
addicon：用于添加操作的按钮上的图标，目前只能使用jQuery UI中的图标样式；
addtext：用于添加操作的按钮上的文本；
addtitle：用于添加操作的按钮上的tooltip；
del/delicon/deltext/deltitle：用于删除按钮的一套属性，可以参照添加按钮的几个属性；
edit/editicon/edittext/edittitle：用于编辑按钮的一套属性，可以参照添加按钮的几个属性；
refresh/refreshicon/refreshtext/refreshtitle：用于刷新表格按钮的一套属性，可以参照添加按钮的几个属性；当点击这个按钮时，将执行trigger(“reloadGrid”)并清除用于查询的参数；
refreshstate：定义如何重新载入Grid表格，firstpage：重新载入表格的第一页；current：重新载入当前页，并保存当前选中的行；默认为firstpage；
afterRefresh：定义点击刷新表格按钮之后的事件函数；
beforeRefresh：定义点击刷新表格按钮之前的事件函数；
search/searchicon/searchtext/searchtitle：用于查询按钮的一套属性，可以参照添加按钮的几个属性；当点击这个按钮时，将会调用searchGrid方法；
view/viewicon/viewtext/viewtitle：用于查看记录按钮的一套属性，可以参照添加按钮的几个属性；
addfunc：如果定义，则用定义的函数替代原有的add函数，这个函数将不接受任何参数；
editfunc：如果定义，则用定义的函数替代原有的edit函数，编辑的行的id作为参数传入这个函数；
delfunc：如果定义，则用定义的函数替代原有的del函数，编辑的行的id作为参数传入这个函数；
alertcap：当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示框的标题；
alerttext：当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息；
cloneToTop：定义是否“拷贝”一套导航按钮到Grid表格顶端的Pager中，默认为false；
借助这些选项，可以将上一篇中的例子，修改一下，更多的借助Jqgrid内置的功能。例如，当载入行数据到对话框时，之前是通过在自定义的loadSelectedRowData方法中，调用jqGrid(“getGridParam”, “selrow”)来检查是否有选中的数据行。现在在点击编辑或删除按钮的时候，可以通过 Jqgrid 自己检查是否有选中的数据行，如果没有则弹出提示。如果有则选中的行，则还会将行id作为参数，传入对应的函数方法中。代码如下:
$("#gridTable").jqGrid('navGrid', '#gridPager',{
addStu : addStu,
updateStu : updateStu,
delStu : delStu,
viewStu : viewStu,
1.2 关于prmEdit、prmAdd、prmDel、prmSearch、prmView的参数
Jqgird本身为这些参数定义了默认值，而且不同的language文件也有各自的定义来覆盖原始的默认值。我们也可以在jqGrid重新定义新的值，以覆盖默认的值。在我做的DEMO中，没有涉及这一块，所以具体的参数可以查看官方文档。地址：
1.3自定义按钮
有的时候，Jqgrid默认的按钮可能不能满足我们的要求，别急，它还提供了添加自定义按钮的方法。具体API是：
$(“#grid_id”).navGrid(“#pager”,…).navButtonAdd(“#pager”,{parameters});
$(“#grid_id”).jqGrid(‘navGrid’,”#pager”,…).jqGrid(‘navButtonAdd’,”#pager”,{parameters});
关于navButtonAdd的属性：
caption：按钮上显示的文本，可以是空值；
buttonicon：按钮上的图标，如果设为“none”，则只显示按钮上的文本；
onClickButton：当点击按钮时所调用的方法函数，默认为null；
position：添加新按钮的位置，first或last；默认为last；
title：新按钮的tooltip
cursor：当鼠标滑过按钮时的光标样式，默认为pointer；
id：为按钮设置id。
比如我们可以利用Jqgrid的自定义按钮的方法，在Navigator里面加入打印、下载等方法。这些方法可以自己实现。
2. Pager和Record的属性
这两个区域的属性我们一般不需要改变什么，用默认的就行了，如果想要了解它的属性，可以去官方文档看看。
浏览: 15586 次
来自: 上海
这个怎么设置居中
要是能提供代码就更好了
到底想说明什么
不错。看好你，小伙