-

layui table(下拉框、日期选择器、表格数据校验)

  tableEdit  ayui table edit编辑功能  一、介绍     基于aop编程思想对layui table工具条事件tool(lay-filter)进行封装而成的table单元格编辑器。  功能  下拉框(单或多选) 

  tableEdit

  ayui table edit编辑功能

  一、介绍

     基于aop编程思想对layui table工具条事件tool(lay-filter)进行封装而成的table单元格编辑器。

  功能

  下拉框(单或多选)

layui table(下拉框、日期选择器、表格数据校验)

  时间选择框

  单元格下拉框联动(下拉框联动下拉框、时间选择框联动下拉框)

  编辑数据校验

  二、使用说明

  1.使用方法

    把tableEdit.js放在你的项目里面,然后使用模块加载的方式使用:

测试页面

  • tableEdit.html 编辑测试页面
  • verifyTest.html 数据校验测试页面

  • 编辑数据验证 layui table(下拉框、日期选择器、表格数据校验)
  • 提交数据验证 layui table(下拉框、日期选择器、表格数据校验)

2.方法说明


方法名描述
aopObj获取一个table的aop代理对象方法,一张表对应一个aop对象。
on事件注册
callbackFn事件回调


tableEdit配置格式

  • 在cols中加上config属性
{"field":"name","event":"name","config":{}}
  • 输入框 config:{"type":"input"}
  • 带(+和-)输入框 config:{"type":"signedInput"}
  • 单选下拉框 config:{"type":"select","data":params}
  • 多选下拉框 config:{"type":"select","data":params,"enabled":true}
  • 下拉框联动 config:{"type":"select","data":params,"cascadeSelectField":"name"}
  • 日期选择框 config":{"type":"date","dateType":"date"}
  • 日期选择框联动 config:{type:'date',dateType:'date',cascadeSelectField:'name'}
效果预览:layui table(下拉框、日期选择器、表格数据校验)代码demo演示

下载地址:layui table(下拉框、日期选择器、表格数据校验)下载
通过上面的阅读,也许你已大致了解如何使用 《layui table(下拉框、日期选择器、表格数据校验)》 了,不过你可能还需要继续阅读后面的文档,尤其是「基础说明」。
那么,欢迎你开始拥抱 layui!愿它能成为你得心应手的 Web 界面解决方案,化作你方寸屏幕前的亿万字节!

layui - 在每一个细节中,用心与你沟通