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 ...
随机推荐
- GSSAPIAuthentication=no
GSSAPI ( Generic Security Services Application Programming Interface) 是一套类似Kerberos 5的通用网络安全系统接口.该接口 ...
- linux每日命令(16)：head命令
head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头或结尾某个数量的文字区块,head 用来显示档案的开头至标准输出中,而 tail 想当然尔就是看档案的结尾. 一．命令格式: hea ...
- 测试覆盖率工具：EclEmma
测试覆盖率工具:EclEmma 2016-08-26 目录 1 测试覆盖率实现技术2 EclEmma介绍3 EclEmma测试覆盖率指标4 EclEmma安装5 示例项目介绍 5.1 创建项目 5 ...
- Java多线程系列——信号量：Semaphore
简介 信号量为多线程协作提供了更为强大的控制方法.也可以说,信号量是对锁的扩展.无论是内部锁 synchronized 还是重入锁 ReentrantLock,一次都只允许一个线程访问一个资源,而信号 ...
- Excel中substitute替换函数的使用方法
问题现象:在Excel中,对几千条数据按照时间顺序排序,但总是有部分数据不参与排序,单纯用单元格调整不起任何作用. 解决办法: 数据排列问题最重要的是数据格式的一致性.解决这个问题,建议按如下步骤: ...
- 实验室ubuntu连ipv6
1.买个极路由 2.无线中继连tsinghua-5G 3.安装ipv6插件 4.联网或者科协vpn 5.下载bt客户端:sudo apt-get install qbittorrent (或者su ...
- oracle转mysq遇到的问题--------1.nextval问题
oralce里面有一个问题,在做采购单模块时,遇到如下问题: 所以我们要解决这个问题: 第一步: 并发生成方式: sequence的并发生成方式同非并发生成方式都需要建立sequence表,如下: 一 ...
- 根据key删除Map集合中的key-value映射
一:在遍历Map时是不可以删除key-value映射的,如果根据key删除,如下: public static void main(String[] args) { Map<String,Obj ...
- 《转载》python爬虫实践之模拟登录
有些网站设置了权限,只有在登录了之后才能爬取网站的内容,如何模拟登录,目前的方法主要是利用浏览器cookie模拟登录. 浏览器访问服务器的过程 在用户访问网页时,不论是通过URL输入域名或IP ...
- rabbitmq 强制删除集群相关信息，恢复原始状态
一.前言 同事搭的rabbitmq集群,其中一台一直报下面这种异常: Error: {inconsistent_cluster,"Node rabbit@mq1 thinks it's c ...