网页端动态控制行式报表单元格是否可写
客户在使用润乾的行式填报表填报时,往往会有一些自己的特殊需求,例如:报表展现后页面上的单元格是可以编辑的,当用户对单元格数据修改后要求对数据进行检查,此时为防止鼠标误点等操作,要求页面上有一个锁定按钮,点击锁定后报表单元格不能再进行编辑,如果发现数据不正确再点击编辑,这样单元格就行实现编辑功能。
解决方法:
在润乾报表的可写属性中可写入表达式进行动态控制,但是并不适用于此需求,因为此处要求在页面端进行动态控制。报表展现后为纯html格式,这样就可以通过js对单元格的属性进行控制。如:
currCell.onclick = _hideEditor 设置单元格不可写
currCell.onclick=_displayEditor 设置单元格可写
但在使用这两个方式时要注意一点,设置不可写用上述方法可以,但设置单元格可写时要根据单元格的编辑风格不同使用不同的方式,例如编辑框、下拉日历、下拉树三种设置方式均不相同,下面介绍下整体的实现。
一:制作raq
新建一张行式填报表,并且在不同的单元格中设置编辑框、下拉数据集、下拉日历、下拉树等编辑风格,并将该表保存到服务器下。
二:jsp文件编写
首先要在页面端定义两个按钮,如图:
<input id=”hid” type=”button” onclick=”setReportWritable(document.getElementById(‘report1′), false)” value=”锁定” />
<input id=”dis” type=”button” onclick=”setReportWritable(document.getElementById(‘report1′), true)” value=”编辑” />
点击不同的按钮,调用js函数,通过不同的参数实现是否可写
因为要实现报表可写与不可写的之间的切换,以及报表单元格的一些控件属性,所以在报表展现后要记录下报表单元格的初始属性,并保存到一个数组中,如下述代码:
var temp=new Array();
var row=document.getElementById(“report1″).rows.length; //报表初始化时得到报表单元格的属性,并放在temp里
for(var i=0;i<row;i++)
{
temp[i]=new Array();
var currRow=document.getElementById(“report1″).rows[i];
for(var col=0;col<currRow.cells.length;col++)//行列循环
{
var currCell=currRow.cells[col];
temp[i][col]=currCell.onclick;
}
}
接下来即可实现点击按钮的js函数
function setReportWritable(report_table, writable) {
var _input_report_writable = writable;//设置为是否可写,true或false
for ( var row = 0; row < report_table.rows.length; row++) {
var currRow = report_table.rows[row];//取得行
for ( var col = 0; col < currRow.cells.length; col++) {//行列循环取单元格
var currCell = currRow.cells[col];//取得指定行列(单元格)
if (!writable) {
currCell.onclick = _hideEditor;//设置为不可写(填)
} else {//否则设置报表为可写(填)
if(currCell.editStyle==6){//editStyle==6表示该单元格为下拉日历
currCell.onclick = function anonymous() {
_hideEditor();
_runqianCalendar.dateFormat=’yyyy-MM-dd HH:mm:ss’; //设置下拉日历取值类型
_runqianCalendar.type= ‘date’; //请注意此处的写法
_showCalendar();
_setRowColBackColor(this) };
}
else if(currCell.editStyle==8){//editStyle==8表示该单元格为下拉树
currCell.onclick=temp[row][col];
}
else{
currCell.onclick=_displayEditor;//出去上述两种类型外,其余类型单元格设置方式可写方式相同
}
}
}
}
}
这样就可以实现在网页端动态控制单元格是否可写,如下图:
具体代码及raq见附件。