JQuery的插件jqGrid使用说明

本文格式为Word版，下载可任意编辑——JQuery的插件jqGrid使用说明

一、二、三、四、五、六、七、

Js包说明2功能描述：2写jqGrid函数3增加、删除、修改操作的实现4jqGrid的修改编辑功能6xml数据格式的解释8一些操作函数9

一、

1

Js包说明

jQuery的jqGrid包现在已经更新到了4.0了，但是其中的主要应用是不会有太大的改动的，希望这个帮助文档能对jQuery插件的学习有所帮助。

jqGrid包说明:?jquery.jsisthejQuerylibrary,?jquery.jqGrid.js主单元，包含的功能取决您的选择

grid.basic.js主插件其他插件包依靠于该插件正常运行?grid.custom.jsGrid高级插件功能包?grid.formedit.js用于表格编辑、增加、删除功能?grid.inlinedit.js线条编辑?grid.subgrid.js一个处理表格的插件?grid.postext.js一个可以用来操作post数据的包jqModal.js模态对话框的编辑?jqDnR.js可拖拉的表格编辑?themes包含gird需要的样式表

二、功能描述：

jqGrid包主要用于将需要展示的数据动态的展示在页面的上，即动态画出表格，并封装了增、删、改、查、分类显示、在线编辑修改等功能。一、关键使用说明：

1、导入jqGrid包，在首页属性里面添加如下包的信息别定义按钮出现的位置’#pager’,按钮标题字符’caption’，按钮图标路径’buttonimg’,点击按钮的onClickButton事件，在事件里面可以写任何你想要的js代码，以满足你的需求。position属性定义了按钮显示的位置。

除了这种直接添加按钮和事件的方法外，jqGrid还提供了重写和替换部分功能函数的能力。举例编辑功能说明。五、jqGrid的修改编辑功能

jqGrid定义了三种可以用于修改和编辑表格数据的方法，分别是cellEdit、inlineEdit、rowEdit

分别对应单元格编辑、在线行编辑、以对话框式的行编辑。以下将分别简单介绍这三种编辑方法和用法。

(一)cellEdit:

?单元格编辑支持键盘操作，选中中某一单元格时，可以按上下、左右来切换选中

?假使单元格可编辑，当我们按下Enter键或鼠标点击其他键时cell编辑后将被保存，除非我们按下Esc键

?当cell被编辑过后，cell编程’dirty’数据，这时候在左上角会显示出一个红色标记

?当我们点击可编辑的cell时，我们可以直接进入编辑状态properties:

1、有三个属性来设置cellEdit:

cellEdit:当为true时，cell才可编辑，此时Multiselect（设置选择多行）则不可用，onSelectRow函数不可用

cellsubmit：定义cell容器在那里被保存，’remote’或’clientArray’。假使是’remote’则数据会立刻通过cellUrl用Ajax方式传递到后台去处理，传递格式为：{id:rowed,mycell:cellvalue}

cellurl:设置cell编辑的url

注意：在collmodel里对列属性进行定义的editrules{}里，所有的设置对cellEdit、inline、rowEdit均适用。2、cellEdit编辑的几种事件

afterEditCell(rowed,cellname,value,iRow,iCol)afterSaveCell(rowed,cellname,value,iRow,iCol)

afterSubmitCell(serverresponse,rowed,cellname,value,iRow,iCol)beforeEidtCell(rowed,cellname,value,iRow,iCol)beforeSaveCell(rowed,cellname,value,iRow,iCol)beforeSubmitCell(rowed,cellname,value,iRow,iCol)errorCell(serverresponse,statur)

onSelectCell(rowed,celname,value,iRow,iCol)

这些事件在实际应用中拿出部分进行组合应用即可，其中onSelectCell只能应用于不可编辑的单元格3、举例说明

6

cellurl:pathname+'/xmlSaleTableEdit?openagentvararr=text.split(\

if(arr[0].indexOf(\

varnum=parseFloat(arr[1]);

jQuery(\}},

以上代码展示了cellEdit设置需要的代码。cellEdit功能的实现只需要设置cellEdit为true，并设置cellurl在后台写处理数据的程序即可。而要满足功能上的需要，还需要添加afterEditCell等事件。

afterSubmitCell：提交完成后事件，serverrepsponse从后台返回数据，rowid选中行id，cellname单元格name属性在colModel里设置，valuecell的值，iRowindexoftherow,iColtheindexofthecolumn

jQuery(\设行id为rowid，列名为’N_JinEr’的单元格值为num，样式设置为{color:'red','text-align':'center'}。

afterSubmitCell处理了cellEdit编辑后，从后台取回数据并处理单元格值的过程，在实际状况下根据需要添加不同事件即可。

(二)inlineEdit:

editurl:pathname+'/xmlTableEdit?openagent

if(id//选中不同表格id变化jQuery('#list').editRow(id,true,oneditfunc,aftersavefunc);//表格编辑函数lastsel2=id;};

//表格编辑时触发函数，一般无用可以为空functiononeditfunc(id){

7};

//格编辑保存后执行函数，可以用来处理相关事件functionaftersavefunc(id,res){

jQuery(\changeValueafEdit(showView,unid);

};},

//重写编辑验证提醒jQuery.jgrid.edit={editCaption:\编辑记录\bSubmit:\提交\bCancel:\退出\processData:\处理中...\width:400,dodal:true,msg:{required:\number:\请输入数字!\minValue:\数值应大于\maxValue:\数值应小于\}};

$.extend($.jgrid.edit,{Edit:'修改'});六、xml数据格式的解释

XMLData

jqGrid解释数据的方式有三种：xml、json、xmlString，我们使用xml这种方式来处理。Xml的格式和作用，这里不做说明，有兴趣的可以自己到网上查。

xmlReader:{root:\row:\

page:\total:\

records:\repeatitems:true,cell:\id:\

userdata:\

subgrid:{root:\}

8

上面一段代码，放在jqGrid里面，作为对后台传送xml数据格式的解释方式。标准的jqGrid支持的xml格式如下所示：

root：rowsrow：row

ssscell：cellssssssssssssssssss

sssssssssssssssssssss

假使xml格式发生变化，则xmlReader里的数据做相应修改即可。

page:\total:\

records:\repeatitems:true,

这几行代码的作用在于，定义分页的条件，使页面正确显示数据和分页。最终一个repertitems是设置xml格式里的cell是否可以重复一样。七、一些操作函数

jQuery(\刷新表格

jQuery(\获取选择表格的id多项选择的jQuery(\获取选中表格id单项选择//设置不可编辑的单元格被选中后触发的事件

onSelectCell:function(rowid,celname,v