travelzen.js组件之【表格】
2018-07-19 09:23 更新
表格: travelzen.grid
用于实例一个表格,通过传入参数决定表格的复杂度。可创建仅供展示的极简表格,或具备增删改查、分页、分组显示等功能的复杂表格。
实例: 给表格容器设置一个选择器,最好是class类名。调用travelzen.grid方法,实例一个表格。
- 必选参数trigger:表格容器选择器,如下面html内容中的".gridDemo"
- 可选参数data:本地表格列数据,格式参考下文第2条
- 可选参数url:远程数据接口,格式参考下文第3条
- 可选参数initSettings:自定义的一些Kendo UI的表格样式
1.html
<div class="gridDemo">
</div>
2.javascript
var data = {
columns: [{
field: 'name',
title: '姓名'
},{
field: 'age',
title: '年龄'
}],
dataSource: {
data: [{
'id': 1,
'name': '张三',
'age': 34
},{
'id': 2,
'name': '李四',
'age': 26
}]
}
};
$(function(){
travelzen.grid({
trigger: '.gridDemo',
data: data
})
})
4.json
{
columns:[{
field:'name',
title:'姓名'
},{
field:'age',
title:'年龄'
}],
dataSource:{
data:[{
name:['张三','李四','王五','赵六'],
age:['34','26','19','37']
}]
}
}
绑定远程数据,可增删改查、分页、分组
travelzen.grid({
trigger: '.gridDemo',
url: 'http://travelzen.com'
})
多级表头
{
columns: [{
field: 'personalInfo',
title: '个人信息',
columns: [{
field: 'name',
title: '姓名'
},{
field: 'age',
title: '年龄'
}]
},{
field: 'flightInfo',
title: '航班信息',
columns: [{
field: 'flightNumber',
title: '航班号'
},{
field: 'timeTakeOff',
title: '起飞时间'
}]
}]
}
以上内容是否对您有帮助:
更多建议: