jQuery EasyUI 合并表头单元格

最新推荐文章于 2023-10-14 15:17:11 发布

墨桐

最新推荐文章于 2023-10-14 15:17:11 发布

阅读量8.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： jQuery EasyUI

本文链接：https://blog.youkuaiyun.com/c_vincente/article/details/38683543

js 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用jQuery EasyUI库来实现表格的表头单元格合并功能，通过实例展示具体步骤，帮助开发者创建更加复杂的数据显示布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <div region="center" split="true"><%--列表--%>
  	 <table id="gridTable" class="easyui-datagrid" title="外包项目风险检查统计表">
		<thead>
			<tr>
				<th data-options="field:'DEPT_CODE',width:180,align:'center'" rowspan="2">分子公司</th>
				<th data-options="field:'PROJECT_NAME',width:200,align:'center'" rowspan="2">项目</th>
				<th colspan="4">风险检查次数</th>
				<th colspan="4">汇报风险个数</th>
			</tr>
			<tr>
				<th data-options="field:'CHECKTYPE1',width:100,align:'right'">现场检查</th>
				<th data-options="field:'CHECKTYPE2',width:100,align:'right'">调阅监控</th>
				<th data-options="field:'CHECKTYPE3',width:100,align:'right'">查阅表单</th>
				<th data-options="field:'CHECKTOTAL1',width:100,align:'right'">总次数</th>
				
				<th data-options="field:'CHECKTYPE4',width:100,align:'right'">现场检查</th>
				<th data-options="field:'CHECKTYPE5',width:100,align:'right'">调阅监控</th>
				<th data-options="field:'CHECKTYPE6',width:100,align:'right'">查阅表单</th>
				<th data-options="field:'CHECKTOTAL2',width:100,align:'right'">总次数</th>
			</tr>

		</thead>
	</table>
  </div>

	$(function(){

		$('#gridTable').datagrid({ 
	        title:'测试', 
	        //iconCls:'icon-edit',//图标 
	        //width: 700, 
	        //height: 'auto', 
	        nowrap: false, 
	        striped: true, //行条纹
	        border: true, 
	        //collapsible:false,//是否可折叠的 
	        fit: true,//自动大小 
	       // url:'',
	        //sortName: 'code', 
	        //sortOrder: 'desc', 
	        //remoteSort:false,  
	        //idField:'fldId', 
			pageSize:10,          //每页的数据量
    		pageList:[10,20,30], //每页显示数量选择项
	        singleSelect:false,//是否单选 
	        pagination:true,//分页控件 
	        rownumbers:true,//行号 
	        //frozenColumns:[[ 
	           // {field:'ck',checkbox:true} 
	       // ]], 
	        toolbar: [{ 
	            text: '导出', 
	            iconCls: 'icon-excel', 
	            handler: function() { 
	        		$('#searchForm').submit();
	            } 
	        }], 
	    });  

	});

效果：