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实现的多级分组表格展现,里面包含了表格的分组统计以及单表合计功能、还有针对表格的刷新以及子表格刷新功能。此功能是在原有demo版本上改进,增加了很多的个别需求实现,在原来的版本是做不到的。...
该代码类里面实现的主要操作: 1.ajax 访问后代接口,并将结果返回值绑定到kendo ui 的grid上。 2. 实现复杂的kendo ui 的grid的表头设置,这个是本人亲自写的,并且经过验证是正确的
Kendo UI框架提供了强大的Excel导出功能,通过Grid的saveAsExcel能方便地导出Grid中的数据,而且格式美观大方,使用起来也非常方便。但是在实际使用中不是很理想,主要有以下两个问题: 1. 导出的列数据是原始值 ...
griddatepickercustomfiltering,动态设置显示kendoui grid控件某一列的格式
Kendo UI ,在ASP.NET MVC 4中使用Kendo UI Grid
Kendo UI Grid为开发者提供了100多种丰富的网格功能,从基本的筛选、排序,到高级的编页、分层数据分组等等。毫不夸张的说,Kendo UI Grid是同类产品中数一数二的佼佼者。耳听为虚眼见为实,下面我为大家整理了它的...
标准kendo ui-grid控件用法,文档形式。
Kendo Grid 下载/导出到 CSV 使用客户端过滤和排序时,下载 Kendo UI 网格控件的排序、过滤内容(如果您使用免费版本,则可能会这样做)。依赖项: jQuery - 可能是任何版本,当然是任何足以支持 Kendo Grid 的最新...
支持本地和远程数据源,网格的虚拟模式。 一个演示是可在Github上页网页的剑道网-滚动。 基本用法 // some grid $ ( "#grid" ) . kendoGrid ( { dataSource : { data : data , pageSize : 20 } , ... //...
Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。今天小编通过分享本文给大家介绍Kendo Grid editing 自定义验证报错提示的解决方法
前台kendo ui js grid 的增删改查,js部分。包括分页查询,服务及异常和激活
这两天项目需要,临时做了一个,没有封装,该grid可以实现列和行的自定义添加和删除,包括修改标题,以及列的右击添加事件。希望对你们有所帮助!双击列名可以对列名进行修改,右键列名可以选择左侧和右侧添加列以及...
Ext grid中数据上移下移
KendoUI速查手册--中文
kendoGrid ( { dataSource : dataSource , columns : [ { //column settings field : "type" , title : "Type" , editor : function ( container , options ) { // create custom editors // setup required ...
kendoui multiselectingrid,自定义选择显示grid中的td
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...
请注意,Kendo Grid 属于 Kendo UI 的“专业”版本,因此需要适当的许可才能使用。 因此,我不提供受版权保护的脚本/样式以避免违反 Telerik 的许可条款。 但是有 30 天的试用期: Kendo-Scripts 应该进入Scripts...
Kendo UI DataViz – 用于显示数据的HTML5UI组件. Kendo UI Mobile – 用于开发基于移动设备的HTML5 UI框架. Kendo UI Complete -包含了上面三个开发包. Kendo UI Complete for ASP.NET MVC -包括了Web,DataViz...