setCellが間違ったセルを更新する

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クローン製品にアップグレードすることができないということを知っています。これが私たちが言うことのない理由です。この「古い」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