将 JSON 绑定到 DevExtreme 数据网格答案

【问题标题】：Bind JSON to DevExtreme datagrid将 JSON 绑定到 DevExtreme 数据网格
【发布时间】：2017-01-05 19:16:58
【问题描述】：

我在将数据加载到 DevExtreme 数据网格时遇到问题。如果我尝试示例，使用此示例代码：

var orders = new DevExpress.data.CustomStore({
    load: function (loadOptions) {
        var deferred = $.Deferred(),
            args = {};

        if (loadOptions.sort) {
            args.orderby = loadOptions.sort[0].selector;
            if (loadOptions.sort[0].desc)
                args.orderby += " desc";
        }

        args.skip = loadOptions.skip || 0;
        args.take = loadOptions.take || 12;

        $.ajax({
            url: "http://js.devexpress.com/Demos/WidgetsGallery/data/orderItems",
            data: args,
            success: function(result) {
                deferred.resolve(result.items, { totalCount: result.totalCount });
            },
            error: function() {
                deferred.reject("Data Loading Error");
            },
            timeout: 5000
        });

        return deferred.promise();
    }
});

var grid = $("#gridContainer").dxDataGrid({
    dataSource: {
        store: orders
    },
    paging: {
        pageSize: 12
    },
    pager: {
        showPageSizeSelector: true,
        allowedPageSizes: [8, 12, 20]
    },
    columns: [
        "OrderNumber", "OrderDate", "StoreCity", "StoreState", "Employee", {
            dataField: "SaleAmount",
            format: "currency"
        }
    ]
}).dxDataGrid("instance");

它有效，所以执行 devextreme datagrid 的问题我没有问题。但是当我想为我的数据设置数据源时，它不起作用。我有 ASP.NET mvc 应用程序。一项操作 GetData 以 JSON 格式返回数据。如果我将网址更改为：

url:"/Home/GetData"，或url:"localhost:port/Home/GetData/ 添加：type:"GET" 并更改列的名称以在 JSON 响应中命名我的列。它不起作用。但是操作 GetData 以 JSON 格式返回数据。我是这项技术的新手。我做错了什么吗？我在 API 参考中找不到任何地方，如何从 MVC 操作绑定 JSON 数据，也许我搜索错了。

【问题讨论】：

您能提供您的 JSON 响应吗？

标签： javascript json asp.net-mvc asp.net-ajax devextreme

【解决方案1】：

确保您的 JSON 中存在以下字段：

“订单号”
“订单日期”
“商店城市”
“商店状态”
“员工”
“销售额”

【讨论】：

【解决方案2】：

这是我的 JSON Result Action，是的，代码中的列名与 JSON Result Action 中的相同。

[{"Name":"Jan","Surname":"Novak","Department":"IT","Address":"Address 1"},{"Name":"Jan ","Surname":"Datel","Department":"HR","Address":"Address 2"},{"Name":"Josef","Surname":"Novotny","Department":"IT","Address":"Address 2"}]

【讨论】：

如果您将此回复粘贴到您的问题而不是作为答案，将会很有帮助。我建议将其移至您的问题。然后删除这个答案。

【解决方案3】：

您应该在 dxDataGrid 中设置您的列（在您的 json 中：“Name”、“Surname”、“Department”、“Address”）：

var grid = $("#gridContainer").dxDataGrid({
    dataSource: {
        store: orders
    },
    paging: {
        pageSize: 12
    },
    pager: {
        showPageSizeSelector: true,
        allowedPageSizes: [8, 12, 20]
    },
    columns: [
        "Name", "Surname", "Department", "Address"
    ]
}).dxDataGrid("instance");

您还可以使用最低设置创建网格：

var grid = $("#gridContainer").dxDataGrid({
    dataSource: {
        store: orders
    }
}).dxDataGrid("instance");

【讨论】：