1. 程式人生 > >easyui datagrid製作複雜表頭

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

通過這樣的方法就可以實現一個複雜的表格。