EasyUI-Datagrid二维表格：多表头

标签：

         人力资源管理有个做二维表格的需求，客户的需求是这样的，如图：

       由于是从零开始，没有参考，我就想用easyui 做一下。分析需求，其实难点就三个：1、是将上表头的部分单元格合并。2、是在左侧显示标题。3、是页内单元格可以编辑。

       对于easyui来说，单元格合并比较简单，写table时的核心的代码就两句：rowspan 和colspan。其中，rowspan是合并上下，colspan是合并左右。

<span style="font-family:Verdana;font-size:18px;"><table class="easyui-datagrid" style="width: auto; height: auto;" title="企业经营管理人才类别情况统计表2" data-options="url:'/EnterpriseManagement2/FillData'",fitColumns:true,singleSelect:true,pageSize:10" sortname="CourseId" sortorder="asc" rownumbers="true" pagination="true">
		<thead>           	
			<tr>
				<th  rowspan="2">项目</th>
				<th  rowspan="2">合计</th>
     			        <th  rowspan="2">女士</th>
				<th colspan="5">学历</th>
                                <th colspan="6">年龄</th>
				<th rowspan="2">自主创业</th>
                                <th  rowspan="2">再就业人数</th>
				<th  rowspan="2">拥有专利人数</th>
                                <th  rowspan="2">拥有执业资格人数</th>			
			</tr>
            <tr>
				<th >研究生</th>
				<th >大学本科</th>
				<th >大学专科</th>
				<th >中专</th>
				<th >高中及以下</th>
                                <th >35岁以下</th>
				<th >36-40岁</th>
				<th >41-45岁</th>
				<th >46-50岁</th>
				<th >51-54岁</th>
				<th >55岁以上</th>
			</tr>
			<tr>
				<th data-options="field:'sumID',width:137,align:'center'">甲</th>
				<th data-options="field:'one',width:70,align:'center'">1</th>
				<th data-options="field:'two',width:70,align:'center'">2</th>
				<th data-options="field:'three',width:70,align:'center'">3</th>
				<th data-options="field:'four',width:70,align:'center'">4</th>
				<th data-options="field:'five',width:70,align:'center'">5</th>
				<th data-options="field:'six',width:70,align:'center'">6</th>
				<th data-options="field:'seven',width:70,align:'center'">7</th>
                                <th data-options="field:'eight',width:70,align:'center'">8</th>
				<th data-options="field:'night',width:70,align:'center'">9</th>
				<th data-options="field:'ten',width:70,align:'center'">10</th>
				<th data-options="field:'eleven',width:70,align:'center'">11</th>
				<th data-options="field:'twelve',width:70,align:'center'">12</th>
				<th data-options="field:'thirteen',width:70,align:'center'">13</th>
				<th data-options="field:'fourteen',width:70,align:'center'">14</th>
				<th data-options="field:'fifteen',width:70,align:'center'">15</th>
                                <th data-options="field:'sixteen',width:80,align:'center'">16</th>
				<th data-options="field:'seventeen',width:110,align:'center'">17</th>
			</tr>          
		</thead> 
	</table></span>

       对于左侧显示我实在是想不出什么好办法了，就取了巧，在json 赋值时，实例化了19个viewmodel,把它的首字段写成需要显示的标题，然后把它转成json 赋值给table。我知道这个方法不可取，但是我想了好久才想到这个办法，所以就展示下样图，就不贴代码了，纪念下。

       对于单元格被编辑，下次再说。

效果：

EasyUI-Datagrid二维表格：多表头

标签：

原文地址：http://blog.csdn.net/mengdonghui123456/article/details/51232541