将JSON绑定到DevExtreme数据网格

将数据加载到DevExtreme datagrid时遇到问题。 如果我试着用这个示例代码示例：

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/ add： type:"GET"并更改列的名称以在JSON响应中命名我的列，但不起作用。返回JSON格式的数据我是新技术，是我做错了什么？我没有在API参考中找到，如何从MVC动作绑定JSON数据，也许我错了搜索。

---

确保JSON中包含以下字段：

“订单号”

“订购日期”

“StoreCity”

“StoreState”

“雇员”

“SaleAmount”

---

这是我的JSON结果操作，是的，代码中的列名与JSON结果操作中的列名相同。

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

---

你应该在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");

链接地址: http://www.djcxy.com/p/31089.html

上一篇: Bind JSON to DevExtreme datagrid

下一篇: Devexpress xtragrid column set mask with repositoryItemTextEdit