travelzen.js组件之【表格】

由 刘朵朵 创建, 最后一次修改 2018-06-25

表格: 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: '起飞时间'
        }]
    }]
}
以上内容是否对您有帮助:
laravel郭孟涛
二维码
建议反馈
二维码