Easyui动态显示列的应用实例

最新推荐文章于 2025-04-09 16:08:29 发布

置顶

蔚蓝色天空sky

最新推荐文章于 2025-04-09 16:08:29 发布

阅读量5.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Easyui 文章标签： easyui 动态列实现行转列

本文链接：https://blog.csdn.net/ytangdigl/article/details/73380684

本文介绍了如何使用Easyui实现动态显示列的功能，满足不同月份天数变化的需求。通过MySql的行转列和group_concat技术处理数据，结合EasyUi的日期控件限制选择年月。在前端，利用js动态创建datagrid列，同时实现点击单元格查看和编辑考勤信息。文章还提供了部分代码实现和优化建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、前言
项目中一个考勤信息功能，考勤信息的数据表结构如下：

CREATE TABLE `t_attendance` (
  `id` varchar(50) NOT NULL,
  `beautician_id` varchar(50) NOT NULL COMMENT '美容师id',
  `att_date` date DEFAULT NULL COMMENT '考勤日期',
  `att_type` tinyint(4) DEFAULT NULL COMMENT '考勤类型：1：出勤；2：出勤半天；3：请假；4：迟到；5：旷工;6:休假;',
  `late_min` int(11) DEFAULT NULL COMMENT '迟到分钟数',
  `leavebill_min` int(11) DEFAULT NULL COMMENT '请假分钟数',
  `summary` text COMMENT '备注',
  `create_date` date DEFAULT NULL COMMENT '创建日期',
  `update_date` date DEFAULT NULL COMMENT '修改日期',
  `update_id` varchar(50) DEFAULT NULL COMMENT '修改id',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='考勤信息'

考勤表数据如下图：

这里写图片描述

客户要求实现的界面样式如下图：

这里写图片描述

说明：根据年月查询店铺员的考勤信息，每个月份的天数是不一样的，5月份31天，6月份30天，2月份根据年份的不同，天数也不一样。所以上图的datagrid列表中的列是动态变化的。

A、该功能需求用的技术、知识点
1、MySql行转列、group_concat(此处可参考本人之前blog MySql行转列、group_concat使用)
2、js中动态创建datagrid列
3、EasyUi日期控件datebox设置，只显示年月，也只能选择年月。该问题查看本人的blogEasyUi日期控件datebox设置，只显示年月，也只能选择年月
4、EasyUi点击单元格查看、编辑员工某一天的考勤信息

2、代码实现
1、图中datagrid的列分两种，员工姓名是frozenColumns，
列，其他动态列是columns。

att.jsp页面代码片段

//获取年月日期框的年月值
var attYearMonthStr = $("#attYearMonth").datebox("getValue");

//${headerString}是获取跳转到att.jsp页面时后台丢取的列集合数据字符串
//${headerString}字符串的内容为'2017-06-01,2017-06-02 ...省略 2017-06-30'
var headerString = '${headerString}';

//将字符串转换为datagrid的column的data，然后在页面中可以直接用colObjArr
var colObjArr = covertHeader(headerString);

//创建考勤datagrid
var attDataGrid = $('#attDataGrid').datagrid({
    url : '${pageContext.request.contextPath}/shop/att/queryAtts.do?attYearMonth=' +attYearMonthStr ,
    fit : true,
    fitColumns : false,
    border : false,
    idField : 'id',
    remoteSort: false,
    singleSelect:

最低0.47元/天解锁文章