easyUI表格多表头实现
项目中要实现表格多表头,结合网上的例子自己实现了一个,包含frozenColumns情况。
一,通过标签创建
效果:
<table id="schoolGrid" class="easyui-datagrid" style="width:100%;height:100%;padding:5px;" url="data/datagrid_data.json" singleSelect="true" rownumbers="true"> <thead> <tr> <th rowspan="3" colspan="4" align="center" field="QKQQRY" width="320">缺课缺勤人员</th> <th colspan="8" align="center" field="QKQQQKTJ" width="870">缺课缺勤情况统计</th> </tr> <tr> <th colspan="2" field="BGZT" align="center" width="120" align="center">报告状态</th> <th colspan="2" field="QKTS" align="center" width="120" align="center">缺课天数</th> <th colspan="4" field="QKQQYY" align="center" width="240">缺课缺勤原因</th> </tr> <tr> <th rowspan="2" field="SRQK" width="80" align="center">首日缺课</th> <th rowspan="2" field="LXQK" width="80" align="center">连续缺课</th> <th rowspan="2" field="SW" width="80">上午</th> <th rowspan="2" field="XW" width="80" align="center">下午</th> <th colspan="3" field="YZZ" width="80" align="center">因症状</th> <th field="YZZ2" width="80" align="center">原症状</th> </tr> <tr> <th field="XM" width="80" align="center">姓名</th> <th field="XB" width="80" align="center">性别</th> <th field="NL" width="80">年龄</th> <th field="NJBJ" width="120" align="center">年级班级(部门)</th> <th field="FR" width="80" align="center">发热</th> <th field="FRDS" width="80">发热度数</th> <th field="ZYZZJMS" width="240" align="center">主要症状及描述</th> <th field="CRB" width="120" align="center">传染病</th> </tr> </thead> </table>
二,使用Javascript创建
效果同上;
html:
<table id="schoolGrid" style="margin:10px;"></table>
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'} ]] });
如果你真心觉得文章写得不错,而且对你有所帮助,那就不妨小小打赏一下吧,如果囊中羞涩,不妨帮忙“推荐"一下,您的“推荐”和”打赏“将是我最大的写作动力!
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接.
![qq群](https://files-cdn.cnblogs.com/files/hoaprox/qqqun.bmp)
![微信](https://files.cnblogs.com/files/hoaprox/zsm.bmp)