Question

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

Answer 1

确保JSON中存在以下字段：

＆＃34; ORDERNUMBER＆＃34;
＆＃34;订购日期＆＃34;
＆＃34; StoreCity＆＃34;
＆＃34; StoreState＆＃34;
＆＃34;员工＆＃34;
＆＃34; SaleAmount＆＃34;

Answer 2

这是我的JSON结果操作，是的，代码中的列名与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"}]

Answer 3

你应该在dxDataGrid中设置你的列（在你的json：“姓名”，“姓氏”，“部门”，“地址”）：

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

将JSON绑定到DevExtreme datagrid

3 个答案: