jqGrid - 通过 Json 动态添加行

Question

我正在尝试根据用户在文本框中输入的值向我的 jqGrid 动态添加行。有一种方法可以从服务器获取 Json 请求，但我在获取它以添加实际数据时遇到问题。

这是 jqGrid 代码：

function RenderGrid(grid) {
$("#queryGrid").jqGrid({
    datatype: grid.DataType,
    mtype: grid.RequestType,
    colNames: grid.ColumnNames,
    colModel: grid.ColumnModel,
    pager: $('#pager'),
    rowNum: grid.MaxViewableRows,
    caption: "Search",
    width: grid.Width,
    rowList: grid.MaxViewableRowOptions,
    height: grid.Height,
    loadtext: "Please wait...",
    viewrecords: grid.ShowTotalRecords,
    hidegrid: grid.HideEnabled,
    forceFit: true
})

我没有设置 URL 选项，因为正如我之前提到的，数据来自其他地方。然而这是 colModel：

{"name":"id","index":"id","hidden":"true"},
{"name":"Customer","index":"Customer","sorttype":"Int32","editable":false,"width":216,"resizable":true},
{"name":"ShortName","index":"ShortName","sorttype":"String","editable":false,"width":216,"resizable":true},
{"name":"CorrespondenceName","index":"CorrespondenceName","sorttype":"String","editable":false,"width":216,"resizable":true}

这是获取 JSON 的代码：

function SearchGrid() {
    $.ajax({
        url: $.url("/MyController/MyAction"),
        type: "POST",
        dataType: "json",
        data: {
            Name: $('#Name').val(),
            Fields: $('#Fields').text(),
        },
        success: ApplyDataToGrid //More on this later in the question
    });
}

这一切似乎都很好。我认为问题不在于上述任何代码。这就是棘手的地方，这是我获取 JSON 对象以及尝试将其添加到网格的地方。

这是我返回的 JSON：

{"page":1,"records":1,"rows":[{"id":1,"cell":[94,"DAMIEN","IS AN IDIOT"]}],"total":1}

这是我用来（尝试）将数据添加到网格中的代码：

function ApplyDataToGrid(data) {
    $("#queryGrid")[0].addJSONData(data, $("#queryGrid").bDiv, 0)   
}

或

function ApplyDataToGrid(data) {
    $("#queryGrid")[0].addJSONData(data)   
}

这确实应用了页数和记录数，但它不显示应该添加 ID 和三列的行！

有什么想法吗？这让我疯狂！ 提前致谢， 达米安

Answer 1

由于您正在调用 MVC 控制器来获取 json 数据，因此我建议您按照 Oleg 的建议进行操作 here。 您可以将 jqGrid 预加载为空，然后，当用户单击按钮或更改文本框中的某些文本时，您可以触发网格的重新加载：myGrid.trigger('reloadGrid',[{page:1}]);

您的网格将获取更改的字段并将其与请求一起发送：

postData: {
            Param1: function() { return $("#Filter1").val(); },
            Param2: function() { return $("#Filter2").val(); }
        }, 

如果您使用的是 ASP.NET MVC 2 或 3 并且发布数据，您的操作将如下所示：

  [HttpPost]
    public JsonResult SuccesMsg()
    {
        return Json(yourdata, JsonRequestBehavior.DenyGet);
    }

Answer 2

不清楚您有哪种情况，因为您希望将数据附加到网格中，并且还希望获得正确的页数和记录数。 jqGrid 支持许多设置。您在有问题的测试网格中使用了哪些设置。例如datatype: grid.DataType 之类的代码太笼统了。如果您包含您在测试中使用但不起作用的所有 jqGrid 参数的值，这将非常有帮助。

sorttype":"String" 和 "sorttype":"Int32" 的设置肯定是错误的。可能你的意思是sorttype:"int" 和默认sorttype:"text"。

也许您可以使用包含完整网格数据的data 参数更好地填充网格。如果您确实需要在现有网格中追加数据而不重新创建它，您可以使用适用于所有数据类型的addRowData。顺便说一句，它允许每次调用addRowData 将数据数组添加到网格中。

还有一个问题：您的网格有 4 列，而您仅包含三列的值：[94,"DAMIEN","IS AN IDIOT"]。我觉得很奇怪。可能你想使用 ["1", "94","DAMIEN","IS AN IDIOT"]？如果您在“id”列中包含“key:true”并包含jsonReader:{cell:""}，则可以更改JSON数据的项目

{"id":1,"cell":["1","94","DAMIEN","IS AN IDIOT"]}

到

["1","94","DAMIEN","IS AN IDIOT"]

（见here）。

如果您准备一个示例没有任何 grid.DataType，会容易得多。只有在它运行良好之后，您才能使其更具动态性。