定制化开发请加qq 1424173603

tableEdit

ayui table edit编辑功能

一、介绍

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

功能

下拉框（单或多选）
时间选择框
单元格下拉框联动（下拉框联动下拉框、时间选择框联动下拉框）
编辑数据校验

二、使用说明

1.使用方法

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

layui.config({
    base: 'module/'
}).extend({
        tableEdit:'js/tableEdit'
}).use(['table','tableEdit'], function () {
    var tableEdit= layui.tableEdit;
    
});

测试页面

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

2.方法说明

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

3.参数说明

aopObj

参数	类型	是否必填	描述
cols	array	是	table.render(options)中options的cols属性值（单元格信息）。

on

参数	类型	是否必填	描述
event	string	是	事件名称
callback	function	是	事件回调方法

callbackFn

参数	类型	是否必填	描述
event	string	是	事件名称
params	object	否	事件回调方法的参数

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'}

config说明

属性	类型	是否必填	描述
type	string	是	输入框：input 下拉框：select 时间选择框：date
data	array	是	下拉框数据
enabled	boolean	否	多选：true，单选：false，默认单选。
dateType	string	否	时间格式 date:yyyy-MM-dd,datetime:yyyy-MM-dd HH:ss:mm,time:HH:ss:mm
cascadeSelectField	string	否	联动下拉框配置字段
verify	object/boolean	否	字段数据验证

verify说明

verify => boolean true开启验证，false关闭验证

{"field":"name","event":"name","config":{"type":"input","verify":true}}

verify => object

属性	类型	是否必填	描述
type	string	否	内置验证类型
regx	regExp/string/function	否	自定义正则类型
msg	string	否	自定义提示消息

内置type说明

{"field":"name","event":"name","config":{"type":"input","verify":{"type":"required"}}}

类型	描述
required	空值验证
phone	手机号码验证
email	邮箱验证
url	url验证
number	数字验证(整数、小数)
date	日期时间验证
identity	身份证验证

自定义正则regExp说明

类型	描述
function	自定义函数验证需return验证结果 true成功 false失败
string	字符串类型正则
regExp	正则表达式

function

{"field":"name","event":"name","config":{"type":"input","verify":{"regx":function(data){
     //data为验证数据
     // true为验证成功  false为验证失败
      return true；
}}}}

string

{"field":"name","event":"name","config":{"type":"input","verify":{"regx":"(^[-+]?\\d+$)|(^[-+]?\\d+\\.\\d+$)","msg":"请输入整数或者小数"}}}

regExp

{"field":"name","event":"name","config":{"type":"input","verify":{"regx":/(^[-+]?\d+$)|(^[-+]?\d+\.\d+$)/,msg:"请输入整数或者小数"}}}

自定义提示

{"field":"name","event":"name","config":{"type":"input","verify":{"type":"required","msg":"必填项不能为空"}}}

data格式

[
    {name:1,value:"测试1"},
    {name:2,value:"测试2"},
    {name:3,value:"测试3"},
    {name:4,value:"测试4"},
    {name:5,value:"测试5"}
]

6.效果图

效果图

编辑数据验证
提交数据验证

二锅头 / layuiTableColumnEdit

tableEdit

一、介绍

功能

二、使用说明

1.使用方法

测试页面

2.方法说明

3.参数说明

aopObj

on

callbackFn

6.效果图

简介

发行版

贡献者

近期动态

二锅头 / layuiTableColumnEdit .gitee-modal { width: 500px !important; }

tableEdit

一、介绍

功能

二、使用说明

1.使用方法

测试页面

2.方法说明

3.参数说明

aopObj

on

callbackFn

6.效果图

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

二锅头 / layuiTableColumnEdit