项目中要实现表格多表头,结合网上的例子自己实现了一个,包含frozenColumns情况。
一,通过标签创建
效果:
缺课缺勤人员 | 缺课缺勤情况统计 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
报告状态 | 缺课天数 | 缺课缺勤原因 | |||||||||
首日缺课 | 连续缺课 | 上午 | 下午 | 因症状 | 原症状 | ||||||
姓名 | 性别 | 年龄 | 年级班级(部门) | 发热 | 发热度数 | 主要症状及描述 | 传染病 |
二,使用Javascript创建
效果同上;
html:
js:
$('#schoolGrid').datagrid({ fit:true, striped:true, collapsible:true, method:'get', url:'', fitColumns:false, remoteSort:false, pagination:true, rownumbers:false, showFooter:false, singleSelect:true, data:[ { "XM":"马菲菲","XB":"女","NL":18,"NJBJ":"一年级", "SRQK":"无","LXQK":"无","SW1":"是","XW":"否", "FR":"是","FRDS":"36.50","ZYZZJMS":"头疼脑热心跳加速","CRB":"无"} ], columns:[[ {field:'QKQQRY',rowspan:3,colspan:4,title:'缺课缺勤人员',width:420,align:'center'}, {field:'QKQQQKTJ',colspan:8,title:'缺课缺勤情况统计',width:870,align:'center'} ],[ {field:'BGZT',colspan:2,title:'报告状态',width:120,align:'center'}, {field:'QKTS',colspan:2,title:'缺课天数',width:120,align:'center'}, {field:'QKQQYY',colspan:4,title:'缺课缺勤原因',width:240,align:'center'} ],[ {field:'SRQK',rowspan:2,title:'首日缺课',width:80,align:'center'}, {field:'LXQK',rowspan:2,title:'连续缺课',width:80,align:'center'}, {field:'SW1',rowspan:2,title:'上午',width:80,align:'center'}, {field:'XW',rowspan:2,title:'下午',width:80,align:'center'}, {field:'YZZ',colspan:3,title:'因症状',width:80,align:'center'}, {field:'YZZ2',title:'原症状',width:80,align:'center'} ],[ {field:'XM',title:'姓名',width:100,align:'center'}, {field:'XB',title:'性别',width:80,align:'center'}, {field:'NL',title:'年龄',width:80,align:'center'}, {field:'NJBJ',title:'年级班级(部门)',width:140,align:'center'}, {field:'FR',title:'发热',width:80,align:'center'}, {field:'FRDS',title:'发热度数',width:80,align:'center'}, {field:'ZYZZJMS',title:'主要症状及描述',width:340,align:'center'}, {field:'CRB',title:'传染病',width:140,align:'center'} ]] });
附:
有固定列效果:
js:
$('#schoolGrid').datagrid({ fit:true, striped:true, collapsible:true, method:'get', url:'', fitColumns:false, remoteSort:false, pagination:true, rownumbers:false, showFooter:false, singleSelect:true, data:[ { "XM":"马菲菲","XB":"女","NL":18,"NJBJ":"一年级", "SRQK":"无","LXQK":"无","SW1":"是","XW":"否", "FR":"是","FRDS":"36.50","ZYZZJMS":"头疼脑热心跳加速","CRB":"无"} ], frozenColumns:[[ {field:'QKQQRY',rowspan:3,colspan:4,title:'缺课缺勤人员',width:420,align:'center'} ],[ ],[ ],[ {field:'XM',title:'姓名',width:100,align:'center'}, {field:'XB',title:'性别',width:80,align:'center'}, {field:'NL',title:'年龄',width:80,align:'center'}, {field:'NJBJ',title:'年级班级(部门)',width:140,align:'center'} ]], columns:[[ {field:'QKQQQKTJ',colspan:8,title:'缺课缺勤情况统计',width:870,align:'center'} ],[ {field:'BGZT',colspan:2,title:'报告状态',width:120,align:'center'}, {field:'QKTS',colspan:2,title:'缺课天数',width:120,align:'center'}, {field:'QKQQYY',colspan:4,title:'缺课缺勤原因',width:240,align:'center'} ],[ {field:'SRQK',rowspan:2,title:'首日缺课',width:80,align:'center'}, {field:'LXQK',rowspan:2,title:'连续缺课',width:80,align:'center'}, {field:'SW1',rowspan:2,title:'上午',width:80,align:'center'}, {field:'XW',rowspan:2,title:'下午',width:80,align:'center'}, {field:'YZZ',colspan:3,title:'因症状',width:80,align:'center'}, {field:'YZZ2',title:'原症状',width:80,align:'center'} ],[ {field:'FR',title:'发热',width:80,align:'center'}, {field:'FRDS',title:'发热度数',width:80,align:'center'}, {field:'ZYZZJMS',title:'主要症状及描述',width:340,align:'center'}, {field:'CRB',title:'传染病',width:140,align:'center'} ]] });