`

kendo Grid加载远程数据方式

阅读更多
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
分享到:
评论

相关推荐

    Kendoui grid多级分组表格展现

    应用kendoui grid实现的多级分组表格展现,里面包含了表格的分组统计以及单表合计功能、还有针对表格的刷新以及子表格刷新功能。此功能是在原有demo版本上改进,增加了很多的个别需求实现,在原来的版本是做不到的。...

    kendo ui 实现复杂表头

    该代码类里面实现的主要操作: 1.ajax 访问后代接口,并将结果返回值绑定到kendo ui 的grid上。 2. 实现复杂的kendo ui 的grid的表头设置,这个是本人亲自写的,并且经过验证是正确的

    Kendo UI框架grid的Excel导出功能改进js代码

    Kendo UI框架提供了强大的Excel导出功能,通过Grid的saveAsExcel能方便地导出Grid中的数据,而且格式美观大方,使用起来也非常方便。但是在实际使用中不是很理想,主要有以下两个问题: 1. 导出的列数据是原始值 ...

    动态设置显示kendoui grid控件某一列的格式

    griddatepickercustomfiltering,动态设置显示kendoui grid控件某一列的格式

    Kendo UI Grid

    Kendo UI ,在ASP.NET MVC 4中使用Kendo UI Grid

    Kendo UI Grid示例下载

    Kendo UI Grid为开发者提供了100多种丰富的网格功能,从基本的筛选、排序,到高级的编页、分层数据分组等等。毫不夸张的说,Kendo UI Grid是同类产品中数一数二的佼佼者。耳听为虚眼见为实,下面我为大家整理了它的...

    标准kendo ui-grid控件用法

    标准kendo ui-grid控件用法,文档形式。

    kendo-grid-csv-download:添加从 Kendo UI Web Grid 控件下载数据的功能

    Kendo Grid 下载/导出到 CSV 使用客户端过滤和排序时,下载 Kendo UI 网格控件的排序、过滤内容(如果您使用免费版本,则可能会这样做)。依赖项: jQuery - 可能是任何版本,当然是任何足以支持 Kendo Grid 的最新...

    kendo-grid-scroll:程序网格滚动选择 kendo-ui 库。 自动支持网格的虚拟模式

    支持本地和远程数据源,网格的虚拟模式。 一个演示是可在Github上页网页的剑道网-滚动。 基本用法 // some grid $ ( "#grid" ) . kendoGrid ( { dataSource : { data : data , pageSize : 20 } , ... //...

    Kendo Grid editing 自定义验证报错提示的解决方法

    Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。今天小编通过分享本文给大家介绍Kendo Grid editing 自定义验证报错提示的解决方法

    kendo-ui-js-grid.zip_Kendo_grid js

    前台kendo ui js grid 的增删改查,js部分。包括分页查询,服务及异常和激活

    实现grid行 列的自定义添加和删除 绝对原创

    这两天项目需要,临时做了一个,没有封装,该grid可以实现列和行的自定义添加和删除,包括修改标题,以及列的右击添加事件。希望对你们有所帮助!双击列名可以对列名进行修改,右键列名可以选择左侧和右侧添加列以及...

    Ext grid中数据上移下移

    Ext grid中数据上移下移

    KendoUI速查手册--中文

    KendoUI速查手册--中文

    kendo-grid-editors:kendo-ui 库的附加网格编辑器

    kendoGrid ( { dataSource : dataSource , columns : [ { //column settings field : "type" , title : "Type" , editor : function ( container , options ) { // create custom editors // setup required ...

    multiselectingrid自定义选择显示td

    kendoui multiselectingrid,自定义选择显示grid中的td

    kendoUI professional实战代码

    Kendo UI Professional目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库;Kendo UI...

    React_Kendo:KendoUI Grid 作为 ReactJS 组件

    请注意,Kendo Grid 属于 Kendo UI 的“专业”版本,因此需要适当的许可才能使用。 因此,我不提供受版权保护的脚本/样式以避免违反 Telerik 的许可条款。 但是有 30 天的试用期: Kendo-Scripts 应该进入Scripts...

    Kendo UI 2015

    Kendo UI DataViz – 用于显示数据的HTML5UI组件. Kendo UI Mobile – 用于开发基于移动设备的HTML5 UI框架. Kendo UI Complete -包含了上面三个开发包. Kendo UI Complete for ASP.NET MVC -包括了Web,DataViz...

Global site tag (gtag.js) - Google Analytics