博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
easyUI表格多表头实现
阅读量:5897 次
发布时间:2019-06-19

本文共 5986 字,大约阅读时间需要 19 分钟。

项目中要实现表格多表头,结合网上的例子自己实现了一个,包含frozenColumns情况。

一,通过标签创建

效果:

缺课缺勤人员 缺课缺勤情况统计
报告状态 缺课天数 缺课缺勤原因
首日缺课 连续缺课 上午 下午 因症状 原症状
姓名 性别 年龄 年级班级(部门) 发热 发热度数 主要症状及描述 传染病

二,使用Javascript创建

效果同上;

html:

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'} ]] });

 

转载于:https://www.cnblogs.com/hoaprox/p/6346967.html

你可能感兴趣的文章
public/private/protected的具体区别
查看>>
面试宝典——求一个字符串中连续出现次数最多的子串
查看>>
VMware Workstation虚拟机上网设置
查看>>
Jenkins持续集成学习-搭建jenkins问题汇总
查看>>
leetcode:Invert Binary Tree
查看>>
C#Note13:如何在C#中调用python
查看>>
Android介绍以及源码编译---Android源码下载
查看>>
SpringBoot集成redis缓存
查看>>
万恶的浏览器兼容问题
查看>>
sql经典语句
查看>>
附:01 设置app图标步骤
查看>>
使用ffmpeg实现对h264视频解码 -- (实现了一个易于使用的c++封装库)
查看>>
第4周作业-面向对象设计与继承
查看>>
First throw call stack: 不打印方法名
查看>>
mb_strcut与mb_substr()
查看>>
机器学习的原理
查看>>
网页制作中最有用的免费Ajax和JavaScript代码库
查看>>
APDU命令与响应格式【转】
查看>>
HTML 5 and CSS 3: The Techniques You’ll Soon Be Using【转】
查看>>
flink watermark介绍
查看>>