easyui datagrid制作复杂表头

版权声明:本文为博主原创文章,转载需注明来源 https://blog.csdn.net/fsxxzq521/article/details/78693071

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'},
               ]],

        })

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

猜你喜欢

转载自blog.csdn.net/fsxxzq521/article/details/78693071