【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コード
2.jsコード実装
$(function(){...}メソッドでは、jqGridをjsonデータで埋め込み、複数選択チェックボックスを実装し、列を編集する方法を書きます.
3.表行データの取得方法
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
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操作参考