`

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速查手册--中文

    1. 数据网格(Grid):Kendo UI Grid 是一个高度可配置的数据展示和管理工具,支持数据分页、排序、过滤、编辑等功能,同时提供了强大的行选择、分组、汇总和远程数据绑定能力。 2. 日历(Calendar):提供基本的...

    KendoUI的速查手册

    - **定义**: DataSource是一种抽象的数据表示形式,可以用来表示本地数据(如JavaScript数组或对象)或远程数据(如webService返回的JSON、JSONP、OData或XML)。 - **功能**: - 从远程服务器检索数据。 - 维护...

    ui jquery kendo ui 一个不错的国外ui kendoui 又名剑道UI

    3. **数据绑定**:Kendo UI与各种数据源(如JSON、XML、OData等)紧密结合,支持自动数据绑定和远程数据加载,简化数据操作。 4. **模板化**:使用Kendo UI,可以通过HTML模板定义组件的外观和结构,方便定制和维护...

    kendoui asp.net mvc

    同时,Kendo UI支持多种数据源,包括本地数据、远程服务数据以及AJAX数据加载,这使得它在处理大数据和复杂交互时表现出色。 在ASP.NET MVC中,Kendo UI的服务器端包装器是关键特性。这些包装器是.NET类,为每个...

    Laravel开发-laravel-kendo-server-filters

    10. **前端集成**:在前端页面中,正确配置Kendo UI Grid的配置项,设置数据源为远程(即服务器端),并启用必要的筛选、排序和分页功能。 通过以上步骤,你可以有效地在Laravel项目中利用Kendo UI Server Filters...

    ui框架kendoui demo

    4. **下拉列表(DropDownLists)**: 包括基本下拉列表、组合框(ComboBox)、多选下拉(MultiSelect)等,用于在有限选项中进行选择,支持远程数据加载。 5. **菜单和导航(Menus and Navigation)**: Kendo UI提供...

    kendoui的TreeList 的几个小demo

    2. **数据绑定**:TreeList可以与各种数据源绑定,包括JSON、XML、Array以及远程服务。数据绑定允许动态加载子节点,提高了性能,特别是在处理大量数据时。 3. **模板**:Kendo UI TreeList支持自定义列模板,允许...

    kendo ui cookbook pdf

    - **远程数据绑定(Remote Data Binding)**:演示如何与后端服务交互,动态加载和更新数据。 - **数据操作(Data Manipulation)**:指导如何对数据进行增删改查操作,并保持前端与后端的一致性。 4. **表单处理**:...

    Kendo UI for jQuery 2022.1.119

    在数据管理方面,Kendo UI for jQuery提供了DataSource组件,这是一个强大的数据抽象层,支持本地和远程数据源,包括Ajax请求和OData服务。它可以与各种UI部件无缝配合,处理数据的加载、排序、分页和过滤,大大简化...

    gridcolorrows

    $("#grid").kendoGrid({ dataSource: { // 数据源配置 }, columns: [ // 列定义 ] }); ``` 3. **数据源配置**:数据源是Grid的核心,可以是JSON对象、远程服务或者本地数组。在`dataSource`配置中,定义数据...

    telerik kendo ui professional 2014.2.909 commercial

    3. **数据绑定**:Kendo UI 的组件支持与多种数据源进行绑定,包括本地数据、远程API服务以及MVVM(Model-View-ViewModel)模式,这使得数据操作和展示变得简单易行。 4. **主题定制**:该框架提供了多种预设主题,...

Global site tag (gtag.js) - Google Analytics