JS实现不刷新页面进行排序功能
您当前的位置：首页 > 高级教程 > 二次开发 > JavaScript > 其它JS 已关注
JS实现不刷新页面进行排序功能 编辑
文档创建者：1176846029 浏览次数：2846次 编辑次数：9次 最近更新：Kevin-s 于 2019-05-29
1. 描述
填报的时候可以对表格进行排序。根据帮助文档，用了扩展后排序这个功能，发现了每次点击的时候都会刷新一下页面，这样导致我刚刚填报的数据被刷新没了。
为了解决此问题，我们使用JavaScript来实现不刷新页面进行排序的功能，实现效果如下：
2. 思路
通过JavaScript来排序，对页面上的位置进行调整。
3. 操作步骤
3.1 准备模板
1）打开设计器，添加一个新的模板，为该模板创建一个数据集。sql语句为：SELECT * FROM S产品 where 产品id<20
2）将数据集中的数据拖到单元格，并设置样式，如下：
3.2 添加JavaScript
选择 模板>模板web属性>填报页面设置，选择为该模板单独设置，然后添加加载结束事件。如下：
JavaScript代码如下：
//排序的方法，参数为表的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%\webapps\webroot\WEB-INF\reportlets\doc\JS\JS实现排序功能.cpt。
5. 注意事项
上述方案兼容性并不高，有的报表列并没有‘col’属性，且报表ID不一定为‘0’，因此提供一个兼容性更好的解决方案如下：
1）上半部分的排序功能实现代码不变
2）将最下面的一部分代码块替换为：
//获取到页面中表头，设置点击事件
$("#r-0-0 td").bind("click", function() {
//获取到点击的列索引
var index = $(this).parents("tr").find("td").index($(this));
//获取class=page-block的div中的table的id
var tableID = $("div.page-block table").attr("id");
//调用排序的方法，进行传值，0是这个表的id，可以通过F12获取到表的id
sortTable(tableID, index);
});
标签： 暂无标签 编辑/添加标签 如果您认为本文档还有待完善，请编辑文档内容仅供参考，如果你需要获取更多帮助，付费/准付费客户请咨询帆软技术支持
关于技术问题，您还可以前往帆软社区，点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题，可以联系帆软传说哥（qq：1745114201）
