easyui datagrid制作复杂表头

最新推荐文章于 2022-02-16 09:52:44 发布

前端叶孤城

最新推荐文章于 2022-02-16 09:52:44 发布

阅读量1.5k

点赞数

分类专栏： jquery Easyui 文章标签： easyui

本文为博主原创文章，转载需注明来源, 文章不足,欢迎留言指正

本文链接：https://blog.csdn.net/fsxxzq521/article/details/78693071

版权

jquery Easyui 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

        })