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操作參考