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