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