KendoUI系列:Grid
1、基本使用
<div id="grid"></div>
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.web.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
dataType: "json",
read: "/Province/GetProvinceList"
},
pageSize: 10,
},
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ProvinceID",
title: "省份ID",
width: 200
}, {
field: "ProvinceNo",
title: "省份编号"
}, {
field: "ProvinceName",
title: "省份名称"
}]
});
});
</script>
效果预览:
说明:pageSizes设置可选择每页显示的条数,buttonCount设置最多显示的页数,超出时则显示...。以上实现方式第一次从服务端加载出全部的数据,Kendo UI Grid进行客户端分页。
2、绑定本地数据
<div id="grid"></div>
<script type="text/javascript">
$(function () {
var provinces = [{ "ProvinceID": 1, "ProvinceNo": "110000", "ProvinceName": "北京市" }, { "ProvinceID": 2, "ProvinceNo": "120000", "ProvinceName": "天津市" }, { "ProvinceID": 3, "ProvinceNo": "130000", "ProvinceName": "河北省" }, { "ProvinceID": 4, "ProvinceNo": "140000", "ProvinceName": "山西省" }, { "ProvinceID": 5, "ProvinceNo": "150000", "ProvinceName": "内蒙古" }, { "ProvinceID": 6, "ProvinceNo": "210000", "ProvinceName": "辽宁省" }, { "ProvinceID": 7, "ProvinceNo": "220000", "ProvinceName": "吉林省" }, { "ProvinceID": 8, "ProvinceNo": "230000", "ProvinceName": "黑龙江" }, { "ProvinceID": 9, "ProvinceNo": "310000", "ProvinceName": "上海市" }, { "ProvinceID": 10, "ProvinceNo": "320000", "ProvinceName": "江苏省" }, { "ProvinceID": 11, "ProvinceNo": "330000", "ProvinceName": "浙江省" }, { "ProvinceID": 12, "ProvinceNo": "340000", "ProvinceName": "安徽省" }, { "ProvinceID": 13, "ProvinceNo": "350000", "ProvinceName": "福建省" }, { "ProvinceID": 14, "ProvinceNo": "360000", "ProvinceName": "江西省" }, { "ProvinceID": 15, "ProvinceNo": "370000", "ProvinceName": "山东省" }, { "ProvinceID": 16, "ProvinceNo": "410000", "ProvinceName": "河南省" }, { "ProvinceID": 17, "ProvinceNo": "420000", "ProvinceName": "湖北省" }, { "ProvinceID": 18, "ProvinceNo": "430000", "ProvinceName": "湖南省" }, { "ProvinceID": 19, "ProvinceNo": "440000", "ProvinceName": "广东省" }, { "ProvinceID": 20, "ProvinceNo": "450000", "ProvinceName": "广西" }, { "ProvinceID": 21, "ProvinceNo": "460000", "ProvinceName": "海南省" }, { "ProvinceID": 22, "ProvinceNo": "500000", "ProvinceName": "重庆市" }, { "ProvinceID": 23, "ProvinceNo": "510000", "ProvinceName": "四川省" }, { "ProvinceID": 24, "ProvinceNo": "520000", "ProvinceName": "贵州省" }, { "ProvinceID": 25, "ProvinceNo": "530000", "ProvinceName": "云南省" }, { "ProvinceID": 26, "ProvinceNo": "540000", "ProvinceName": "西藏" }, { "ProvinceID": 27, "ProvinceNo": "610000", "ProvinceName": "陕西省" }, { "ProvinceID": 28, "ProvinceNo": "620000", "ProvinceName": "甘肃省" }, { "ProvinceID": 29, "ProvinceNo": "630000", "ProvinceName": "青海省" }, { "ProvinceID": 30, "ProvinceNo": "640000", "ProvinceName": "宁夏" }, { "ProvinceID": 31, "ProvinceNo": "650000", "ProvinceName": "新疆" }, { "ProvinceID": 32, "ProvinceNo": "710000", "ProvinceName": "台湾省" }, { "ProvinceID": 33, "ProvinceNo": "810000", "ProvinceName": "香港" }, { "ProvinceID": 34, "ProvinceNo": "820000", "ProvinceName": "澳门" }]; $("#grid").kendoGrid({
dataSource: {
data: provinces,
schema: {
model: {
fields: {
ProvinceID: { type: "number" },
ProvinceNo: { type: "string" },
ProvinceName: { type: "string" }
}
}
},
pageSize: 10
},
pageable: {
input: true,
numeric: false,
messages: {
display: "{0} - {1} 共 {2} 条数据",
empty: "没有数据",
page: "页",
of: "/ {0}",
itemsPerPage: "条每页",
first: "第一页",
previous: "前一页",
next: "下一页",
last: "最后一页",
refresh: "刷新"
}
},
columns: [{
field: "ProvinceID",
title: "省份ID"
}, {
field: "ProvinceNo",
title: "省份编号"
}, {
field: "ProvinceName",
title: "省份名称"
}]
});
});
</script>
3、绑定远程数据
<div id="grid"></div>
<script type="text/javascript">
$(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
type: "post",
url: "/Province/GetProvincePagedList",
dataType: "json",
contentType: "application/json"
},
parameterMap: function (options, operation) {
if (operation == "read") {
var parameter = {
page: options.page,
pageSize: options.pageSize
};
return kendo.stringify(parameter);
}
}
},
batch: true,
pageSize: 10,
schema: {
data: function (d) {
return d.data;
},
total: function (d) {
return d.total;
}
},
serverPaging: true
}); $("#grid").kendoGrid({
dataSource: dataSource,
pageable: {
pageSizes: true,
buttonCount: 5,
messages: {
display: "显示{0}-{1}条,共{2}条",
empty: "没有数据",
page: "页",
of: "/ {0}",
itemsPerPage: "条/页",
first: "第一页",
previous: "前一页",
next: "下一页",
last: "最后一页",
refresh: "刷新"
}
},
columns: [{
field: "ProvinceID",
title: "省份ID",
width: 150
}, {
field: "ProvinceNo",
title: "省份编号"
}, {
field: "ProvinceName",
title: "省份名称"
}]
});
});
</script>
public ActionResult GetProvincePagedList(int page, int pageSize)
{
ctx.Configuration.ProxyCreationEnabled = false; return Json(new { data = ctx.Provinces.OrderBy(p => p.ProvinceID).Skip((page - 1) * pageSize).Take(pageSize), total = ctx.Provinces.Count() }, JsonRequestBehavior.AllowGet);
}
效果预览:
要点说明:
1>、dataSource中read的type一定要设置为post,不能为默认的get,否则服务端无法接收page及pageSize参数。
2>、dataSource中serverPaging需要设置为true,启动服务端分页。
KendoUI系列:Grid的更多相关文章
- [转]KendoUI系列:Grid
本文转自:http://www.cnblogs.com/libingql/p/3774879.html 1.基本使用 <div id="grid"></div&g ...
- kendoui treeview grid spreadsheet
treeview 傻子方式获取id <!DOCTYPE html> <html> <head> <title>API</title> < ...
- KendoUI系列:Window
1.基本使用 <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css") ...
- KendoUI系列:MultiSelect
1.基本使用 1>.创建Input <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common. ...
- KendoUI系列:DatePicker
1.基本使用 <link href="@Url.Content("~/C ontent/kendo/2014.1.318/kendo.common.min.css" ...
- KendoUI系列:DropDownList
1.基本使用 1>.创建Input <input id="dropDownList" /> <link href="@Url.Content(&q ...
- 使用kendoui对grid指定行变色
关键点在于绑定数据源后进行判断,可直接获取当前绑定对象的属性 dataBound: function () { dataView = this.dataSource.view(); ; i < ...
- 中文版kendoUI API — Grid(一)
1.altRowTemplate 类型:Function | String 说明:提供表格行的交替模板,默认grid表格为每一个数据元素提供一个tr 注意:模板中最外层的html元素必须是<tr ...
- KendoUI系列:TreeView
1.加载本地数据 <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css" ...
随机推荐
- [UCSD白板题] Number of Inversions
Problem Introduction An inversion of a sequence \(a_0,a_1,\cdots,a_{n-1}\) is a pair of indices \(0 ...
- Android最大可运行内存
int maxMemory = (int) Runtime.getRuntime().maxMemory();
- Drupal资源
以下是一些Drupal的常用资源. www.drupal.org:Drupal官网,拥有最全 www.acquia.com:Drupal奠基人Dries主导的专业网站,有著名的Aquia平台,功能类似 ...
- Oracle的update语句优化研究
最近研究sql优化,以下文章转自互联网: 1. 语法 单表:UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 如:update t_join_situation s ...
- 重量级Orchard模块发布 - 模块生成工具RaisingStudio.ModuleGenerator
可以从这里下载安装(http://gallery.orchardproject.net/List/Modules/Orchard.Module.RaisingStudio.ModuleGenerato ...
- android权限permission大全
1.Android.permission.WRITE_USER_DICTIONARY允许应用程序向用户词典中写入新词 2.android.permission.WRITE_SYNC_SETTINGS写 ...
- 在windows上安装ASP.NET 5(译文)
本文将介绍如何在windows上安装ASP.NET5,包括单独安装和通过Visual Studio 2015 安装. 本文包括: 通过Visual Studio安装ASP.NET 单独安装ASP.NE ...
- 细数.NET 中那些ORM框架 —— 谈谈这些天的收获之一
细数.NET 中那些ORM框架 —— 谈谈这些天的收获之一(转) ADO.NET Entity Framework ADO.NET Entity Framework 是微软以 ADO.N ...
- Jexus V5.8.0正式发布:跨平台的ASP.NET WEB服务器
Jexus Web Server V5.8.0 已于今日(12月10日)正式发布,下载地址:http://www.linuxdot.net/. Jexus v5.8.0有如下的更新: 1,为反向代理增 ...
- 如何基于RabbitMQ实现优先级队列
概述 由于种种原因,RabbitMQ到目前为止,官方还没有实现优先级队列,只实现了Consumer的优先级处理. 但是,迫于种种原因,应用层面上又需要优先级队列,因此需求来了:如何为RabbitMQ加 ...