Question

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

No Grid Data

我正在获取网格的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;
            }

        }

事情变得每时每刻都很奇怪。当我运行我的应用程序时，我有以下网格。

weird issue

我只有9 rows in my table并且显示viewing 1-10 of 552。

有人可以帮我解决序列化的问题吗

Answer 1

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

服务器代码中的主要错误是在Web方法中使用JsonConvert.SerializeObject。如果您定义ResponseFormat=ResponseFormat.Json，则该方法应返回任何类型的对象，而不是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

此外，从index中移除所有colModel属性非常重要。如果您使用index选项，则name其他loadonce: true的使用会产生错误。

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

更改的结果应与the demo上的内容类似：

enter image description here

为什么我的jqGrid是空的，尽管json数据存在

1 个答案: