网页端动态控制行式报表单元格是否可写

客户在使用润乾的行式填报表填报时,往往会有一些自己的特殊需求,例如:报表展现后页面上的单元格是可以编辑的,当用户对单元格数据修改后要求对数据进行检查,此时为防止鼠标误点等操作,要求页面上有一个锁定按钮,点击锁定后报表单元格不能再进行编辑,如果发现数据不正确再点击编辑,这样单元格就行实现编辑功能。

解决方法:

在润乾报表的可写属性中可写入表达式进行动态控制,但是并不适用于此需求,因为此处要求在页面端进行动态控制。报表展现后为纯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见附件。

热门文章