easyui datagrid製作複雜表頭
阿新 • • 發佈:2019-01-04
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'},
]],
})
通過這樣的方法就可以實現一個複雜的表格。