在 layui tableEdit 组件基础上实现表格数据编辑的验证功能

分享 未结 置顶 精帖 22 3196
单身狗278
单身狗278 2020-6-16
悬赏:20飞吻
起因
今天有个朋友突然问我,layui table是否可以实现数据编辑的验证机制,思考了下回复他说不可以。后来思考了下,既然tableEdit组件是用aop编程思想来实现的,那么是否可以在编辑单元格并获到其数据后进行数据验证呢?思考了几分钟后觉得可行,经过几个小时的乱搞,终于出来了,在此和大家分享下我的成果。

注意项
要用此验证功能,必须到码云上下载最新的tableEdit组件,并根据码云上的文档进行编码方可实现。
码云地址 https://gitee.com/yangqianlong98/layuiTableColumnEdit

开启验证
{"field":"name","event":"name","config":{"type":"input","verify":{"type":"required"}}}
内置验证功能

内置验证功能抄袭至贤心大大的部分代码,望大佬莫怪![哈哈] [嘻嘻] [挖鼻]

自定义验证


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:"必填项不能为空"}}}
示例
<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
<script>
layui.config({
base: 'module/'
}).extend({
tableEdit:'js/tableEdit'
}).use(['table','layer','tableEdit'], function () {
var table = layui.table, $ = layui.$,layer = layui.layer,tableEdit=layui.tableEdit;
var thisTable=table.render({
elem: '#tableId'
, id: 'id3'
, url: 'module/json/data1.json'
, page: true
,toolbar: '#toolbarDemo'
, cols: [[
{type:'checkbox'}
,{field:'productId',title: '产品id',width:180}
,{field:'productName',title: '产品名称',width:180,sort:true,config:{verify:{type:'number'}}}
,{field:'productImage',title: '产品照片路径',width:180,config:{verify:{type:'required',msg:'产品照片路径不能为空'}}}
,{field:'productCategoryName',title: '分类名称',width:180}
,{field:'price',title: '单价',width:180}
,{field:'stockCount',title: '库存量',width:180,event:'stockCount',totalRow: true,config:{type:'input',verify:{type:'date'}}}
,{field:'cost',title: '金额',width:180,totalRow: true}
]]
});
var aopTable = tableEdit.aopObj(thisTable.config.cols);

aopTable.on('tool(tableEvent)',function (obj) {

});

table.on('toolbar(tableEvent)', function(obj){
var tableChecked = table.checkStatus('id3');
//elem => 表格id data => 校验数据
//verifyKey => 数据中唯一值字段,且该字段必须在cols中以及字段值不能为空。
var result = aopTable.submitValidate({elem:'#tableId',data:tableChecked.data,verifyKey:'productId'})
console.log(result);
if(result.length > 0)console.log("数据校验不符合要求");
});
});
</script>
奶奶的个熊,废话不多说,直接上效果图





好了,不会用的自己去码云上看demo,还不会用就自己研究下,懒得理你们这些菜b。[哈哈]
回帖