用js实现排序，不用刷新页面

剧终

前段日期，客户提了一个比较个性的要求，就是要填报的时候可以对表格进行排序。根据帮助文档，用了扩展后排序这个功能，发现了每次点击的时候都会刷新一下页面，这样导致我刚刚填报的数据被刷新没了。
然后有好几个番薯来问我解决了没，有相同的需求。琢磨了一下午，终于解决了这个问题下面是解决方案。

我用的是填报页面，所以就在填报页面上添加了一个页面加载结束后的事件
点击模版，点击模版web属性，填报页面设置，然后选择为该模版单独设置，然后添加页面加载结束事件。

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");
sortTable('0',a);
});

复制代码

这样就可以实现在填报的中点击表头排序功能了。
注意：$("#r-0-0 td") 我这里是获取了第一个tr下面的所有td  因为我这个页面没有别的东西就是一个表格，如果你的页面有别的展示，需要进行对应的修改。
可以在页面上用F12 来获取到对应的元素
编辑于 2018-1-4 15:33
编辑于 2018-1-4 15:59
编辑于 2018-1-8 10:18