travelzen.js組件之【表格】

表格： travelzen.grid

用于實(shí)例一個(gè)表格，通過(guò)傳入?yún)?shù)決定表格的復(fù)雜度?？蓜?chuàng)建僅供展示的極簡(jiǎn)表格，或具備增刪改查、分頁(yè)、分組顯示等功能的復(fù)雜表格。

實(shí)例： 給表格容器設(shè)置一個(gè)選擇器，最好是class類名。調(diào)用travelzen.grid方法，實(shí)例一個(gè)表格。

• 必選參數(shù)trigger：表格容器選擇器，如下面html內(nèi)容中的".gridDemo"
• 可選參數(shù)data：本地表格列數(shù)據(jù)，格式參考下文第2條
• 可選參數(shù)url：遠(yuǎn)程數(shù)據(jù)接口，格式參考下文第3條
• 可選參數(shù)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']
        }]
    }
}

綁定遠(yuǎn)程數(shù)據(jù)，可增刪改查、分頁(yè)、分組

travelzen.grid({
    trigger: '.gridDemo',
    url: 'http://travelzen.com'
})

多級(jí)表頭

{
    columns: [{
        field: 'personalInfo',
        title: '個(gè)人信息',
        columns: [{
            field: 'name',
            title: '姓名'
        },{
            field: 'age',
            title: '年齡'
        }]
    },{
        field: 'flightInfo',
        title: '航班信息',
        columns: [{
            field: 'flightNumber',
            title: '航班號(hào)'
        },{
            field: 'timeTakeOff',
            title: '起飛時(shí)間'
        }]
    }]
}