kendo Grid加载远程数据方式

来源：互联网发布：制作视频mp4软件编辑：程序博客网时间：2024/05/22 15:28

原文出处：http://xuehua1987.iteye.com/blog/2098121

kendo Grid官网提供的远程加载数据的方式在实际中其实不可行的。下面是它在官网中加载数据的例子：
<div id="example">
            <div id="grid"></div>
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",//官网中数据的type
                            transport: {
                                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            },
                            //它这边ajax返回的数据是一个数组列表
                            schema: {
                                model: {
                                    fields: {
                                        OrderID: { type: "number" },
                                        Freight: { type: "number" },
                                        ShipName: { type: "string" },
                                        OrderDate: { type: "date" },
                                        ShipCity: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 20,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 550,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        columns: [{
                                field:"OrderID",
                                filterable: false
                            },
                            "Freight",
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                format: "{0:MM/dd/yyyy}"
                            }, {
                                field: "ShipName",
                                title: "Ship Name"
                            }, {
                                field: "ShipCity",
                                title: "Ship City"
                            }
                        ]
                    });
                });
            </script>
        </div>
在demo里面远程的数据返回的是一个类似于数据列表，但是在实际项目中，我们ajax返回的是一个对象集合，这个对象里面存放了一个数组，安装它上面的方式是不能直接加载出数据的。
$("#example").kendoGrid({
             dataSource: {
                 transport: {
                     read: url,
                     dataType:"json"
                 },
                 schema: {
                     data:"data",//ajax返回的对象
                     model: {
                     //数据字段的映射
                         fields: {
                             id: { type: "string" },
                             status: { type: "string" },
                             queue: { type: "string" },
                             submitTime: { type: "String" },
                             executionHost: { type: "string" },
                             name:{type:"string"}
                         }
                     }

                 },
                 //分页信息
                 pageSize: 11,
                 serverPaging: false,
                 serverFiltering: false,
                 serverSorting: false
             },
             selectable: "multiple",
             navigatable: true,
             height: 473,
             filterable: true,
             sortable: true,
             pageable: true,
             //列的映射
             columns: [{
                     field:"id",
                     title:$.i18n.prop("appform.job.inf.id")
                 }, {
                     field:"status",
                     title: $.i18n.prop("appform.job.inf.stat")
                 }, {
                     field:"queue" ,
                     title: $.i18n.prop("appform.job.inf.queue")
                 }, {
                     field:"submitTime" ,
                     title: $.i18n.prop("appform.job.inf.submitTime"),
                     format: "{0:MM/dd/yyyy}"
                 },{
                     field:"executionHost" ,
                     title: $.i18n.prop("appform.job.inf.executeNode")
                 }, {
                     field:"name" ,
                     title: $.i18n.prop("appform.job.inf.name")
                 }
             ]
         });
文章转自：IT家园http://wgyblog.com/html/artwebfront/131.html

阅读全文

0 0