KendoUi 学习笔记(二) Grid
Kendo.ui.Grid
Kendo Ui Grid控件，继承至Widget。
一、构造
allowCopy Boolen|Object (默认：false)
当他设置true，用户就可以选中行点击复制，可以复制进入excel和记事本。
设置Object可以设置高级Copy，比如复制后通过分隔符隔开。
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
selectable: "multiple cell",
allowCopy: true,
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
]
});
</script>
例子—
allowCopy.delimeter String|Object(默认："\t")
delimeter是同一行，项与项之间的分隔符。
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
selectable: "multiple cell",
allowCopy: {
delimeter: ",",
},
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
]
});
</script>
altRowTemplate String|Function
呈现行的模板。默认不同行之间通过<tr>
通过这个属性，可以自定义展示模板。支持kendo.template(html)和纯html。
例子：指定交互行模板通过Funtion
<div id="grid"></div>
<script id="alt-template" type="text/x-kendo-template">
<tr data-uid="#= uid #">
<td colspan="2">
<strong>#: name #</strong>
<strong>#: age #</strong>
</td>
</tr>
</script>
<script>
$("#grid").kendoGrid({
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
altRowTemplate: kendo.template($("#alt-template").html())
});
</script>
例子：指定交互行模板通过String
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ],
altRowTemplate: '<tr data-uid="#= uid #"><td colspan="2"><strong>#: name #</strong><strong>#: age #</strong></td></tr>'
});
</script>
autoBind Boolean（default：true）
当他设置成false，Grid在初始化的时候将不绑定，必须调用read()方法才能被绑定。
个人理解：这样就完全将数据和展示分离开。
<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
data: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
$("#grid").kendoGrid({
autoBind: false,
dataSource: dataSource
});
dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound
</script>
columnResizeHandleWidth Number（default：3）
定义每次句柄处理的宽度。让人更容易调整宽度。
存在疑问：未启用
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columnResizeHandleWidth: 6
});
</script>
columns Array
列配置模型。一个array对象或者string。javascript对象解释一个列配置。String指定绑定列名绑定的列。grid会根据列配置创建列。
dataSource Object|Array|kendo.data.DataSource
dataSource是用于展示table rows。一个javascript对象要符合source config配置的对象，也可以是一个javascript array或者一个已经存在的kendo,data.DataSource 实例。
当datasource 配置是一个javascript 对象或者一个kendo.data.DataSourece实例，使用它的value配合datasource 配置。
当datasource配置是一个kendo.data.DataSource 实例。
例子—指定Grid Columns 通过 string array
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: ["name", "age"], // two columns bound to the "name" and "age" fields
dataSource: [ { name: "Jane", age: 31 }, { name: "John", age: 33 }]
});
</script>
例子-指定grid列配置通过Object array
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
field: "name",// create a column bound to the "name" field
title: "Name" // set its title to "Name"
}, {
field: "age",// create a column bound to the "age" field
title: "Age" // set its title to "Age"
}],
dataSource: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }]
});
</script>
columnMenu Boolean | Object(default:false)
当设置成true，通过点击列投的图标Grid将显示列菜单。列菜单允许用户控制显示或者关闭列，过滤和排序（当过滤和排序被允许）。默认情况列菜单不被允许。
通过设置一个Javascript 对象来设置column menu的配置。
例子—启用Column Menu
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>
columnMenu的配置#Start-------------------------------------------------------------------------------------------------------------------------------------
columnMenu.columns Boolean(default:true)
当设置成true，column menu 允许用户选择列显示隐藏。默认column menu 允许列选择。
例子—不允许列选择
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
columns: false
},
sortable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
columnMenu.filterable Boolean(default:true)
当它设置成true，列菜单允许用户过滤grid。当grid的配置filterable。
columnMenu.filterable的属性一定要再grid的filterable为true的前提才有用。
例子—使得列过滤器无效
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
filterable: false
},
filterable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
columnMenu.sortable
当设置为true，允许用户通过grid列进行排序。默认情况下当grid的sortable为true时就可以设置。
例子—让column menu 排序不可用。
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
sortable: false
},
sortable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
columnMenu.message -Object
这个text message 显示在列菜单。使用自定义或本地，列菜单消息。
这个主要自定义列菜单的提示文字。
message是一个对象，里面包括columns,filter,sortAscending,sortDescending
例子—自定义列菜单消息
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
messages: {
columns: "Choose columns",
filter: "Apply filter",
sortAscending: "Sort (asc)",
sortDescending: "Sort (desc)"
}
},
sortable: true,
filterable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>
columnMenu.messages.columns String（默认：“Columns”） 默认值是根据语言包，如果是中文是"列"
这个代表列菜单中列控制的菜单显示文字。
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
messages: {
columns: "Choose columns"
}
},
dataSource: [
{ name: "Jane Doe", age: },
{ name: "John Doe", age: }
]
});
</script>
columnMenu.message.filter String（default:"Filter"） 使用中文语言包后为“过滤”
这个代表列菜单中过滤菜单项的菜单文字。
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
messages: {
filter: "Apply filter",
}
},
filterable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>
columnMenu.messages.sortAscending String（默认：“Sort Ascending”） 使用中文语言包后为“升序”
这个代表列菜单中升序菜单项的菜单文字。
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
messages: {
sortAscending: "Sort (asc)",
}
},
sortable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>
columnMenu.message.sortDescending String（默认：“Sort Descending”） 使用中文语言包后为“降序”
列菜单的降序菜单的显示文字。
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
messages: {
sortDescending: "Sort (desc)",
}
},
sortable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>
columnMenu.message.settings String（默认：“Column Setting”）
这个是菜单头部的显示文字（仅在移动模式下可用）。
mobile:'phone'模式下可用。
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
messages: {
settings: "Column Options",
}
},
mobile: "phone",
sortable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>
columnMenu.message.done String(default:“Done”)
菜单头部文字显示（仅在移动模式可用）
mobile:'phone'模式下可用。
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
messages: {
done: "Ok",
}
},
mobile: "phone",
sortable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>
columnMenu.messages.lock String（default：“Lock”）
列菜单锁定列菜单的显示文字。
存在问题：等把column配置中的locked和lockable两个配置完成以后，再回头来确定
columnMenu.messages.unlock String（默认：“Unlock”）
存在问题：等把column配置中的locked和lockable两个配置完成以后，再回头来确定
columnMenu的配置#End---------------------------------------------------------------------------------------------------------------------------------------
dataSource Object|Array|kendo.data.DataSource
数据源部件用于显示table rows。Javascript对象表示一个有效的数据源的配置，也可以是一个Javascript数组或者一个kendo.data.DataSource实例。
当dataSource配置是一个javascript 对象或者array 对象，这些都会被隐式的初始化成kendo.data.DataSource 实例。
当dataSource配置本身就是kendo.data.DataSource实例就直接使用，不会被初始化。
例子—javascript object的数据源
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
}
});
</script>
例子—javascript array的数据源
作者备注：给的例子与javascript object的数据源没有区别
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>
例子—已存在的kendo.data.DataSource对象
作者备注：
1、DataSource支持jsonp跨域
2、grid如果不配置column，会默认根据dataSource自动生成column配置。
<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
pageSize: 10
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true
});
</script>
detailTemplate String|Funtion
模板展示详情行。检查详情模板通过在线demo。
作者备注：
1、detailTemplate相当于可以将列展开展示详情。
注：deatilTemplate内容不能比主列宽，除非详细模板支持滚动。
例子—Function Template
<script id="detail-template" type="text/x-kendo-template">
<div>
Name: #: name #
</div>
<div>
Age: #: age #
</div>
</script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
detailTemplate: kendo.template($("#detail-template").html())
});
</script>
例子—指定string 详情模板
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
detailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>"
});
</script>
editable Boolean|Object（default:false）
当设置成true，用户可以编辑绑定的数据。默认是不允许编辑。
可以设置一个字符串（“inline”,"incell"或者“popup”）用于指定编辑模式。默认编辑模式“incell”。
incell：列单独编辑。
inline：行编辑，columns必须有"command:'edit'"
popup：弹出编辑框，columns必须有"command:'edit'"
可以设置一个javascript object 代表编辑配置。
“inline”和“popup”编辑模式由“edit”列命令触发。因此columns必须含有“edit”命令。
例子—可以编辑
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
editable: true
});
</script>
例子—弹出编辑
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ command: "edit" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
editable: "popup"
});
</script>
#editable 配置 start-----------------------------------------------------------------------------------------------------
editable.confirmation Boolean|String|Function（default：true）
当设置成true，用户点击“destroy”命令按钮的时候，弹出确认对话框。
String—能设置确定对话框的确认文字，比如“你确定删除吗？”。
Function—方法被调用，return "你确定删除吗？"，作为确认框的文字内容。
例子—确认对话框不可用
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
editable: {
confirmation: false
}
});
</script>
例子—设置删除按钮的确认框文字
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
editable: {
confirmation: "Are you sure that you want to delete this record?"
}
});
</script>
例子—通过方法返回确认框文字
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
editable: {
confirmation: function(e) {
return "Are you sure that you want to delete record for " + e.name + "?";
}
}
});
</script>
editable.cancelDelete String（默认：“Cancel”），如果引用了中文语言包 为“取消”
当confirmation被启用当用户点击“删除”，取消按钮的文字，当grid的mode:'phone'才有效。
例子—修改取消按钮，手机模式
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
mobile: "phone",
editable: {
confirmation: true,
cancelDelete: "No"
}
});
</script>
editable.confirmDelete String（default：‘Delete’）
当confirmation被启用当用户点击“删除”，确认删除按钮的文字，当grid的mode:'phone'才有效。
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
mobile: "phone",
editable: {
confirmation: true,
confirmDelete: "Yes"
}
});
</script>
editable.createAt String（default:'top'）
新增一条数据插入的位置。top第一行；bottom最后一行。默认是在第一行。
例子—Grid最后插入一条数据。
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
editable: {
createAt: "bottom"
},
toolbar: ["create"]
});
</script>
editable.mode String(default:‘incell’)
编辑模式。支持编辑模式"incell","inline"和“popup”。
incell:单元格内编辑。
inline:行内编辑。
popup:弹窗
“inline”和“popup”编辑模式通过column 命令 “edit”，因此一定需要 “edit” column.
例子——"inline"编辑模式
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ command: "edit" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: { id: "id" }
}
},
editable: {
mode: "inline"
}
});
</script>
editable.template String|Function
弹出编辑的展示模板
#editable 配置 end-----------------------------------------------------------------------------------------------------
KendoUi 学习笔记(二) Grid的更多相关文章
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- amazeui学习笔记二（进阶开发5）--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
- amazeui学习笔记二（进阶开发1）--项目结构structure
amazeui学习笔记二(进阶开发1)--项目结构structure 一.总结 1.项目结构:是说的amazeui在github上面的项目结构,二次开发amazeui用 二.项目结构structure ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
- Java IO学习笔记二
Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
- 《SQL必知必会》学习笔记二)
<SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...
随机推荐
- Ant Design of React 框架使用总结1
一. 为什么要用UI 框架 统一了样式交互动画 . Ui框架会对样式,交互动画进行统一,保证了系统风格完整统一,不像拼凑起来的. 兼容性 ,不是去兼容IE 6 7 8那些低版本浏览器,而是对主流的标 ...
- 如何系统地自学 Python？
最近开始系统的学习Python,以及整理的一些资料.github记录着个人自学 Python 的过程,持续更新.欢迎大家一起来完善这个自学Python学习的项目,给后来者一个参考的学习过程.githu ...
- 在Mac os 10.11 下编译Berkeley caffe
安装各种补丁和组件,缺啥装啥. python 采用 2.7.13 最新版. 安装工具 homebrew , pip 很繁琐,但是没难度. 由于本人macbook pro不支持CUDA,所以不用安装. ...
- flutter -------- ListView的使用
学习了Flutter,来分享一下学习的一些常用的知识,先来说说ListView 案例效果: ListView是一个类似列的widget,它的内容对于其渲染框太长时会自动提供滚动. ListView 摘 ...
- GlusterFS分布式文件系统的使用
glusterfs是一款开源的分布式文件系统. 它具备高扩展.高可用及高性能等特性,由于其无元数据服务器的设计,使其真正实现了线性的扩展能力,使存储总容量可轻松达到PB级别,支持数千客户端并发访问. ...
- bilinear pooling
一.双线性汇合的计算过程: 第一步,计算Gram 矩阵: 对于一组H×W×D的feature maps,$\boldsymbol{x}_{i} \in \mathbb{R}^{D}$是图像的深度描述, ...
- 『Python』为什么调用函数会令引用计数+2
一.问题描述 Python中的垃圾回收是以引用计数为主,分代收集为辅,引用计数的缺陷是循环引用的问题.在Python中,如果一个对象的引用数为0,Python虚拟机就会回收这个对象的内存. sys.g ...
- linux-基础命令篇-02
基本命令:--LS 关于显示的颜色含义: 白色:表示普通文件 蓝色:表示目录 绿色:表示可执行文件 红色:表示压缩文件 浅蓝色:链接文件 红色闪烁:表示链接的文件有问题 黄色:表示设备文件 灰色:表示 ...
- ReactNative快速开发App一步到位
http://www.ifenxiang.net/thread-626-1-1.html
- 基于mykernel的时间片轮转调度
学号: 363 原创作品,转载请注明出处.本实验资源来源: https://github.com/mengning/linuxkernel/ 一. 实验环境配置 本次实验在实验楼完成: 在实验楼的终端 ...