js实现排序功能

编辑
文档创建者:1176846029 (66158 )     浏览次数:308次     编辑次数:4次     最近更新:jiangsr 于 2018-01-10     

目录:

1.问题描述编辑

填报的时候可以对表格进行排序。根据帮助文档,用了扩展后排序这个功能,发现了每次点击的时候都会刷新一下页面,这样导致我刚刚填报的数据被刷新没了。

为了解决此问题,我们使用JS来实现不刷新页面进行排序的功能,实现效果如下:

222

2.实现思路编辑

通过js来排序,对页面上的位置进行调整。

3.实现步骤编辑

3.1 准备模板
1)打开设计器,添加一个新的模板,为该模板创建一个数据集。sql语句为:SELECT * FROM S产品 where  产品id<20
222
2)将数据集中的数据拖到单元格,并设置样式,如下:
222
3.2 添加js
选择 模板>模板web属性>填报页面设置,选择为该模板单独设置,然后添加加载结束事件。如下:
222
JS代码如下:
//排序的方法,参数为表的id和列 function sortTable(table, idx) { var otable = document.getElementById(table), otody = otable.tBodies[0], otr = otody.rows, tarr = []; for (var i = 1; i < otr.length; i++) { tarr[i - 1] = otr[i]; }; if (otody.sortCol == idx) { tarr.reverse(); } else { tarr.sort(function (tr1, tr2) { var value1 = tr1.cells[idx].innerHTML; var value2 = tr2.cells[idx].innerHTML; if (!isNaN(value1) && !isNaN(value2)) { return value1 - value2; } else { return value1.localeCompare(value2); } }) } var fragment = document.createDocumentFragment(); for (var i = 0; i < tarr.length; i++) { fragment.appendChild(tarr[i]); }; otody.appendChild(fragment); otody.sortCol = idx; } //获取到页面中表头,设置点击事件 $("#r-0-0 td").bind("click",function(){ //获取到点击的列 var a=$(this).attr("col"); //调用排序的方法,进行传值,0是这个表的id,可以通过F12获取到表的id sortTable('0',a); });
注:$("#r-0-0 td") 表示获取了第一个tr下面的所有td,因为这个页面就一个表格。若页面有别的模块展示,需要进行对应的修改。可以在页面上用F12 来获取到对应的元素。

4.保存预览编辑

点击预览,效果如上图。

已完成模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\JS实现排序功能.cpt。

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

本文档是否有用?
谢谢! 我们非常感谢您的反馈。
提交反馈: