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 ...
随机推荐
- Xbox One手柄 + Xbox Wireless Adapter PC无线适配器驱动安装、配对全流程
以下步骤在Windows 7系统中操作.XBox One手柄+无线适配器并非仅只能在Windows 10中使用. 一点感想:微软的XBoxOne手柄实在是好东西,但产品使用说明与文档实在太垃圾,翻遍官 ...
- Android反编译和二次打包
参考:APK反编译 一.工具介绍: 1.解压工具 2.JDK 3.apktool: aapt.exe,apktool.bat,apktool.jar;三个在同一目录结合使用,用来反编译apk,反编译生 ...
- c++默认参数函数注意事项
再有默认参数的函数中,一般我们都把默认参数放在声明处而不是定义处. 如果声明和定义都有默认参数,编译器将会报错. 调用含有默认实参的函数时,我们可以包含参数,也可以省略. 有默认参数的函数,我们可以不 ...
- Android Launcher分析和修改12——Widget列表信息收集
很久没写Launcher分析的文章,最近实在太忙.今天七夕本来是想陪女朋友逛街 ,碰巧打台风呆在家里,就继续写一篇文章.今天主要是讲一下Launcher里面的Widget列表,这方面信息比较多,今天重 ...
- 【iCore1S 双核心板】DEMO V1.0 测试程序发布
iCore1S Demo V1.0程序说明 一.概要 本资料包含5个文件夹: 1.“ARM”里是iCore1S上ARM的程序包,开发环境为KEIL5.17: 2.“FPGA”里是iCore1S上FPG ...
- 系统垃圾清理利器CCleaner v5.30.6063绿色单文件版（增强版）
系统垃圾清理利器CCleaner现已更新至v5.30.6063,此次更新为Edge.IE浏览器提供了更好的清理功能,更新了Windows Explorer MRU清理功能,同时改善了应用程序中的SSD ...
- Java知多少（25）再谈Java包
在Java中,为了组织代码的方便,可以将功能相似的类放到一个文件夹内,这个文件夹,就叫做包. 包不但可以包含类,还可以包含接口和其他的包. 目录以"\"来表示层级关系,例如 E:\ ...
- Swift 中函数使用指南
关于Swift中的各种函数的使用的总结 前言 时间久了,好多东西我们就会慢慢忘记,在这里总结一下Swift中函数的使用原则,把大部分的函数使用技巧用代码示例来做了演示,但是如果想提高,还是要多多思考才 ...
- Dapper Extensions Change Schema
Dapper Extensions Change Schema You can use the AutoClassMapper to assign a new schema to your model ...
- Hook lua库函数时遇到的问题
最近在为distri.lua实现一个lua调试系统,有一个简单的需求,lua导入一个文件的时候,将这个文件的文件名记录下来, 以方便调试器在设置断点的时候判断是否一个合法的文件. lua导入文件是通过 ...