setCell 更新错误的单元格

Question

我正在尝试通过使用返回 HTML 代码的格式化程序在单元格中定义一个小表格（HTML 表格）。内容基于同一记录中的一些隐藏字段。

单元格内表格的初始设置进展顺利。问题是后面打算用“setCell”，修改隐藏字段，用表结构看看对字段的影响。

发生的情况是 jqGrid 接近错误的单元格并在其中造成了一些混乱。我创建了一个 jsFiddle 来演示它。

<table id="grid"></table>
<div>
<input id="update" type="button" value="Update">
</div>

var mydata = [{
    id: 1,
  hiddenA: 1,
  hiddenB: 2,
  hiddenC: 4,
  hiddenD: 8,
  hiddenE: 16,
  hiddenF: 32,
  hiddenG: 64,
  hiddenH: 128
}];

$("#grid").jqGrid({
  datatype: "local",
  data: mydata,
  height: 250,
  colNames: [
    'id',
    'hiddenA', 
    'hiddenB', 
    'hiddenC', 
    'hiddenD', 
    'hiddenE', 
    'hiddenF', 
    'hiddenG', 
    'hiddenH', 
    'visibleA', 
    'visibleB'
  ],
  colModel: [
    {name: 'id', hidden: true, key: true},
    {name: 'hiddenA', hidden: true, width: 50},
    {name: 'hiddenB', hidden: true, width: 50},
    {name: 'hiddenC', hidden: true, width: 50},
    {name: 'hiddenD', hidden: true, width: 50},
    {name: 'hiddenE', hidden: true, width: 50},
    {name: 'hiddenF', hidden: true, width: 50},
    {name: 'hiddenG', hidden: true, width: 50},
    {name: 'hiddenH', hidden: true, width: 50},
    {name: 'visibleA', width: 80, formatter: addFormatter},
    {name: 'visibleB', width: 80, formatter: subFormatter}
  ],
  caption: "Table within a cell",
  gridview: true,
  loadonce: true,
  viewrecords: true,
  loadui: "disable",
});

function addFormatter(cellvalue, options, rowObject) {
  var ret = " \
    <table class='details-table'> \
    <tr><td>A+B:</td><td class='al-right'>{0}</td></tr> \
    <tr><td>B+C:</td><td class='al-right'>{1}</td></tr> \
    <tr><td>C+D:</td><td class='al-right'>{2}</td></tr> \
    <tr><td>D+A:</td><td class='al-right'>{3}</td></tr> \
    </table> \
    ";
  ret = ret.replace("{0}", rowObject.hiddenA + rowObject.hiddenB);
  ret = ret.replace("{1}", rowObject.hiddenB + rowObject.hiddenC);
  ret = ret.replace("{2}", rowObject.hiddenC + rowObject.hiddenD);
  ret = ret.replace("{3}", rowObject.hiddenD + rowObject.hiddenA);

  return (ret);
}

function subFormatter(cellvalue, options, rowObject) {
  var ret = " \
    <table class='details-table'> \
    <tr><td>E-F:</td><td class='al-right'>{0}</td></tr> \
    <tr><td>F-G:</td><td class='al-right'>{1}</td></tr> \
    <tr><td>G-H:</td><td class='al-right'>{2}</td></tr> \
    <tr><td>H-A:</td><td class='al-right'>{3}</td></tr> \
    </table> \
  ";
  ret = ret.replace("{0}", rowObject.hiddenE - rowObject.hiddenF);
  ret = ret.replace("{1}", rowObject.hiddenF - rowObject.hiddenG);
  ret = ret.replace("{2}", rowObject.hiddenG - rowObject.hiddenH);
  ret = ret.replace("{3}", rowObject.hiddenH - rowObject.hiddenE);

  return (ret);
}

$( "#update" ).bind( "click", function() {
    $("#grid").jqGrid("setCell", 1, "hiddenE", 256);
  $("#grid").jqGrid("setCell", 1, "visibleB", "1");
});

jFiddle Example

如您所见，“更新”按钮正在更改“hiddenE”字段，然后触摸“visibleB”字段，只是为了进行更新。但实际发生的是“visibleA”字段被修改和销毁。

有什么想法吗？

Answer 1

这是您使用的 4.6 版中的一个错误。如果要更新单元格内的表格单元格，则问题出在 setCell 方法中。

同样的问题在我们支持的 Guriddo jqGrid 中仍然存在。我们已经在 GitHub 中修复了这个问题，如果您想使用 Guriddo jqGrid 产品，您可以对其进行测试。

我们知道在某些情况下无法升级到其他 jqGrid 克隆产品，这就是我们从未说过的原因 - 不要使用这个“旧”jqGrid 产品。

如果您对 javascript 不太熟悉，您可以修复 4.6 jqGrid 代码并使用它 - 为此，您需要打开 jquery.jqGrid.js 文件（不是缩小的）并找到 setCell 方法第 3646 行。找到表达式

var tcell = $("td:eq("+pos+")",ind);

替换成

var tcell = ind.cells[pos];

然后你可以缩小这个文件并使用它。

如果您不想这样做，您可以升级到受支持的 jqGrid 克隆之一 - 免费 jqGrid 或商业 Guriddo jqGrid