mini Ui表格中单元格编辑添加校验规则
** 这两天做项目的时候遇到一个需求dataGrid某一列可编辑列与某一列或者一个变量做比较**
首先想到了三种实现方式:onblur、onValidation以及在保存按钮事件中增加循环遍历校验(两写法)
<div id="dataGrid" dataFiled="infos" class="nui-datagrid">
<div fileld="列1" >value1<div>
<div fileld="列2">
<input class="mini-textbox" property="editor" onblur="onblurSender(this.value)" />
</div>
<div fileld="列3">
<input class="mini-textbox" property="editor" onblur="onblurSender(this.value)" />
</div>
<div fileld="列4">
<input class="mini-textbox" property="editor" required="true"onValidation="onValidation" />
</div>
</div>
下文中使用的全局变量
var grid=nui.get("dataGrid");
int i=0;
第一种:
onblurSender(value){
var row=grid.getSelected();
var value1=row.value1
if(value1>value){
nui.alert("value不能小于value1");
}
// return false;
}
弊端:dataGrid大部分都是展示多列数据的,编辑列2后,直接选择列3,失焦后连续点击,弹出框会多次弹出同一次提示,且弹出框点击确认后,不会影响到后续操作,so pass。
第二种:
onValidation(e){
var value4=e.source.value;
var row=grid.getSelected();
if (e.isValid) {
// onConmpare(value4,row)可以直接判断
// 例如使用value4>row.value1替换onConmpare(value4,row) == false
if (onConmpare(value4,row) == false) {
e.errorText = "value4不能小于value1";
e.isValid = false;
}
}
}
// 个人习惯,所以我这里拆分了
onConmpare(value4,row){
if(value4>row.value1){
return true;
}
return false;
}
save(){
grid.validate();
if(grid.isValid()==false){return;}
}
缺陷:适合进入页面必须进行编译的使用,否则用户不编辑 直接进行保存,则验证不起作用
第三种写法1:
//验证值与被验证值不是强制校验,原始数据验证值为2(value1),
//被验证为1(value4),本身不符合验证条件的可以使用grid.getChanges(),
//如果是强校验,就是所有数据都必须符合验证规则才能进行保存的可以使用我的需求是强制校验
save(){
//验证通过进行保存操作
}
checkForcom(){
var rows=grid.getData();
var flag=comp(rows[i]);
if(i>ws.length){
save();
}
}
comp(row){
if(row.value4>row.value1){
nui.alert("value4不能小于value1");
return ;
}
}
第三种写法2:
也可以使用for循环
checkForcom(){
var rows=grid.getData();
for(i;i<rows.length;i++){
if(row.value4>row.value1){
nui.alert("value4不能小于value1");
break;
}
}
}
延伸:
如果不是弹出框alert,而是确认框confirm,推荐使用递归第三种写法1,因为for循环不等待用户点击,就会往下执行,造成多次弹出,so 不建议使用for循环实现confirm的弹出。