为什么我的 jqGrid 是空的，即使存在 json 数据

Question

这是我的 jqGrid，它没有显示任何数据。

我正在获取网格的 json 响应，但它没有显示。

这是我到目前为止所做的。

<script type="text/javascript">
        $.jgrid.no_legacy_api = true;

        function getCompanyData() {
        //debugger;
            $.ajax({
                url: "jqGrid_pureJS.aspx/GetCompanyList",
                data: "{}",  // "{}" For empty input data use "{}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    //debugger;
                    var grdData = $("#jqGrid")[0];
                    grdData.addJSONData(result.d);
                },
                error: function (result) {
                    //debugger;
                }
            });
        }
        $(function () {
            $("#jqGrid").jqGrid({
                datatype: getCompanyData,
                colNames: ['Id', 'Name', 'Address', 'City', 'Phone'],
                colModel: [
                          { name: 'F1', index: 'invid', width: 55 },
                          { name: 'F2', index: 'invdate', width: 90,editable:true },
                          { name: 'F3', index: 'amount', width: 80,editable:true, align: 'right' },
                          { name: 'F4', index: 'tax', width: 80,editable:true, align: 'right' },
                          { name: 'F5', index: 'total', width: 80,editable:true, align: 'right' }
                ],
                pager: $("#pager"),
                rowNum: 10,
                rowList: [10, 20, 30],
                viewrecords: true,
                caption: 'My first grid',
                width:800

            }).navGrid('#pager', { edit:true,view: true, del: false });
        });

    </script>

这是我发布数据的网络方法。

        [WebMethod]
        [ScriptMethod(ResponseFormat=ResponseFormat.Json,UseHttpGet=false)]
        public static string GetCompanyList()
        {

            var data = GetAllData();
            try
            {
                string response = JsonConvert.SerializeObject(data, Formatting.Indented);
                return response;
            }
            catch (Exception ex)
            {
                return ex.Message;
            }
        }

这是我捕获的 json 响应：

    {"d":"
    [\r\n  
        {\r\n    
        \"F1\": 1.0,\r\n    
        \"F2\": \"Name\",\r\n    
        \"F3\": \"Address\",\r\n    
        \"F4\": \"City\",\r\n    
        \"F5\": \"Phone\"\r\n  
        },
        \r\n  
        {\r\n    
        \"F1\": 10.0,\r\n    
        \"F2\": \"abc\",\r\n    
        \"F3\": \"def\",\r\n    
        \"F4\": \"asd\",\r\n    
        \"F5\": \"998907\"\r\n  
        }
    ]
}

我可以看到类似的问题jqgrid not showing data，我已经检查过了，但我并没有解决我的问题

为什么没有追加json数据？我该怎么做？

编辑

作为答案的一部分，我删除了我的 javascript 来调用 jqGrid 并替换了 oleg 在答案中发布的代码。

我也对服务器端的代码做了一些小改动。

这是服务器端代码：

        [WebMethod]
        [ScriptMethod(UseHttpGet = false)]
        public static string GetCompanyList()
        {
            var data = GetAllData();

            //string response = JsonConvert.SerializeObject(data, Formatting.Indented);
            return data;

        }

        public static string GetAllData()
        {
            try
            {
                //Grab the connection string defined in web.config
                var connectionString = ConfigurationManager.ConnectionStrings["Test_3ConnectionString"].ConnectionString;

                DataTable dt = null;

                //Command Text
                string commandText = "SELECT * FROM EmpDetails";

                dt = SQLHelper.ExecuteDataTable(connectionString, CommandType.Text, commandText, "EmpDetails");

                string result = JsonConvert.SerializeObject(dt);

                return result;
            }
            catch (Exception ex)
            {
                throw;
            }

        }

每小时都在发生奇怪的事情。当我运行我的应用程序时，我有以下网格。

我只有9 rows in my table，它显示的是viewing 1-10 of 552。

有人能帮我看看序列化有什么问题吗

Answer 1

您的代码中可能存在错误。看起来您使用了一些至少有 3 年历史的复古代码示例。

服务器代码中的主要错误是在 web 方法中使用了JsonConvert.SerializeObject。如果您定义了ResponseFormat=ResponseFormat.Json，那么该方法应该返回任何类型的object，而不是string。 .Net 将对象自动转换为 JSON。所以GetCompanyList()的返回值类型应该和GetAllData()的返回类型一致。更改后，Web 方法应返回类似的数据

{
    "d": [
        {
            "F1": 1,
            "F2": "Name",
            "F3": "Address",
            "F4": "City",
            "F5": "Phone"
        },
        {
            "F1": 10,
            "F2": "abc",
            "F3": "def",
            "F4": "asd",
            "F5": "998907"
        }
    ]
}

您使用datatype 定义为函数的第二个问题。如果您可以使用某些参数获取关于jQuery.ajax 的数据，那么这是您应该永远不要使用的低级方式。 jqGrid 提供了很多不同的自定义方式来更改 jqGrid 内部使用的jQuery.ajax 的参数。通常，指定类似的选项就足够了

url: "jqGrid_pureJS.aspx/GetCompanyList",
mtype: 'POST',
datatype: 'json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
    return JSON.stringify(postData);
},
jsonReader: {
    repeatitems: false,
    root: function (obj) { return obj.d; }
},
gridview: true,
height: "auto",
loadonce: true

从colModel 中删除所有index 属性也很重要。如果您使用loadonce: true 选项，则将index other 用作name 会出现错误。

如果F1 列包含唯一 值，那么我建议您将key: true 属性添加到"F1" 列的定义中。

更改的结果应该类似于the demo: