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'},
]],
})
通过这样的方法就可以实现一个复杂的表格。