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'}
]]
});
easyUI表格多表头实现的更多相关文章
- datagrid-detailview.js easyui表格嵌套
datagrid-detailview.js easyui表格嵌套
- 关于easyui表格右侧多出来的那一列。
关于easyui表格右侧多出来的那一列,如下图,是给滚动条预留的位置,easyui表格默认就有的. 如果想要不显示:打开jQuery.easyui.min.js文件,找到wrap.width();所在 ...
- jQuery制作多表格固定表头、切换表头的特效
做了好几天的固定表头特效,总算是搞定了.先说明一下基本功能:我们在一个网页上浏览很多份表格数据的时候,肯定会碰到很多分不清表头,也分不清表 格是哪个的情况,这个时候我们就希望能有一种功能,就是我们再下 ...
- JQuery Easyui/TopJUI 多表头创建
JQuery Easyui/TopJUI 多表头创建 废话不多说,直接贴上代码. html <div data-toggle="topjui-layout" data-opt ...
- 修改easyui中datagrid表头和数据不能分开对齐的BUG。
easyui的datagrid中表头和列只能同时全部向左对齐,全部向右对齐或者居中对齐. 有时候有需求,数据向左或向右,表头居中对齐. 在不修改源码的情况下.下面的代码可以实现该功能. 把下面代码放在 ...
- easyui datagrid 多表头设置
最近在做二维报表,要求报表的表头自定义.在网上找了好久二维报表的插件,一直找不到合适的.后来就用easyui 中的datagrid替代了一下. 根据实际需求,统计的信息可能不是一个模块中的字段信息,所 ...
- easyui表格自动换行
表格内容自动换行可以通过设计表格属性 nowrap:false来实现,默认值为true: 但是easyui并未提供,表头自动换行的解决方案,因为一般我们的数据表格列名都是固定的,想换行的话可以通过& ...
- JQuery EasyUI datagrid 复杂表头处理
下面是我项目中和网上收集的EasyUI的表头处理的,合适的拿去用吧. 例子1: $('#day_health').datagrid({ url: "sqb_b ...
- easyUI 表格
1.创建 <table id ="ID"></table> 2.属性 dategrid: columns 列的定义的数组 URl:访问远程数据的数组 [“t ...
随机推荐
- 物联网架构成长之路(11)-Redis缓存主从复制
1. 说明 在我的物联网平台框架框架中,会用到Redis这个中间件.作为EMQ权限认证的缓存.https://www.cnblogs.com/think-in-java/p/5123884.html ...
- 解决python-memcache报错：“Unknown flags on get: 20”
[本文出自天外归云的博客园] 在使用python的pytho-memcache库时出现了一个问题,在调用get方法获取键值的时候报错:Unknown flags on get: 20 在网上查了,发现 ...
- 施工测量中Cad一些非常有用的插件
经常会遇到坐标在cad中批量展点.从cad中批量保存坐标点.导入cad中的坐标怎么才能有点号,怎么快速标注cad里的坐标点··· ··· 这一切都是可以程序化的,cad是可以二次开发的,我经常用易语言 ...
- 随机获取一个集合（List, Set，Map）中的元素<转>
import java.util.HashSet; import java.util.List; import java.util.Map; import java.util.Random; impo ...
- vs2013 error LNK2005 已经在***.obj中定义
错误解决办法: 方法一: 中文 项目--属性 ---连接器---输入 附加依赖项 空格Nafxcwd.lib Libcmtd.lib ...
- redis Sentinel部署
sentinel 系统用于管理多个 Redis 服务器(instance) 执行以下三个任务: 监控(Monitoring): Sentinel 会不断地检查你的主服务器和从服务器是否运作正常. 提醒 ...
- R语言三元相图的做法
通常情况下,对于三维数据,我们会用三维图表来展示,想要从三维图表上观察出一定的规律,需要一定的空间想象力: 而三元相图,其实就是用二维平面的1个等边三角形来表征三维数据,三角形的每一条边对应1个维度, ...
- Scala学习笔记——断言和单元测试
1.断言 assert(conditon)将在条件不成立的时候,抛出assertionError assert(conditon,explanation)讲在条件不成立的时候,抛出explanatio ...
- duilib进阶教程 -- 图片和文字的位置调整 (5)
已经有8个晚上没写教程啦,因为之后遇到了一些问题,主要是TreeView控件的问题,这个问题搞了几个晚上,然后还需要调试代码才能知道它的用法,虽然能够调试出来,但毕竟没什么含金量,只是重复劳动而已,相 ...
- SpringBoot thymeleaf模板页面没提示，SpringBoot thymeleaf模板插件安装
SpringBoot thymeleaf模板插件安装 SpringBoot thymeleaf模板Html页面没提示 SpringBoot thymeleaf模板页面没提示 SpringBoot t ...