Question

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

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

jqGrid接近WRONG单元并在其中创建一些混乱。我已经创建了一个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克隆产品，这就是我们从未说过的原因 - 不要使用这个＆＃34; old＆＃34; 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

setCell更新错误的单元格

1 个答案: