layui日历形式展示对应可编辑表格数据

需求: 新增按钮弹框, 根据查询条件生成表格数据(日历形式展示),且数据与日历天数一一对应.数据都可一一修改,且监听单元格修改正则验证.如果当前单元格对应的日历形式非当月的数据展示为空,且不可编辑.

原型如下:

 后台返回格式数组含对象,因为当前单元格可能不在当月的日期天数,后台也不会返回对应的字段,所以要检测每一列对应的字段是否为undefined,是的话要显示空.如下:

 因为表格每一列设置可编辑属性edit.但业务是 不是当月日期数据对应的单元格不可编辑.所以要遍历返回的数据, 找到每个对应tr下对应的td(字段名),判断条件为检测undefined类型.实现禁用编辑.代码如下:

 因为业务对周期价格有格式要求,也就是单元格数据, 所以要监听单元格编辑,验证输入单元格的数据格式,代码如下:

 因为保存的时候不单单只有表格数据,还有对应的查询生成条件,用的是json格式JSON.stringify().因为考虑到客户输入生成条件后,生成表格编辑后,会修改生成条件(生成月份)在保存.所以加了一个生成前后的生成条件对比,不相等自然不能保存.代码如下:

 我的初心也是衷心是希望友友们项目中少些烦恼,多积累经验充实自己.如果我经历的对你有所帮助,就再好不过了.创作不易,以后我会尽量创作一些项目中遇到的小问题,如果能有帮助到大家那就是万分幸运.也希望大家点个收藏和关注,再不济也待点个赞再走吧.以后也会分析一些关于书籍类的知识,凡是过往,皆为序章.