jqgrid - ラジオボタンのクリックイベントがセルへの更新を保持しないのはなぜですか?

Question

説明: jqGrid.importGrid imptype:jsonJSON グリッドをインポートしてから、管理者が列全体のラジオ ボタン グループのステータスを変更してローカル データを「操作」できるようにする (列 1 のすべての行がデフォルトでchecked="checked"、そのステータスが変更されます ( checked="")。たとえば列 3 の同じ行 (同じラジオ ボタン グループ)。列 3 のラジオ ボタン クリック イベントでは、データベースへの AJAX 更新によって列 3 のチェック済みステータスが記録loadonce:trueされます。列 1 と列 3 の同じ行の 2 つのセルで、新しいチェック済みステータスと背景色が変更されます。これらのオプションが設定されていることに注意してください: datatype:local, loadonce:true,、ラジオ ボタン クリック イベントで新しいラジオ ボタン html を含む AJAX JSON 応答を取得した後と使用setCellセルを更新するために、更新を永続化していないようです。ローカル データの次のページに移動してから戻ると、ラジオ ボタンの変更は元のローカル データ バージョンに戻ります。jgGrid.importGrid を使用しているため、ローカル データでページングを使用できます。説明に関係のない.importGridメソッドを使用する理由は他にもありますが、現時点では考えていません。

これは、最初の「一度ロードされた」サーバー生成グリッド コード (jqGrid.importGrid のurl: dynamicGrid.ashx) です。

/*C#*/
/* -- Declarations --*/
int NumberOfRecords; //from db table
int PageSize; 
int NumberOfPages; //from SQL based on NumberOfRecords and PageSize

StringBuilder bldrColNames = new StringBuilder();
StringBuilder bldrColModel = new StringBuilder();
StringBuilder bldrData = new StringBuilder();
StringBuilder bldrGrid = new StringBuilder();

string pchecked = "checked='checked'";
string achecked = "checked=''";
string xchecked = "checked=''";

/* -- Default load once colNames -- */
bldrColNames.Append("[\"Pending\",\"Approved\",\"Declined\"]");

/* -- Default load once colModel -- */
bldrColModel.Append("[");
bldrColModel.Append("{\"name\":\"pending\",\"index\":\"pending\",\"jsonmap\":\"pending\",\"key\":true},");
bldrColModel.Append("{\"name\":\"approved\",\"index\":\"approved\",\"jsonmap\":\"approved\"},");
bldrColModel.Append("{\"name\":\"declined\",\"index\":\"declined\",\"jsonmap\":\"declined\"}");
bldrColModel.Append("]");

/* -- Default load once DATA ("Pending" column cells bgcolor default to yellow -- */
bldrGrid.Append("{\"id\":12345,\"row\":");
bldrGrid.Append("\"<span style='background-color:Yellow; background-image:none;'><input type='radio' name='12345' value='p' " + pchecked + "/></span>\",");
bldrGrid.Append("\"<span style='background-color:White; background-image:none;'><input type='radio' name='12345' value='a' " + achecked + "/></span>\",");
bldrGrid.Append("\"<span style='background-color:White; background-image:none;'><input type='radio' name='12345' value='x' " + xchecked + "/></span>\",");

/* -- JSON -- */
context.Response.ContentType = "application/json";

bldrGrid.Append("{\"grid\":");
bldrGrid.Append("{\"page\":\"1\",\"rowNum\":\"" + PageSize + "\",\"total\":\"" + NumberOfPages + "\",\"records\":\"" + NumberOfRecords + "\",\"sortname\":\"id\",\"pager\":\"#pmyGrid\",\"caption\":\"Approval Updates\",\"hidegrid\":false, \"url\":\"\",\"editurl\":\"clientArray\",\"loadonce\":true,\"datatype\":\"local\",");
bldrGrid.Append("\"colModel\":" + bldrColModel + ",\"data\":[" + bldrData + "],");
bldrGrid.Append("\"rowList\":[\"25\",\"35\",\"50\"],");
bldrGrid.Append("\"colNames\":" + bldrColNames + ",");
bldrGrid.Append("\"jsonReader\":{\"root\":\"data\",\"page\":\"1\",\"total\":\"" + NumberOfPages + "\",\"records\":\"" + NumberOfRecords + "\",\"repeatitems\":true,\"cell\":\"row\",\"id\":\"id\"},");
bldrGrid.Append("\"localReader\":{\"root\":\"data\",\"page\":\"1\",\"total\":\"" + NumberOfPages + "\",\"records\":\"" + NumberOfRecords + "\",\"repeatitems\":true,\"cell\":\"row\",\"id\":\"id\"},");
bldrGrid.Append("\"viewrecords\":true,\"height\":450, \"width\":1000}");
bldrGrid.Append("}");

jqGrid.importGrid、ラジオ ボタン クリック イベント、AJAX、および返された JSON は次のとおりです。

$("#myGrid").jqGridImport({
        imptype: "json",
        //impstring: jsonData,
        impurl: 'dynamicGrid.ashx,
        datatype: "local",
        jsonGrid: {
            config: "grid",
            data: "data"
        },
        importComplete: function () {

            $("#myGrid").jqGrid('setGridParam', { datatype: 'local' });

            $(":radio").live('click', function (event) {

            // depending on which radio button is clicked the AJAX url .asp file below gets
            // the record id from the radio button "name" and the character "value" ('p' or 'a' or 'x') stored in the "name".

            var vData = "" + $(this).attr('name') + "=" + $(this).val();

            $.ajax({

                type: "GET",
                url: "get_JSON_radios.asp", //returns rowid and new radio button html to update cells with as shown in the JSON below
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: vData,
                complete: function (xhr) {

                oJSON = JSON.parse(xhr.responseText);

                var rowid = '', pending = '', approved = '';

                for (var name in oJSON) {

                     if (oJSON[name].rowid) {
                         rowid = oJSON[name].rowid;
                      } else if (oJSON[name].pending) {
                         pending = oJSON[name].pending;
                      } else if (oJSON[name].approved) {
                         approved = oJSON[name].approved;
                      }

                 }

  // assuming an "Approved" column radio button was clicked, attempt to modify 
  // local data here with returned JSON but does not persist when paging back and forth...
  // (note: only including 2 of the 3 radios here pending/approved, "declined" is affected)

    $("#myGrid").jqGrid('setCell', rowid, 'pending', pending, { background: 'White', weightfont: 'normal' });
    $("#myGrid").jqGrid('setCell', rowid, 'approved', approved, { background: 'Green', weightfont: 'normal' });

    } // end complete

  }); // end ajax

 }
}).jqGrid('navGrid', '#pmyGrid', {
        edit: false,
        add: false,
        del: false,
        search: false

    }); // end myGrid

AJAX URL から返された JSON:

'this is assuming an "Approved" column radio button was clicked

Response.Write "[{""rowid"":12345},{""pending"":""<span style='background-color:White; background-image:none;'><input type='radio' name='12345' value='p'></span>""},{""approved"":""<span style='background-color:Green; background-image:none;'><input type='radio' name='12345' checked='checked'></span>""}]"

(Firebug によると、両方のケース (初期リターンと ajax リターン) の JSON は問題なく、グリッドに表示される新しいラジオ ボタン HTML が期待どおりにセルに表示されますが、ページを前後に移動すると、更新されたセルは保持されずに元の状態に戻ります)

最後に、管理者がここで行っていることは、ラジオ ボタンの列を更新している間だけ保持する必要があります。基盤となる AJAX がリモート データベースを更新するため、グリッドが更新または閉じられたときに、変更が既に記録され、リロードされたビューに表示されます。輸入。

url:""インポートされたグリッド URL がandloadonce:trueおよびdataype:localand であることを考慮して、ページングを行ったり来たりしたときに、ローカル データ セルへの変更が保持されない理由を特定できますediturl:clientArrayか? 多くのTIA

アップデート

によってインポートされる JSON グリッド構造とデータを確認して再確認しました。.jqGridImportすべてのオプションは、ローカル データのみで動作するように設定されていますloadonce:true, datatype:local, editurl:clientArray。Firebug と JSON 検証 Web ページによると、すべて問題ないようで、レコードはグリッドに期待どおりに表示されます。私が1週間近くオンとオフを解決しようとしてきた問題は、ラジオボタンをクリックして同じ行の別のセルを更新すると(実際に実行され、セルの変更値が表示されます)、次の場所に移動することです。次のページと戻ると、変更されたセルは、最初にインポートされた表示コンテンツに戻ります。私はローカルデータで作業し、ページ間で永続化し、次を使用して内部dataArrayと可視グリッドデータセルを変更しようとしました:

        $("#myGrid").jqGridImport({
        imptype: "json",
        //impstring: jsonData,
        impurl: 'grid_json.ashx,
        mtype: 'Get',
        datatype: "local",
        jsonGrid: {
            config: "grid",
            data: "data"
        },
        onPaging: function () {

        },
        importComplete: function () {

            $("#myGrid").jqGrid('setGridParam', { datatype: 'local' });

            $(":radio").live('click', function (event) {

                var rowid = $(this).attr('rowid');

                var $myGrid = jQuery("#cma")

                var dataArray = $myGrid.jqGrid('getGridParam', 'data'),
                indexes = $myGrid.jqGrid('getGridParam', '_index');


                 var rows = dataArray[indexes[rowid]];

                 rows.myCellToEdit = "asdfasdf";
                 //or could be rows['myCellToEdit'] = "asdfasdf";

                 //now show what internal grid dataArray contains for the changed cell
                   alert(rows.myCellToEdit);

                 //now write same change to visible grid cell. (also eliminates need to use .trigger('reloadGrid');)

                    $('#myGrid').jqGrid('setCell', rowid, 'pending', rows['pending']);
    }
}

アラートは、内部データ配列に変更があり、表示されているグリッド セルがメソッドに従って変更されていることを示しsetCellています (自分の目で確認できます) が、次のページに移動して戻ると、変更は保持されません。誰かがこれで私を助けてくれませんか。私が研究した何十もの例と同様のシナリオに従って私が見ていることは論理に反しており、私が調べたすべてのものから確認しようとしたことを適用して非常に多くのバリエーションをテストしました. サーバーからロードされて処理されたローカルデータをページングでき、変更がページ間で保持されることを明示的に読んだので、間違っていることや欠けていることを「見る」ことができません。どんなアイデアでもTIA。