jqgrid怎么用js改表格数据

Posted 2023-05-07

参考技术A 1 jqGrid动态增加列，

目前还没有这样的方法

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

Java代码
jQuery('#grid1').GridUnload();

用这个方法 卸载jqgrid

然后重新设置吧

Java代码
jQuery('#grid1').jqGrid(
colNames:...,
colModel:...,
...
);

2 用本地 数据 修改表格

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

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

$('grid-1').jqGrid('setGridParam',
datatype:local,
rowNum:data.length,
data:data

).trigger('reloadGrid', [page:1]);

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

3 修改多条 同时提交后台

Java代码
var savedRow = null;
var savedCol = null;
// 修正
$('#lgrid-3').setGridParam(
beforeEditCell : function(rowid, cellname, value, iRow, iCol)
// 记录修改的表格
savedRow = iRow;
savedCol = iCol;

);
// 向后台发送数据前 保存表格的修改
if (savedRow && savedCol)
jQuery('#grid-3').jqGrid('saveCell', savedRow, savedCol);

// 取得表格的数据 全部
var data = $('#grid-3').jqGrid().getRowData();

4 隐藏列

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

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

Java代码
$('#list').jqGrid().setSelection(1);

如果已经被选中 则是 反选

6 数据绑定前检查

Java代码
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;

jqGrid中要添加自定义列，并且支持自定义数据对应显示！

参考技术A

这里只提供实现思路：

jqgrid中的colNames,后面是一个表头列名数组，此数组可以从调用这个grid的函数参数中传进去，意味着，可以写一个数组，存一部分固定列，然后通过ajax请求去数据库中查出自定义列，放到固定列的后面。这样我们就拼装起了这个表头数组。

jqGrid中的colModel字段的长度必须和colNames一样，并且也是可变的。意味着这个也需要从参数中传过来，也需要在js中拼装这样一个对象数组。

至于自定义数据对应显示。这个在js里面的接受的属性叫jsonReader。用root来接受Action中返回的拼装Json字符串

在后台Action中，需要将固定列和对应的属性值，自定义列和对应的属性值。使用Gson，拼装成Json数据对象，然后传到前台。

本回答被提问者采纳