easyui datagrid制作复杂表头

datagrid制作复杂的表头,这个功能主要是使用到datagrid中的columns属性,与表格中的rowSpan 与colspan属性的。
具体代码如下:

    $('#datatable').datagrid({
            width:'100%',
            toolbar:'#toolbar',
            pagination:'true',
            striped:'true',
            singleSelect:'true',
            fitColumns:'true',
            columns: [[{title: '时间', field: 'Time',width:'15%',rowspan:'2'},
                {title: '车牌号码', field: 'Plate_No',width:'15%',rowspan:'2'},
                {title: '速度', field: 'speed',width:'10%',rowspan:'2'},
                {title: '累计里程(Km)', field: 'mile_count',width:'10%',rowspan:'2'},
                {title: '左前轮',width:'20%', colspan:2},
                {title: '右前轮',width:'20%',colspan:2},
                {title: '左后内侧',width:'20%',colspan:2},
                {title: '左后外侧',width:'20%',colspan:2},
                {title: '右后内侧',width:'20%',colspan:2},
                {title: '右后外侧',width:'20%',colspan:2},
                ],
                [
                {title:'压力',width:'5%',field:'pressure1'},
                {title:'温度',width:'5%',field:'temp1'},
                {title:'压力',width:'5%',field:'pressure2'},
                {title:'温度',width:'5%',field:'temp2'},
                {title:'压力',width:'5%',field:'pressure3'},
                {title:'温度',width:'5%',field:'temp3'},
                {title:'压力',width:'5%',field:'pressure4'},
                {title:'温度',width:'5%',field:'temp4'},
                {title:'压力',width:'5%',field:'pressure5'},
                {title:'温度',width:'5%',field:'temp5'},
                {title:'压力',width:'5%',field:'pressure6'},
                {title:'温度',width:'5%',field:'temp6'},
               ]],

        })

通过这样的方法就可以实现一个复杂的表格。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值