【jquery-jqGridプラグイン】jqGrid複数選択チェックボックス編集列

5787 ワード

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(){...}メソッドでは、jqGridをjsonデータで埋め込み、複数選択チェックボックスを実装し、列を編集する方法を書きます.
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操作参考
  • https://www.cnblogs.com/yechangzhong-826217795/p/5607037.html
  • http://blog.csdn.net/luguling200802544/article/details/46438179
  • jqGrid-Apiドキュメント:http://blog.mn886.net/jqGrid
  • https://www.cnblogs.com/MonaSong/p/5109991.html
  • http://blog.csdn.net/yjlwl1213/article/details/41750703