1

描述：jqGrid.importGrid imptype:json用于导入 JSON 网格，然后允许管理员通过更改跨列单选按钮组的状态来“处理”本地数据（列 1 中的所有行默认为，并且通过单击另一个单选按钮checked="checked"更改该状态 ( )checked=""说第 3 列中的同一行（相同的单选按钮组）。在第 3 列单选按钮单击事件中，对数据库的 AJAX 更新记录了第 3 列的检查状态，并且由于loadonce:true设置了一个 JSON，因此仅返回 HTML 单选按钮代码以替换在第 1 列和第 3 列的同一行中的 2 个单元格具有新的选中状态和背景颜色更改。请记住，这些选项已设置：datatype:local, loadonce:true,，在单选按钮单击事件中获取包含新单选按钮 html 的 AJAX JSON 响应后并使用setCell要更新单元格，它似乎不会持续更新。如果我导航到本地数据的下一页然后导航回单选按钮更改将恢复为原始本地数据版本。我正在使用 jgGrid.importGrid 以便对本地数据进行分页。我还有其他使用 .importGrid 方法的原因，这些原因与我目前不认为的描述无关。

这是初始“加载一次”服务器生成的网格代码（jqGrid.importGrid's 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，两种情况下的 JSON - 初始和 ajax 返回 - 都很好，并且显示的网格显示新的单选按钮 HTML 按预期显示在单元格中，但是当来回分页时，更新的单元格恢复到原始状态而不是持续存在）

最后，管理员在此处所做的只需在他/她更新单选按钮列时保持不变，底层 AJAX 会更新远程数据库，因此当网格刷新或关闭时，更改已被记录并会出现在重新加载进口。

url:""考虑到导入的网格 url 是andloadonce:true和dataype:localand ，任何人都可以确定为什么本地数据单元格的更改在来回分页时不会持续存在editurl:clientArray吗？许多 TIA

更新

我已经检查并重新检查了 JSON 网格结构和导入的数据，.jqGridImport并且所有选项都设置为仅处理本地数据：loadonce:true, datatype:local, editurl:clientArray根据 Firebug 和 JSON 验证网页，这一切似乎都很好，并且记录在网格中按预期显示。我已经尝试解决近一周的问题是，当我单击一个单选按钮以更新同一行中的另一个单元格（它确实这样做并且我看到单元格更改值）然后导航到下一页和返回，更改的单元格恢复为最初导入的可见内容。我只想处理本地数据并让它持续一页一页地返回，并尝试使用以下内容更改内部 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 的任何想法。

4

0 回答 0