jqgrid 的一些操作动态增加列用本地数据修改表格

最新推荐文章于 2020-12-22 19:24:11 发布

原创最新推荐文章于 2020-12-22 19:24:11 发布 · 456 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jqgrid #js #ViewUI

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用jqGrid动态增加列、利用本地数据修改表格、多条数据同时提交后台以及隐藏列的方法，并讨论了隐藏列后重新加载表格的影响。此外，文章还涉及了在使用本地数据时分页功能的局限性，以及如何在数据绑定前进行错误检查。

1 jqGrid动态增加列，

目前还没有这样的方法

只能先卸载Grid再进行重绘，才能达到改变列的目的。

jQuery('#grid1').GridUnload();

用这个方法卸载jqgrid

然后重新设置吧

jQuery('#grid1').jqGrid({
    colNames:...,
    colModel:...,
    ...
});

2 用本地数据修改表格

这个必须先把数据类型改成local

$('#lgrid-1').jqGrid().clearGridData();

$('grid-1').jqGrid('setGridParam', 
{  datatype:local,
    rowNum:data.length,
    data:data
}
).trigger('reloadGrid', [{page:1}]);

一旦用本地数据分页功能就不好用了,因为不会再去查后台了

3 修改多条同时提交后台

var savedRow = null;
var savedCol = null;
// 修正
$('#lgrid-3').setGridParam({
      beforeEditCell : function(rowid, cellname, value, iRow, iCol) {
            // 记录修改的表格
            savedRow = iRow;
            savedCol = iCol;
                 }
});
// 向后台发送数据前 保存表格的修改
if (savedRow &amp;&amp; savedCol) {
           jQuery('#grid-3').jqGrid('saveCell', savedRow, savedCol);
}
// 取得表格的数据 全部
var data = $('#grid-3').jqGrid().getRowData();

4 隐藏列

  jQuery('#grid_id').hideCol('somecol').trigger('reloadGrid');  
            显示用 showCol

5 可以多选的情况下默认选中

$('#list').jqGrid().setSelection(1);

如果已经被选中则是反选

6 数据绑定前检查

ajaxGridOptions:   
        {dataFilter:    
            function(data,dataType){    // preprocess the data
                if ( $(data).find("code").text() == 'problem' ) {   // check for an error in the result
                    $("#list").jqGrid('GridUnload');
                    $("#errormsg").text( $(data).find("description").text() );
                }else{
                    return data;
                }
            }
        }