easyui框架实现datagrid多表头设置

多表头

通常遇到的都是单表头，也就是表头只有一行，如下图所示：

但在实际中我们遇到的不仅仅是单表头，可能遇到多表头，也就是要进行单元格的行和列进行合并，如下图所示：

多表头代码设置

多表头设置代码如下

<div style="width:100%;" data-options="region:'center',title:'入职培训信息',iconCls:'icon-ok'"><table id="ddg1" class="easyui-datagrid"data-options="url:'/entrytrain_info',method:'get',border:false,singleSelect:true,fit:true,collapsible:false,pagination:true,pageSize:25,pageList:[25,15,10],fitColumns:true"><thead><tr><th data-options="rowspan:2,field:'tno',align:'center',width:'7%'">工号</th><th data-options="rowspan:2,field:'tname',align:'center'">姓名</th><th data-options="rowspan:2,field:'gender',align:'center',width:'4%'">性别</th><th data-options="rowspan:2,field:'age',align:'center'">年龄</th><th data-options="rowspan:2,field:'work_unit',align:'center'">工作单位</th><th data-options="colspan:3,align:'center'">校本文化</th><th data-options="colspan:3,align:'center'">素质拓展</th><th data-options="colspan:3,align:'center'">师德师风</th><th data-options="colspan:3,align:'center'">教学实务理论</th><th data-options="colspan:3,align:'center'">教学实务实训</th><th data-options="colspan:3,align:'center'">高校教师基础教育理论培训</th><th data-options="colspan:4,align:'center'">资格考试理论成绩</th><th data-options="rowspan:2,field:'professionalskill_grade',align:'center'">专业技能成绩</th></tr><tr><th data-options="field:'campus_start',align:'center',width:'7%'">开始时间</th><th data-options="field:'campus_end',align:'center',width:'7%'">结束时间</th><th data-options="field:'campus_grade',align:'center',width:'4%'">成绩</th><th data-options="field:'quality_start',align:'center',width:'7%'">开始时间</th><th data-options="field:'quality_end',align:'center',width:'7%'">结束时间</th><th data-options="field:'quality_grade',align:'center',width:'4%'">成绩</th><th data-options="field:'morality_start',align:'center',width:'7%'">开始时间</th><th data-options="field:'morality_end',align:'center',width:'7%'">结束时间</th><th data-options="field:'morality_grade',align:'center',width:'4%'">成绩</th><th data-options="field:'teachtheory_start',align:'center',width:'7%'">开始时间</th><th data-options="field:'teachtheory_end',align:'center',width:'7%'">结束时间</th><th data-options="field:'teachtheory_grade',align:'center',width:'4%'">成绩</th><th data-options="field:'teachpractice_start',align:'center',width:'7%'">开始时间</th><th data-options="field:'teachpractice_end',align:'center',width:'7%'">结束时间</th><th data-options="field:'teachpractice_grade',align:'center',width:'4%'">成绩</th><th data-options="field:'educationtheory_start',align:'center',width:'7%'">开始时间</th><th data-options="field:'educationtheory_end',align:'center',width:'7%'">结束时间</th><th data-options="field:'educationtheory_grade',align:'center',width:'4%'">成绩</th><th data-options="field:'educationpolicy_grade',align:'center'">教育政策法规</th><th data-options="field:'educationmorality_grade',align:'center'">教师职业道德</th><th data-options="field:'higheducation_grade',align:'center'">高等教育学</th><th data-options="field:'educationpsychology_grade',align:'center'">教育心理学</th></tr></thead></table></div>

easyui框架实现datagrid多表头设置相关推荐

EasyUI DataGrid 多级表头设置
使用EasyUI做一个报表统计,需要合并表头为多级表头,核心代码如下: $('#dg').datagrid({ url:'datagrid_data.action', fit : true,fitCo ...
EasyUI多级表头设置
EasyUI是一款比较容易上手的前端框架下面说一下它的多级表头设置: //数据网$("#tt").datagrid({url:"${ctx}/UKeyManage/ge ...
基于asp.net + easyui框架，一步步学习easyui-datagrid——界面（一）
从这篇博客,我会一步步的为大家讲解,easyui框架中最常用的一个控件datagrid.在使用easyui框架时,datagrid是使用最多的控件,它不仅好用,关键是实用. 我为大家建立一个博客更新的 ...
【WPF】DataGrid多表头的样式设计
需求在使用WPF开发时,使用DataGrid列表显示数据时,有些字段可以进行分组显示,用于更好的表达它们之间存在的某种关系,因此就考虑到要对DataGrid的表头进行扩展,可以显示多行表头,让这些有 ...
基于asp.net + easyui框架，js实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载...
2019独角兽企业重金招聘Python工程师标准>>> 最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多.在上传图片之前验证图片的格式,并同时实现预 ...
jQuery EasyUI教程之datagrid应用-1
一.利用jQuery EasyUI的DataGrid创建CRUD应用对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...
小师妹问 easyUI mergeCells 行合并后表头和内容对不齐
公司来了一个做easyUI的妹子,恰好那妹子是和我一个学校的,有一天下班妹子在超时买东西正好巧遇,然后妹子就问了问题,随便说手机卡需要我帮忙刷机,然后就问手机买了多久, 多少钱,刚买的时候好用不,然后 ...
js高级jQuery框架easyUI框架
js高级与easyUI框架一.JavaScript高级 1.ajax请求 ajax:局部刷新技术使用场景:分页数据的刷新,二级联动,验证用户名是否重复,地图局部刷新核心对象: JavaScrip ...
easyui框架下table，每行实现上下移动
easyui框架的控件功能做得很好,用得最多的是table,很多时候我们需要对每行的数据进行上下移动的排序,这里主要通过js函数来实现,请往下看. //上移 function danganconf_s ...

easyui框架实现datagrid多表头设置

多表头

多表头代码设置

easyui框架实现datagrid多表头设置相关推荐

最新文章

热门文章