码迷,mamicode.com
首页 > 其他好文 > 详细

EasyUI-Datagrid二维表格:多表头

时间:2016-04-29 19:11:52      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:

       


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


技术分享

       由于是从零开始,没有参考,我就想用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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!