jqgrid setCell 单元格赋值空字符串 无效处理
最近在使用jqgrid给单元格赋值时发生一个诡异的问题，grid.jqGrid(‘setCell’, rowId, colName, ‘’)，给单元格赋空值居然无效。查看jqgrid源码后，给单元格赋值需要注意，请使用如下两个方法：
1）grid.jqGrid(‘setCell’, rowId, colName, ’ ') // 赋值 空格
2）grid.jqGrid(‘setCell’, rowId, colName, ‘’, ‘’, ‘’, true) // 带上强制刷新标记
1、 setCell函数说明
setCell : function(rowid,colname,nData,cssp,attrp, forceupd)
- rowid：行号
- colname：列名
- nData：单元格值
- cssp：单元格class
- attrp：单元格属性值
- forceupd：boolean, 强制刷新标记
nData !== “” || forceupd === true 时，才会更新单元格值
2、案例说明
<html>
<head>
<meta charset="UTF-8" />
<title>jggrid-setcelltitle>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css" />
<link rel="stylesheet" href="https://js.cybozu.cn/jqgrid/v5.3.1/css/ui.jqgrid.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">script>
<script src="https://js.cybozu.cn/jqgrid/v5.3.1/js/jquery.jqGrid.min.js">script>
<script src="https://js.cybozu.cn/jqgrid/v5.3.1/js/i18n/grid.locale-en.js">script>
head>
<body>
<div class="page-content container">
<div class="page-head" style="padding: 15px 0">
<button type="button" class="btn btn-sm" onclick="getBills()">加载数据button>
<button type="button" class="btn btn-sm" onclick="setCell1()">setCell1button>
<button type="button" class="btn btn-sm" onclick="setCell2()">setCell2button>
<button type="button" class="btn btn-sm" onclick="setCell3()">setCell3button>
div>
<div class="page-body">
<div class="panel panel-default" id="panel-orders">
<table id="orders">table>
div>
div>
div>
<script type="text/javascript">
var $grid = $("#orders");
function getBills() {
var rowCount = 20;
var data = [];
for (var i = 0; i < rowCount; i ++) {
data.push({
sid: i,
bill_id: i,
bill_detail: i,
goods_id: i,
unit_id: i,
package_id: i,
ref_detail: i,
goods_no: i + 1,
goods_name: '零件名称' + rowCount + i,
car_type_name: '车型' + rowCount + i,
package_name: '包装器具' + rowCount + i,
unit: i%2==0 ? '件' : '箱',
snp: 0.89,
box_count: rowCount + i,
total_count: rowCount + i,
goods_count: rowCount + i,
out_count: rowCount + i,
bill_no: 'BN0000000' + i,
})
}
$grid.jqGrid("clearGridData");
$grid.jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
}
function setCell1() {
var rowId = $grid.jqGrid('getGridParam', 'selrow');
if(!rowId) {
alert('请先选中行'); return;
}
$grid.jqGrid('setCell', rowId, "unit", "");
}
function setCell2() {
var rowId = $grid.jqGrid('getGridParam', 'selrow');
if(!rowId) {
alert('请先选中行'); return;
}
$grid.jqGrid('setCell', rowId, "unit", " ");
}
function setCell3() {
var rowId = $grid.jqGrid('getGridParam', 'selrow');
if(!rowId) {
alert('请先选中行'); return;
}
$grid.jqGrid('setCell', rowId, "unit", "", "cellcell", "", true);
}
$(function() {
$grid.jqGrid({
colModel: [
{label: "零件号", name: "goods_no", width: 60},
{label: "零件名称", name: "goods_name", width: 180},
{label: "车型", name: "car_type_name", width: 70},
{label: "包装器具", name: "package_name", width: 70},
{label: "单位", name: "unit", width: 60},
{label: "装箱率", name: "snp", width: 50, sorttype: "number"},
{label: "箱数", name: "box_count", width: 40, sorttype: "number"},
{label: "需求总数", name: "total_count", width: 70, sorttype: "number"},
{label: "需求数量", name: "goods_count", width: 70,},
{label: "出库数量", name: "out_count", width: 70, sorttype: "number"},
{label: "订单号", name: "bill_no", width: 120},
],
datatype: 'local',
rownumbers: true,
height: 300,
rowNum: 1000,
cellEdit: true,
cellsubmit: 'clientArray'
});
});
script>
body>
html>
代码说明：
1）按钮setCell1
给单元格赋空字符串，无效：
$grid.jqGrid('setCell', rowId, "unit", "");
2）按钮setCell2
给单元格赋空格，有效：
$grid.jqGrid('setCell', rowId, "unit", " ");
3）按钮setCell3
给单元格赋空字符串并带上forceupd标记，有效：
$grid.jqGrid('setCell', rowId, "unit", "", "cellcell", "", true);