BIEE 11g 使用叙述视图实现复杂中国式表格一例
来源:互联网 发布:双录取很坑人 知乎 编辑:程序博客网 时间:2024/05/17 03:00
今天有朋友问到如何实现如下表格今天有朋友问到如何实现如下表格今天有朋友问到如何实现如下表格
比较简单的方法就是使用叙述视图来自己编写html代码将这个表格画出来,这是第一步。
第二步是如何实现“小计行”和“ERP调节后余额”这两行
我想的办法是使用JS来动态计算表格的值。不过这样一来就要求表格必须在页面上完全显示出来,不能分页。(因为是使用的JS来遍历页面上的内容)
在实现的过程中,有许多小细节需要考虑,比如千分位的显示。文字的竖排等。具体大家可以直接参考我的代码,并在此基础上做出调整
首先新建如下字段的报表
注意,一共有6列
然后新建叙述视图,在前缀中加入如下代码:
<style> #cux_data_table001{border-right:1px solid #F00;border-bottom:1px solid #F00} #cux_data_table001 td{border-left:1px solid #F00;border-top:1px solid #F00} .one { width: 20px; margin: 0 auto; line-height: 24px; } .two { width: 15px; margin: 0 auto; line-height: 24px; word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/ } </style> <script type="text/javascript"> function toThousands(num) { return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); }; var calcTotal=function(table,column){//合计,表格对象,对哪一列进行合计,第一列从0开始 var trs=table.getElementsByTagName('tr'); var end=trs.length-1;//忽略最后合计的一行 var total=0; for(var i=0;i<end;i++){if("cux_value_rows"!=trs[i].className) continue; var td=trs[i].getElementsByTagName('td')[column]; var t=parseFloat(td.innerHTML.replace(',','')); if(t)total+=t; } return total; };function setValue(tid,value){var td=document.getElementById(tid);td.innerHTML=value;} </script><table id ="cux_data_table001"><tr> <td>品种</td> <td colspan="3">ERP系统出库数量</td> <td colspan="3">0.0</td> </tr> <tr> <td rowspan="20"><div class="one">93号汽油</div><div class="two">︵</di><div class="one">国标</div><div class="two">︶</div></td> <td colspan="6">减:ERP系统已出配系统未出</td> </tr> <tr> <td>日期</td> <td>数量</td> <td>系统单号</td> <td>差异原因</td> <td>对应盘点表类别</td> <td>差异处理时间</td> </tr>
在叙述中加入如下代码:
<tr class="cux_value_rows"> <td>@1</td> <td>@2</td> <td>@3</td> <td>@4</td> <td>@5</td> <td>@6</td> </tr>
在后缀中加入如下代码:
<tr> <td>小计:</td> <td id="cux_st_100"><script>setValue('cux_st_100',calcTotal(document.getElementById('cux_data_table001'),1).toFixed(2))</script></td> <td id="cux_st_101"><script>setValue('cux_st_101',toThousands(calcTotal(document.getElementById('cux_data_table001'),2)))</script></td> <td id="cux_st_102"><script>setValue('cux_st_102',calcTotal(document.getElementById('cux_data_table001'),3))</script></td> <td id="cux_st_103"><script>setValue('cux_st_103',calcTotal(document.getElementById('cux_data_table001'),4))</script></td> <td id="cux_st_104"><script>setValue('cux_st_104',calcTotal(document.getElementById('cux_data_table001'),5))</script></td> </tr> <tr> <td colspan="3">ERP调节后余额</td> <td id="cux_st_111"><script>setValue('cux_st_111',calcTotal(document.getElementById('cux_data_table001'),3))</script></td> <td id="cux_st_112"><script>setValue('cux_st_112',calcTotal(document.getElementById('cux_data_table001'),4))</script></td> <td id="cux_st_113"><script>setValue('cux_st_113',calcTotal(document.getElementById('cux_data_table001'),5))</script></td> </tr></table>
最终效果如下图:
具体格式大家自己回去慢慢调整吧
注:该方案在12c中使用excel导出会有格式问题
阅读全文
0 0
- BIEE 11g 使用叙述视图实现复杂中国式表格一例
- 在BIEE叙述视图使用条件格式
- 在BIEE叙述视图使用条件格式
- BIEE 11g 动态数据源应用一例
- BIEE叙述图导航实例
- BIEE叙述图导航实例
- BIEE 11g 嵌入Iframe
- biee 11g连接teradata
- Biee 11g权限详解
- BIEE 11g WebService指南
- BIEE 11g 关于动态切换金额显示单位 方案一
- 解决BIEE 11g 中文乱码问题
- BIEE 11g去掉图形阴影
- BIEE 11g 地址重定向
- BIEE 11g回写功能
- BIEE 11G控制台乱码解决
- BIEE 11g回写插入失败
- BIEE 11g 系统临时文件说明
- LeetCode 40. Combination Sum II
- 正则表达式
- 如何进行CRC校验
- 341. Flatten Nested List Iterator
- 对象标识符和对象引用+对象标识符+对象引用+为对象引用插入数据+查询对象引用OID对应的实际值+更新对象引用+删除对象引用
- BIEE 11g 使用叙述视图实现复杂中国式表格一例
- USACO-Section1.2 dualpal[字符处理]
- IOS基础控件 UIImageView swift3.1
- Pascal中repeat的用法
- Java变量
- Elastic Ball in the Frame(水题)
- 深入浅出理解视频编码H264结构
- Q21_按之字形顺序打印二叉树
- 【数据压缩】JPEG编解码