【jquery-jqGrid插件】jqGrid 多选 复选框 编辑列

jqGrid 表格插件- 表格多选复选框，编辑列使用

1、当在JqGrid表格属性中设置了multiselect：true，这时会在每一行前面出现checkbox。
2、而在点击栏的checkbox时，表格全选或全部选，这时触发的事件是onSelectAll。
onSelectAll:function(rowids,statue) {//函数里做自己的处理};
rowids:表示表格的所有行Id，即设置了key=true的那一列的值，如果设置了多列的
key=true，那么只选取第一个
statue：true/false,如果全选则为true，全不选则为false

1. html代码

<table id="grid-table">table>  

2. js 代码实现

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

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

           });  

3. 获取表格行数据的方法

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

4. jqgrid操作参考

1. https://www.cnblogs.com/yechangzhong-826217795/p/5607037.html
2. http://blog.csdn.net/luguling200802544/article/details/46438179
3. jqGrid-Api文档： http://blog.mn886.net/jqGrid
4. https://www.cnblogs.com/MonaSong/p/5109991.html
5. http://blog.csdn.net/yjlwl1213/article/details/41750703