一、 二、 三、 四、 五、 六、 七、
Js包说明 ............................................................................................................................................................................... 2 功能描述： ........................................................................................................................................................................... 2 写jqGrid函数 ....................................................................................................................................................................... 3 增加、删除、修改操作的实现 ........................................................................................................................................... 4 jqGrid的修改编辑功能 ........................................................................................................................................................ 6 xml数据格式的解释 ............................................................................................................................................................ 8 一些操作函数 ....................................................................................................................................................................... 9
一、
1
Js包说明
jQuery 的jqGrid包 现在已经更新到了4.0了 ，但是其中的主要应用是不会有太大的改动的，希望这个帮助文档能对jQuery插件的学习有所帮助。
jqGrid包说明: jquery.js is the jQuery library, jquery.jqGrid.js 主单元，包含的功能取决您的选择
grid.basic.js 主插件 其他插件包依赖于该插件正常运行 grid.custom.js Grid高级插件功能包 grid.formedit.js 用于表格编辑、增加、删除功能 grid.inlinedit.js 线条编辑 grid.subgrid.js 一个处理表格的插件 grid.postext.js 一个可以用来操作post数据的包 jqModal.js 模态对话框的编辑 jqDnR.js 可拖拉的表格编辑 themes 包含gird需要的样式表
二、 功能描述：
jqGrid包主要用于将需要展示的数据动态的展示在页面的上，即动态画出表格，并封装了增、删、改、查、分类显示、在线编辑修改等功能。 一、 关键使用说明：
1、 导入jqGrid包，在首页属性里面添加如下包的信息
注：由于加载js包 会耗费大量资源，建议动态加载这些js包，优化页面初始化效率。
2、 在页面上需要添加表格的地方， 增加
list表格id，pager为表格导航条id
2
三、 写jqGrid函数
jQuery(document).ready(function(){ jQuery(\"#list\").jqGrid({ url:'example.php', datatype: 'xml', mtype: 'GET',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'], colModel :[
{name:'invid', index:'invid', width:55}, {name:'invdate', index:'invdate', width:90},
{name:'amount', index:'amount', width:80, align:'right'}, {name:'tax', index:'tax', width:80, align:'right'}, {name:'total', index:'total', width:80, align:'right'},
{name:'note', index:'note', width:150, sortable:false} ], pager: jQuery('#pager'), rowNum:10,
rowList:[10,20,30], sortname: 'id', sortorder: \"desc\ viewrecords: true,
imgpath: 'themes/basic/images', caption: 'My first grid' }); });
以上代码基本可以将要展示的表格展示出来了，现在对一些属性说明： jQuery(“#list”).jqGrid list为将要显示表格的table 的id altRows : 设置表格显示斑马条纹属性，默认值为true caption: 定义表格标题名
cellEdit： 设置表格单元是否可以编辑，默认值为true，详见cellEdit介绍
cellsubmit: 决定cell容器如何被保存，使用’remote’或者‘clientArray’，详见cellEdit cellurl: 处理cell编辑的url路径，默认值为空 datatype : 从后台展示的数据格式，有xml、 json等 mtype： 数据传递的方式,有get 和post两种 editurl: 定义inline和form 编辑的后台处理url
Expandcolumn: 在定义treeGrid情况下，指明那一列用来伸展树
forceFit：设置表格在被拖动时自动调整大小以不破坏表格整体布局，注：该属性和 shrinkToFit不能同时使用
gridstate: 设置通用表格在使用hiddengrid属性时，hidegrid的值，可以是：’visible’ 或’hidden’默认为visible
shrinkToFit
3
loadonce: 如果该值设置为true则表格数据仅加载一次，在第一次请求之后数据信息自动转变为客户端处理，pager导航条上的函数都不可用。
loadtext： 在请求数据时显示字幕，默认值为：Loading….
colNames：要显示数据表格的列名 ，需要在前台定义好表格列名 colMode： 对要展示的每列值属性进行定义，最常用的有： align: 定义表格对齐方式，默认值为left datefmt：日期格式，默认值为：Y-M-d
editable：定义field是否可编辑，该属性用于inline和form编辑，默认值为false editrules：editrules：{edithidden:true,//如果为true，则该列在添加和编辑时被隐藏
required:true,//如果为true，则该列表格不能为空 number:true,//true时表格必须为数字型 integer:true,//true时，表格数字为整形 minValue:val,//设置数字最小值与最大值 maxValue:val,
email:true}//验证是否为email
edittype：定义编辑类型：text,texttarea,select,checkbox,passworad hidedlg: 为true时，该列不会显示在表格对话框中 hidden： 定义列在初始化时是否被隐藏 index： 定义索引名
name: 定义属性名，必填项 resizable: 定义列是否可调整大小 index: 定义列id width： 宽度
align： 对齐方式
pager： 导航条要展示的位置 rowNum： 默认的每页显示记录数 rowList： 可选的每页显示数
viewrecords： 是否设置表格可选，为true是可选，但此时表格不可编辑，只有在false是才可以编辑
imgpath： 图片路径
注：以上属性并不会全部同时出现在jqGrid表格设置里，jqGrid设计了灵活多变的不同组合来展示表格不同的功能。在以后的实际应用里，将对重点属性的组合和分配进行说明。 四、 增加、删除、修改操作的实现
2) 增加
jqGrid包自身封装了相当完善的操作事件， jQuery(\"#list\").navGrid('#pager', {
refresh: true, edit: true,
4
add: true, del: true,
search: true , position:\"right\
将上面一段代码，添加到jqGrid({})后面，refresh等参数，均设置为true，则
导航条上即可显示出五个按钮，刷新、编辑、增加、查找等，position设置这些按钮在导航条上的位置。
editurl: pathname+'/xmlTableEdit?openagent&oper=edit', //设置添加、更新的url
这段代码是编辑、增加、查找等功能执行的代码，写在url后面方便查找。对于这些定义的功能，每个操作传递过去的editurl是不一样的，oper分别是edit ，add，search、等。之后传递的是操作后，数据变化的参数。
当然，我们很多时候需要自己定义一些事件，jqGrid有一个添加按钮的函数，可以方便的添加我们想要的任何功能按钮
jQuery(\"#list\").navGrid('#pager', {
refresh: true, edit: true, add: true, del: true,
search: true , position:\"right\).navButtonAdd( '#pager', {
caption:\"Del\
buttonimg:\"/SedSoft/jqGrid/themes/basic/images/folder.png\
onClickButton: function(){ //执行删除行操作 // var gr = jQuery(\"#list\").getGridParam(\"selarrrow\"); var gr=chooseid;
if( gr != null&gr!=\"\" ) { jQuery(\"#list\").delGridRow(gr,{
afterSubmit: function(xhr,postdata){ alert ('After Submit: ' + postdata); return [true]},
url: pathname +'/xmlTableEdit?openagent&oper=del' //执行删除代理rul }); } else {
alert(\"Please Select Row to delete!\"); };},position:\"last\" })
上面这段代码就添加了一个删除按钮，并获得选中的id数组，并通过url代理去处理该操作。
事实上，通过.navButtonAdd()函数可以添加任何我们想要的按钮，而该函数里面属性分
5
别定义按钮出现的位置’#pager’,按钮标题字符’caption’，按钮图标路径’buttonimg’,点击按钮的onClickButton事件，在事件里面可以写任何你想要的js代码，以满足你的需求。position属性定义了按钮显示的位置。
除了这种直接添加按钮和事件的方法外，jqGrid还提供了重写和替换部分功能函数的能力。举例编辑功能说明。 五、 jqGrid的修改编辑功能
jqGrid定义了三种可以用于修改和编辑表格数据的方法，分别是cellEdit、inline Edit、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?openagent&oper=edit', //定义编辑cellEdit rul和editUrl不同，需要单独设置
cellEdit: true, //cell编辑时，此属性必须为true
afterEditCell: function(rowid,cellname,value,iRow,iCol){
var zk= jQuery(\"#list\").getCell(rowid,\"N_JinEr\");//获取某一单元格的值 jQuery(\"#list\").setCell(rowid,\"N_JinEr\
},
afterSubmitCell:function(serverrepsponse,rowid,cellname,value,iRow,iCol){ var text=serverrepsponse.responseText; var arr = text.split(\";\");
if(arr[0].indexOf(\"true\")!=-1){
var num = parseFloat(arr[1]);
jQuery(\"#list\").setCell(rowid,\"N_JinEr\
} },
以上代码展示了cellEdit设置需要的代码。cellEdit功能的实现只需要设置cellEdit为true，并设置cellurl在后台写处理数据的程序即可。而要满足功能上的需要，还需要添加afterEditCell等事件。
afterSubmitCell：提交完成后事件，serverrepsponse从后台返回数据，rowid选中行id， cellname 单元格name属性在colModel里设置，value cell的值，iRow index of the row,iCol the index of the column
jQuery(\"#list\").setCell(rowid,\"N_JinEr\设行id为rowid，列名为’N_JinEr’的单元格值为num，样式设置为{color:'red','text-align':'center'}。
afterSubmitCell处理了cellEdit编辑后，从后台取回数据并处理单元格值的过程，在实际情况下根据需要添加不同事件即可。
(二) inlineEdit:
editurl:pathname+'/xmlTableEdit?openagent&oper='+oper+'&showView='+showView+'&formName='+formName+'&punid='+unid, //设置添加、更新的url /* //以下参数根据需要添加， /* oper: 操作类型，edit 编辑、 del 删除、 showView: 操作视图名，即表格展示的试图
formName： 操作标识符，区分不同表单的不同操作 punid: 主文档id */
ultiselect: false, //选择行属性inlineEdit时不能设置多选行 onSelectRow: function(id){ chooseid=id;
if(id && id!==lastsel2){
jQuery('#list').restoreRow(lastsel2); //选中不同表格id变化 jQuery('#list').editRow(id,true,oneditfunc,aftersavefunc); //表格编辑函数 lastsel2=id; };
// 表格编辑时触发函数，一般无用可以为空 function oneditfunc(id){
7
};
//格编辑保存后执行函数，可以用来处理相关事件 function aftersavefunc(id,res){
jQuery(\"#list\").trigger(\"reloadGrid\"); changeValueafEdit(showView,unid);
}; },
// 重写编辑验证提示 jQuery.jgrid.edit = {
editCaption: \"编辑记录\ bSubmit: \"提交\ bCancel: \"退出\
processData: \"处理中...\ width:400, dodal:true, msg: {
required:\"Field is required\ number:\"请输入数字!\ minValue:\"数值应大于 \ maxValue:\"数值应小于\" } };
$.extend($.jgrid.edit,{Edit:'修改'}); 六、 xml数据格式的解释
XML Data
jqGrid解释数据的方式有三种：xml、json、xmlString，我们使用xml这种方式来处理。Xml的格式和作用，这里不做说明，有兴趣的可以自己到网上查。
xmlReader : { root: \"rows\ row: \"row\
page: \"rows>pageotal: \"rows>total\
records : \"rows>records\ repeatitems: true, cell: \"cell\ id: \"[id]\
userdata: \"userdata\
subgrid: { root:\"rows\ }
8
上面一段代码，放在jqGrid里面，作为对后台传送xml数据格式的解释方式。标准的jqGrid 支持的xml格式如下所示：
如果xml格式发生变化，则xmlReader里的数据做相应修改即可。
page: \"rows>pageotal: \"rows>total\
records : \"rows>records\ repeatitems: true,
这几行代码的作用在于，定义分页的条件，使页面正确显示数据和分页。最后一个repertitems是设置xml格式里的cell是否可以重复一样。 七、 一些操作函数
jQuery(\"#grid_id\").trigger(\"reloadGrid\"); 刷新表格
jQuery(\"#grid_id\").getGridParam('selarrrow'); 获取选择表格的id 多选的 jQuery(\"#grid_id\").getGridParam('selrow'); 获取选中表格id 单选 //设置不可编辑的单元格被选中后触发的事件
onSelectCell:function(rowid,celname,value,iRow,iCol){
var gg= jQuery(\"#list\").getGridParam(\"selrow\"); var gr= jQuery(\"#list\").getCell(gg,\"N_DanJia\");
9
if(gr<100){
N_DanJia:1000; }; },
beforeSubmitCell : function(rowid,celname,value,iRow,iCol){ UserData：
在某些情况下，我们接受到从服务器端传递过来的数据并不会自动的被jqGrid展现的，这个时候我们要么在接下来对它进行处理，要么在html代码里进行额外说明，这个时候userdata这个标签就用到了。
xmlReader: {userdata: \"userdata\
In the data received from the server, this could be structured as follows (in xml):
57页开始讲解增删查改
12.3 更新:
10
因篇幅问题不能全部显示，请点此查看更多更全内容