报表知识库
我要提问

自定计算完善校验功能

填报表往往需要在客户端页面输入时进行合法性检查,如检查输入是否为数字或符合规定的格式等。润乾报表通过两种方式实现合法性检查:

第一种,通过设置单元格的填报数据类型自动实现合法性检查,如设置成数值型或Email地址等。

第二种,通过设置单元格校验属性,输入校验表达式,实现手工校验。比如:要求在c5单元格里填写的数据为在0100之间,则可设单元格校验表达式为:${C5}>=0&& ${C5}<=100

可是这两种方式都是通过弹出alert框来提示的,如下图,在用户使用过程中好感度会有所影响。

如何在校验方面设置的漂亮些呢?例如填入非法数据后会友好提示。下面我们就通过自动计算的结合来实现一中相对友好的校验方式。

首先对上述报表增加一行,用来显示提示报错内容,例如整个第一行:

再最后增加一列,增加自动计算表达式,然后将其列隐藏:

传入js中的参数为需要验证的单元格表达式,以及需要写入提示信息的单元格id。然后在展现报表的jsp页面中加入javascript

这里我们需要验证的内容为单元格内容必须是整数且数值大于1000.如果违反规则,则单元格内容变红色,并且在A1单元格中提示。

首先加入通过正则表达式判断整型的js,内容比较简单不做过多介绍:

function isInt(str){

if(isObj(str)){

var reg = /^(-|\+)?\d+$/;

return reg.test(str);

}

return true;

}

function isObj(str){

if(str==null||typeof(str)==’undefined’)

return false;

return true;

}

然后通过润乾的一直内置js来获取焦点单元格的值report1.currCell.value来进行下一步判断.

function getValueIntBy(testvalue,cellName){

alert(cellName);

document.getElementById(cellName).innerText=”";//将提示单元格内容制空

if(!isInt(report1.currCell.value)){//判断焦点单元格类型

report1.currCell.style.color=”#FF0000″; //改变焦点单元格颜色

document.getElementById(cellName).innerText = “请输入整数!!“;//将提示内容输出到A1单元格中

return “”;

}

if(report1.currCell.value>1000){

document.getElementById(cellName).innerText = “请输入1000!!“;

report1.currCell.style.color=”#FF0000″;

}

return “”;

}

最后再将校验规则做到润乾本身的校验中去,并且去除立即校验勾选

在页面中进行测试.输入字符后可看到单元格内容变色,提示框中显示提示.

大于1000,同样会进行校验:

点提交时才会进行校验,同理如果提交时也不想弹出alert框,只需要自定义提交的js,再里面进行校验,如果返回true的话,调用润乾内置的提交函数_submitTable()