绑定JSON数据中的JSGRID

Question

我有一个网络服务，该网络返回JSON中的数据

[WebMethod]
    public string json_Getdata()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("id", typeof(string));
        dt.Columns.Add("name", typeof(string));
        dt.Columns.Add("Age", typeof(string));
        dt.Columns.Add("Country", typeof(string));
        dt.Columns.Add("Address", typeof(string));
        dt.Columns.Add("Phone", typeof(string));
        for (int i = 1; i < 6; i++)
        {
            DataRow dr = dt.NewRow();
            dr["id"] = i.ToString();
            dr["name"] = "Mr. xyz";
            dr["Age"] = (24 + i).ToString();
            dr["Country"] = "India";
            dr["Address"] = "H no- 456" + i;
            dr["Phone"] = "125896" + i;
            dt.Rows.Add(dr);
        }
        return JsonConvert.SerializeObject(dt, Newtonsoft.Json.Formatting.Indented);
    }

我想将这些数据填充到jsgrid中，示例代码下面是他们的网站

    $(function() {
    $("#jsGrid").jsGrid({
        height: "90%",
        width: "100%",
        filtering: true,
        editing: true,
        sorting: true,
        paging: true,
        autoload: true,
        pageSize: 15,
        pageButtonCount: 5,
        deleteConfirm: "Do you really want to delete the client?",
        controller: db,
        fields: [
            { name: "Name", type: "text", width: 150 },
            { name: "Age", type: "number", width: 50 },
            { name: "Address", type: "text", width: 200 },
            { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
            { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
            { type: "control" }
        ]
    });
});

消费Web服务

<script type="text/javascript">
$(function () {
    $.ajax({
        type: "POST",
        url: "http://localhost:50015/WebService1.asmx/json_Getdata",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function (response) {
            debugger;
            alert(response.d);
        },
        error: function (response) {
            debugger;
            alert(response.d);
        }
    });
});
function OnSuccess(response) {
    var  records = response.d;
    debugger;
}

i m获得如下

的数据

[ 
{"id": "1","name": "Mr. xyz","Age": "25","Country": "India","Address": "H no- 4561","Phone": "1258961"},
{"id": "2","name": "Mr. xyz","Age": "26","Country": "India","Address": "H no- 4562","Phone": "1258962"},
{"id": "3","name": "Mr. xyz","Age": "27","Country": "India","Address": "H no- 4563","Phone": "1258963"},
{"id": "4","name": "Mr. xyz","Age": "28","Country": "India","Address": "H no- 4564","Phone": "1258964"},
{"id": "5","name": "Mr. xyz","Age": "29","Country": "India","Address": "H no- 4565","Phone": "1258965"}
]

根据我的理解，它是在数组中CABN有人告诉我为什么这会发生

Answer 1

$(function() {
    $("#jsGrid").jsGrid({
        height: "90%",
        width: "100%",
        filtering: true,
        editing: true,
        sorting: true,
        paging: true,
        autoload: true,
        pageSize: 15,
        pageButtonCount: 5,
        deleteConfirm: "Do you really want to delete the client?",
       controller: {
                loadData: function (filter) {
                    var d1 = $.Deferred();                 
                    $.ajax({
                       type: "POST",
                       url: "http://localhost:50015/WebService1.asmx/json_Getdata",
                       data: '{}',
                       contentType: "application/json; charset=utf-8",
                       dataType: "json",
                    }).done(function (response) {
                        d1.resolve(jQuery.parseJSON(response.d));
                    });
                    return d1.promise();
                },
            },
        fields: [
            { name: "Name", type: "text", width: 150 },
            { name: "Age", type: "number", width: 50 },
            { name: "Address", type: "text", width: 200 },
            { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
            { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
            { type: "control" }
        ]
    });
});

请尝试从Web方法获取数据。