travelzen.js组件之【表格】

表格： 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: '起飞时间'
        }]
    }]
}