0

这是我的 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 没有显示数据，我已经检查过了，但我并没有摆脱我的问题

为什么没有附加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。

有人可以帮我序列化有什么问题吗

4

1 回答 1

3

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

服务器代码中的主要错误是使用了JsonConvert.SerializeObjectinside of web 方法。如果您定义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.ajaxjqGrid 提供了许多不同的自定义方式来更改jQuery.ajaxjqGrid 内部使用的参数。通常，指定选项就足够了

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其他的用法如下错误。nameloadonce: true

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

更改的结果应该像演示中的那样：

在此处输入图像描述

于 2013-04-08T15:12:56.677 回答