jqGrid學習筆記

2022-08-23 16:42:12 字數 1921 閱讀 9616

jqgrid即jquery-grid，提供了豐富的**功能。

html

$("#jqgrid").jqgrid(,,],


jsonreader: ,


multiselect: true, // 是否支援核取方塊，預設false


loadonce: true,


rownumbers: true,


celledit: true,


width: 800,


height: 325,


cellsubmit: 'clientarray' // 客戶端儲存，不需要每次都提交


});/**


* @param rowid


* @param object irow 行物件，irow.rowid等


* @param object icol 資料物件，['id', 'name']等


*/function gridoperat(rowid,irow,icol,e)
新增行

var newid = parseint(rowid) + 1;


var rowid = parseint(rowid);


var rowdata = ;


$('#jqgrid').jqgrid('addrowdata', newid, rowdata, 'after', rowid);// 插入行到當前行之後


// target為當前行jquery物件，將後續行的rowid全部加一調整


target.closest('tr').nextall().each(function(index, e) 


var rowid = $(this).attr('id');


$(this).attr('id', parseint(rowid) + 1);


})
刪除行

target.closest('tr').nextall().each(function(index, e) );


$('#jqgrid').jqgrid('delrowdata', rowid);
data.json格式示例

,,,


,,,,


,,


]}
另外，在使用multiselect:true的過程中遇見了乙個坑，在使用addrowdata方法新增新行後，新行checkbox的id會復用事件發生行的id，到checkbox的選中狀態會聯動。

// 假設當前行rowid = 1，checkbox的id=jqg_jqgrid_1，執行插入新行操作如下：


$('#jqgrid').jqgrid('addrowdata', newid, rowdata, 'after', rowid);
新插入的行rowid=newid，行中checkbox的id=jqg_jqgrid_1，這樣id就重複了，當checkbox選中rowid=1行時，newid行的checkbox也會被選中。

解決方案：

1、全選操作解決方案

在事件onselectall中，手動執行全選和取消操作，如：

// arowids為選中行的陣列，全選即全部行，status為選中狀態


onselectall: function(arowids, status) 


}
2、插入行解決方案

在事件afterinsertrow方法中，重置checkbox的id，保證id唯一，如：

// 小技巧：將checkbox的id與rowid同步，可以避免重複


afterinsertrow: function(rowid, rowdata, rowelem) );


}

JqGrid學習筆記（一）

jqgrid 是乙個用來顯示網格資料的jquery外掛程式，通過使用jqgrid可以輕鬆實現前端頁面與後台資料的ajax非同步通訊。文件比較全面，其 為 2.準備檔案 3.頁面中得 3.1 head中加入引用 3.2 body中的 table div 其中，list4為列表jqgrid，gridpa...

jqgrid學習記錄

1 頁面關閉方法 window.parent.location.reload 重新整理父頁面 parent.datagrid trigger reloadgrid 重新整理父頁面 window.parent.layer.closeall iframe 頁面關閉 頁面開啟方式為layer層時，當前彈出...

jqgrid本地載入分頁 jqGrid 分頁

這兩天一直在搞jqgrid分頁，焦頭爛額，不過還是有點收穫的 主要是後台分頁 jqgrid分頁可以分為兩種，遠端資料 伺服器資料 分頁和本地資料分頁，先看遠端資料分頁 testgrid jqgrid else if pagebtn prev userlistpg else if pagebtn la...