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
分享到:
相关推荐
1. 数据网格(Grid):Kendo UI Grid 是一个高度可配置的数据展示和管理工具,支持数据分页、排序、过滤、编辑等功能,同时提供了强大的行选择、分组、汇总和远程数据绑定能力。 2. 日历(Calendar):提供基本的...
- **定义**: DataSource是一种抽象的数据表示形式,可以用来表示本地数据(如JavaScript数组或对象)或远程数据(如webService返回的JSON、JSONP、OData或XML)。 - **功能**: - 从远程服务器检索数据。 - 维护...
3. **数据绑定**:Kendo UI与各种数据源(如JSON、XML、OData等)紧密结合,支持自动数据绑定和远程数据加载,简化数据操作。 4. **模板化**:使用Kendo UI,可以通过HTML模板定义组件的外观和结构,方便定制和维护...
同时,Kendo UI支持多种数据源,包括本地数据、远程服务数据以及AJAX数据加载,这使得它在处理大数据和复杂交互时表现出色。 在ASP.NET MVC中,Kendo UI的服务器端包装器是关键特性。这些包装器是.NET类,为每个...
10. **前端集成**:在前端页面中,正确配置Kendo UI Grid的配置项,设置数据源为远程(即服务器端),并启用必要的筛选、排序和分页功能。 通过以上步骤,你可以有效地在Laravel项目中利用Kendo UI Server Filters...
4. **下拉列表(DropDownLists)**: 包括基本下拉列表、组合框(ComboBox)、多选下拉(MultiSelect)等,用于在有限选项中进行选择,支持远程数据加载。 5. **菜单和导航(Menus and Navigation)**: Kendo UI提供...
2. **数据绑定**:TreeList可以与各种数据源绑定,包括JSON、XML、Array以及远程服务。数据绑定允许动态加载子节点,提高了性能,特别是在处理大量数据时。 3. **模板**:Kendo UI TreeList支持自定义列模板,允许...
- **远程数据绑定(Remote Data Binding)**:演示如何与后端服务交互,动态加载和更新数据。 - **数据操作(Data Manipulation)**:指导如何对数据进行增删改查操作,并保持前端与后端的一致性。 4. **表单处理**:...
在数据管理方面,Kendo UI for jQuery提供了DataSource组件,这是一个强大的数据抽象层,支持本地和远程数据源,包括Ajax请求和OData服务。它可以与各种UI部件无缝配合,处理数据的加载、排序、分页和过滤,大大简化...
$("#grid").kendoGrid({ dataSource: { // 数据源配置 }, columns: [ // 列定义 ] }); ``` 3. **数据源配置**:数据源是Grid的核心,可以是JSON对象、远程服务或者本地数组。在`dataSource`配置中,定义数据...
3. **数据绑定**:Kendo UI 的组件支持与多种数据源进行绑定,包括本地数据、远程API服务以及MVVM(Model-View-ViewModel)模式,这使得数据操作和展示变得简单易行。 4. **主题定制**:该框架提供了多种预设主题,...