Javascript 从json数据绑定jsgrid

我有一个以json格式返回数据的Web服务

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

在使用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;
}

据我所知，它位于数组中，但我无法通过索引访问数据（如记录[0]。名称）-它总是显示未定义的
有人告诉我为什么会这样

$(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方法获取数据。

您必须定义网格

控制器

。请参阅jsGrid+ASP.NET的示例实现。我相信我对这个问题的回答将对您有所帮助@tabalin您的文档和示例没有清楚地演示如何1）填充动态json数组，2）将值应用到以select作为类型的字段，以便可以从受约束的值数组中编辑该字段。这对我很有用！我不知道为什么会被否决。几年后，这里也是一样，这是动态json没有明确记录的结构。很不错的！

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

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