codecamp

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: '起飞时间'
        }]
    }]
}
travelzen.js组件之【文件上传】
travelzen.js组件之【表单验证】
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }