kendo Grid加载远程数据方式

原文出处: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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值