在以往的方式中,我们一般是在数据集sql中,就事先定义好按照指定字段排序;或者通过动态参数,刷新页面进行页面数据排序,此时会导致报表再次触发查询,小数据量的话还好,但是当数据量比较大查询比较久时,这个排序的效率是比较鸡肋的,所以我们可以通过使用JavaScript的方式,实现不触发查询不刷新页面的数据排序,效率可观。
但是这种JavaScript的实现效果有一定的局限性:1、填报报表;2、排序的表头需要放在第一行;3、不可以有冻结行列。所以大家根据自己的情况进行使用,复杂的报表就只能使用旧方法用动态参数实现排序了。
1、报表设计:
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 index = $(this).parents("tr").find("td").index($(this));
//获取class=content-container的div中的table的id,或者sheet-container,唯一即可
var tableID = $("div.content-container table").attr("id");
//调用排序的方法,进行传值,0是这个表的id,可以通过F12获取到表的id
sortTable(tableID, index);
});
3、效果图:
通过如上的操作,就可以完成使用JavaScript实现不触发查询不刷新页面的数据排序,加快排序效率,让排序效果更加理想;
不过还是要注意局限性:1、填报报表;2、排序的表头需要放在第一行;3、不可以有冻结行列。
只能说普通数据报表或者普通填报报表可以用这个方法,复杂的话可能就用不上了。
如果大家在复杂报表中有什么好办法,不触发查询不刷新页面排序的话,希望大家分享一下,相互学习!