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 ...
随机推荐
- python工具 - alert弹框输出姓名年龄、求和
使用python自带的tkinter库进行GUI编程,完成两个功能: (1)要求用户输入姓名和年龄然后打印出来 (2)要求用户输入一个数字,然后计算1到该数字之间的和 代码部分: # 导入tkinte ...
- 每日英语：Upgrade Your Life: How to speed up your PC (or Mac)
Is your desktop or laptop computer starting to feel a little poky? Even after just a few months of u ...
- MXNET：多层神经网络
多层感知机(multilayer perceptron,简称MLP)是最基础的深度学习模型. 多层感知机在单层神经网络的基础上引入了一到多个隐藏层(hidden layer).隐藏层位于输入层和输出层 ...
- mysql 核心知识要点
整体知识介绍:mysql基本操作和使用,mysql优化(索引,分表等),mysql部署(读写分离,负载均衡等) 数据库基本介绍:数据库概念,常用数据库,web应用三大软件分工,PHP动态语言特点(处理 ...
- Docker入门学习总结
1. 什么是Docker Docker是一种虚拟化技术,其在容器的基础上进一步封装了文件系统.网络互联.进程隔离等等,从而极大地简化了容器的创建和维护.Docker使用 Google 公司推出的 Go ...
- Mac mysql 修改密码
如果你知道密码: mysqladmin -u root -p password 新密码 MYSQL数据库密码忘记: 1. 在系统偏好 中,中止MYSQL服务.: 2. cd/usr/local/mys ...
- mybatis xml 文件中like模糊查询
1.直接传参法 直接传参法,就是将要查询的关键字keyword,在代码中拼接好要查询的格式,如%keyword%,然后直接作为参数传入mapper.xml的映射文件中. 2.CONCAT()函数 My ...
- php-fpm开机自动启动脚本其实源码包里边就有
网上有各种版本的php-fpm开机自动启动脚本, 其实你编译后源目录已经生成自动脚本.不用做任何修改即用.cp {php-5.5.x-source-dir}/sapi/fpm/init.d.php-f ...
- webpack之proxyTable配置
有两种情况: 一,有统一的项目名 config下index.js 配置如下: proxyTable: { '/tbt_user':{ target: 'http://47.98.216.251:80' ...
- 剖析RAC中的@weakify、@strongify
0.很长的前言 1.问题 2.RAC是怎么解决的 2.weakify.strongify的定义 预备知识 一层层展开weakify 3.RAC装逼宏 metamacro_argcount 的定义 me ...