ReportStudio入门教程(五十七) - JS拼接报表
2014-07-02 19:01
232 查看
这回,分享一个段JS代码,有的时候,我们可能需要将2个报表进行拼接,让用户看上去就是一张报表。
![](https://img-blog.csdn.net/20140702190542031?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVndWl5YW5nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20140702190635718?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVndWl5YW5nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
先运行下,看看样子
![](https://img-blog.csdn.net/20140702190727531?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVndWl5YW5nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
现在,我们使用JS将上下2张报表拼接起来
![](https://img-blog.csdn.net/20140702190909937?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVndWl5YW5nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20140702191031687?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVndWl5YW5nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20140702191118734?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVndWl5YW5nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20140702191202953?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVndWl5YW5nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20140702191232546?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVndWl5YW5nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20140702191507468?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVndWl5YW5nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
JS代码:
<script language="JavaScript">
function appendBody(obj , table_name) {
//获取表格的所有TR
var table_trs = document.getElementById(table_name).firstChild.firstChild.childNodes;
//根据获取TR的个数循环将每次循环的第一个TR添加到 List1的TBody标签下
var table_trs_length = table_trs.length
for(var i=0;i<table_trs_length;i++){
obj.appendChild(table_trs[0]);
}
}
//合并列表的row
function mergeList()
{
//获取第一个列表的TBody标签
var tbody1 = document.getElementById('list1').firstChild.firstChild;
appendBody(tbody1 , 'list2');
}
//页面加载时执行合并列表操作
setTimeout("mergeList()", 10);
</script>
![](https://img-blog.csdn.net/20140702192549484?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVndWl5YW5nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
好了,已经成功了,这里主要是一个利用JS实现的。
1. 基本报表
先运行下,看看样子
现在,我们使用JS将上下2张报表拼接起来
2. 新建HTML项目
我们使用HTMl项目包裹住每一张列表3. 编辑HTML项目
4. 再新建一个HTML项目
贴入JS代码JS代码:
<script language="JavaScript">
function appendBody(obj , table_name) {
//获取表格的所有TR
var table_trs = document.getElementById(table_name).firstChild.firstChild.childNodes;
//根据获取TR的个数循环将每次循环的第一个TR添加到 List1的TBody标签下
var table_trs_length = table_trs.length
for(var i=0;i<table_trs_length;i++){
obj.appendChild(table_trs[0]);
}
}
//合并列表的row
function mergeList()
{
//获取第一个列表的TBody标签
var tbody1 = document.getElementById('list1').firstChild.firstChild;
appendBody(tbody1 , 'list2');
}
//页面加载时执行合并列表操作
setTimeout("mergeList()", 10);
</script>
5.运行下看看
好了,已经成功了,这里主要是一个利用JS实现的。
相关文章推荐
- ReportStudio入门教程(七十六) - JS拼接报表- 第2页显示表头
- ReportStudio入门教程(六十一) - JS-清空多选框
- ReportStudio入门教程(七十八) - JS-禁止右键单击功能
- ReportStudio入门教程(二十四) - 在报表中引入参数的内容
- ReportStudio入门教程(一) - 基本的列表
- ReportStudio入门教程(三) - 简述分页
- ReportStudio入门教程(八十二) - 计算项的运算顺序(续一):交叉表比率
- ReportStudio入门教程(二十六) - 列表的悬浮提示信息-显示自定义信息
- ReportStudio入门教程(五十一) - 追溯定义(下)
- ReportStudio入门教程(七) - 计算项
- ReportStudio入门教程(九十三) - 查询1引用查询2的方法(允许向量乘积)
- ReportStudio入门教程(七十一) - 显示时间进度(文字版)
- ReportStudio入门教程(五) - 数据汇总
- ReportStudio入门教程(九十) - 在交叉表表头显示占比
- ReportStudio进阶教程(二) - 配置报表目录页面 之 简单展示
- ReportStudio入门教程(七十七) - 自定义排名规则
- ReportStudio入门教程(十九) - 值提示
- ReportStudio入门教程(十七) - 将汇总显示在第1行
- ReportStudio入门教程(三十四) - 固定显示4个季度
- ReportStudio入门教程(四十三) - 在交叉表中隐藏列