从 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" }
        ]
    });

});

使用网络服务后

<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;
}

我正在获取如下数据

[ 
{"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"}
]

据我了解，它在数组中，但我无法按索引访问数据（如记录 [0].name）-它总是显示未定义
有人告诉我为什么会发生这种情况

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" }
        ]
    });
});

请尝试这个从网络方法获取数据。