jqgrid怎么用js改表格数据

发布网友发布时间：2022-04-24 09:34

共2个回答

懂视网时间：2022-04-24 09:53

在使用jqgrid数据表的时候有时需要在界面直接修改单元格的内容，编辑单元格

下面介绍修改单元格cell的方法

 jQuery("#user-list").setCell(3, 'name', 'cht');

另一只写法

 jQuery("#user-list").jqGrid('setCell',3, 'name', 'ddd');

setCell参数说明：

rowid,行号
colname, colNames中的name属性
data, 要修改后的值
class, 添加样式

如果遇到setCell不好用（没有效果）情况需要注意

id，要用gqgrid中的rowid

如果单元格使用了formatter格式化数据，需要注意setCell中的data值也需要与之匹配，例如

colModel : [
{
label : 'name',
name : 'name',
index : 'name',
formatter : function(cellValue) {
 if (cellValue == 1) {
 return "Yes"
 }
 else {
 return "No";
 }
 return '';
 }
}
]

如果要使单元格显示Yes，setCell中的data需要写成1如下：

jQuery("#user-list").setCell(3, 'name', '1');

热心网友时间：2022-04-24 07:01

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怎么用js改表格数据