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 ...
随机推荐
- 从NSTimer的失效性谈起（二）：关于GCD Timer和libdispatch
一.GCD Timer的创建和安放 尽管GCD Timer并不依赖于NSRunLoop,可是有没有可能在某种情况下,GCD Timer也失效了?就好比一開始我们也不知道NSTimer相应着一个runl ...
- TestNG源代码分析：依赖管理的实现
TestNG源代码分析:依赖管理的实现 2018-03-19 1 背景 当case之间有依赖关系,有依赖关系的case,它们的执行顺序是有限制的.TestNG提供了依赖管理功能 2 基础理论 这个执行 ...
- Angularjs中config中置入以下拦截器
$httpProvider.interceptors.push(['$rootScope', '$q', '$localStorage', function ($rootScope, $q, $loc ...
- mac通过路径找到对应的文件夹
在finder中 command + shift + G 跳出窗口中输入指定的路径,即可到达.
- 小技巧 - CSS中:hover调试
在调试CSS的时候,我一般使用Chrome的F12开发者工具,或者FireFox的FireBug直接在元素上面修改好Style后,再写入到CSS中.前几天遇到一个问题就是a:hover,鼠标一移开效果 ...
- 教程：SpagoBI开源商业智能之XML Template 图表模板
SpagoBI offers a variety of widgets' examples realized with the Highcharts library, that can be divi ...
- ajax实战用法详解
谦虚使人进步,总结使人提高! 以下5个方法执行一般Ajax请求的简短形式,在处理复杂的Ajax请求时应该使用jQuery.ajax() 1.load(url,[data],[callback])载入远 ...
- Pycharm+Django搭建第一个Python Web程序
1.安装django 无论是Python2.x还是Python3.x版本,都可以使用pip来安装Django.在控制台使用如下命令:pip install django 如: 2.检查dgango是否 ...
- Angular4学习笔记（二）-在WebStorm中启动项目
点击配置 创建 选择命令 package.json 运行 查看运行结果
- Java 正则表达式详细使用
Java 正则表达式 java.util.regex.Pattern java.util.regex.Matcher 1.Matchmatch 是从字符串最头部开始匹配,一直到结束,需要匹配整个串 S ...