【JqGrid】jqGrid 多选复选框 编辑列 方法事件

1.首先看一下效果

2.html代码

[html]  view plain  copy

 

1. <table id="grid-table"></table>  

3.在$(function (){...} 方法中，写如下方法，用json数据填充jqGrid，实现多选复选框，和编辑列

[javascript]  view plain  copy

 

1. jQuery("#grid-table").jqGrid({  
2.                datatype: "local",  
3.                data: mydata,  
4.                colNames: ['编号', '字段名称', '字段描述', '字段类型', '主Guid', '子Guid'],  
5.                colModel: [  
6.                     { name: 'ID', index: 'ID', width: 35, align: 'center', key: 'true' },  
7.                     { name: 'fieldName', index: 'fieldName', width: 100 },  
8.                     { name: 'fieldDisc', index: 'fieldDisc', width: 327, editable: true, editoptions: { maxlength: "20" } },  
9.                     { name: 'fieldType', index: 'fieldType', width: 100 },  
10.                     { name: 'mainGuid', index: 'mainGuid', width: 100, hidden: true },  
11.                     { name: 'subGuid', index: 'subGuid', width: 100, hidden: true }  
12.                ],  
13.                width: 580,  
14.                height: 'auto',  
15.                rowNum: 10,  
16.                rowList: [10, 20, 30],  
17.                recordpos: 'left',  
18.                viewrecords: true,  
19.                multiselect: true,//复选框     
20.                //ondblClickRow 双击字段描述列可编辑，编辑完毕按Enter就保存在页面上了               
21.                ondblClickRow: function (id) {  
22.                    if (id && id !== lastsel) {  
23.                        jQuery('#grid-table').jqGrid('restoreRow', lastsel);  
24.                        jQuery('#grid-table').jqGrid('editRow', id, true);  
25.                        lastsel = id;  
26.                    }  
27.                },  
28.                editurl: "JqGridHandler.ashx?sign=singleEdit"//这个文件需要有，但里面无需写任何处理代码  
29.                  
30.            });  

4.获得选中的行的方法

[csharp]  view plain  copy

 

1. function getSelecteds(){  
2. //获取多选到的id集合  
3. var ids = $("#grid-table").jqGrid("getGridParam", "selarrrow");  
4. //遍历访问这个集合  
5. $(ids).each(function (index, id){  
6.      //由id获得对应数据行  
7. var row = $("#grid-table").jqGrid('getRowData', id);  
8. alert("row.ID:"+row.ID+"  "+"row.fieldName:"+row.fieldName);  
9. }  
10. }  
11.   
12.