行式填报表功能按钮生成到每行单元格上

填报表功能按钮生成到每行单元格上">集智数据平台的行式填报表在页面端允许客户动态的插入行或删除行,一般情况下这些按钮生成在报表的上方或下方,但是如果客户的报表展现数据比较多,点击插入行要上下拖拽滚动条才能使用,使用起来太不方便,要求插入行、删除行按钮要跟随每行扩展,这样使用起来就非常灵活、方便,如下图所示:

解决方案:

集智数据平台报表内置了一些js,如导出excel打印等,同样插入行和删除行也有自己对应的js,只需要调用该js即可。

首先制作行式填报表:

G5单元格的HTML事件属性中写入:

onmouseup=”innerAppendRow( this )” onmouseout=”this.style.backgroundColor=”” onmouseover=”this.style.backgroundColor=’#BFDFFF’;this.style.cursor=’hand’”

H5单元格的HTML事件属性中写入:

onmouseup=”innerDeleteRow(this)” onmouseout=”this.style.backgroundColor=”” onmouseover=”this.style.backgroundColor=’#BFDFFF’;this.style.cursor=’hand’”

可以看到,这两个单元格中定义了onmouseup事件,分别调用不同的js函数,然后在显示报表的jsp中定义该js函数即可,注意,这里需要传入一个参数this,表示所点击的当前单元格。

Jspjs函数定义:

<script language=”javascript”>

function innerAppendRow(theobj) //增加函数

{

report1.currCell = theobj;

_appendRow( report1 );

}

function innerDeleteRow(theobj) //删除函数

{

report1.currCell = theobj;

_deleteRow( report1 );

}

</script>

这样就能实现行式报表扩展后,每行跟随对应的插入、删除按钮

本文标签: