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

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




我用的是填报页面,所以就在填报页面上添加了一个页面加载结束后的事件
点击模版,点击模版web属性,填报页面设置,然后选择为该模版单独设置,然后添加页面加载结束事件。
  1. function sortTable(table, idx) {
  2.   var otable = document.getElementById(table),
  3.     otody = otable.tBodies[0],
  4.     otr = otody.rows,
  5.     tarr = [];
  6.   for (var i = 1; i < otr.length; i++) {
  7.     tarr[i - 1] = otr[i];
  8.   };
  9.   if (otody.sortCol == idx) {
  10.     tarr.reverse();
  11.   } else {
  12.     tarr.sort(function (tr1, tr2) {
  13.       var value1 = tr1.cells[idx].innerHTML;
  14.       var value2 = tr2.cells[idx].innerHTML;
  15.       if (!isNaN(value1) && !isNaN(value2)) {
  16.         return value1 - value2;
  17.       } else {
  18.         return value1.localeCompare(value2);
  19.       }
  20.     })
  21.   }
  22.   var fragment = document.createDocumentFragment();
  23.   for (var i = 0; i < tarr.length; i++) {
  24.     fragment.appendChild(tarr[i]);
  25.   };
  26.   otody.appendChild(fragment);
  27.   otody.sortCol = idx;
  28. }



  29. $("#r-0-0 td").bind("click",function(){
  30.         var a=$(this).attr("col");
  31.         sortTable('0',a);
  32.                 });
复制代码

这样就可以实现在填报的中点击表头排序功能了。
注意:$("#r-0-0 td") 我这里是获取了第一个tr下面的所有td  因为我这个页面没有别的东西 就是一个表格,如果你的页面有别的展示,需要进行对应的修改。
可以在页面上用F12 来获取到对应的元素
编辑于 2018-1-4 15:33  
编辑于 2018-1-4 15:59  
编辑于 2018-1-8 10:18  
参与人数 +8 F豆 +141 F币 +43 理由
hivenson + 1
上衫达也战 + 10 默默地点个赞,然后闪人
pengshaojia + 5 骚年,我看好你哦
shadin + 5 太棒了,给你32个赞,么么哒
葛智 + 100 默默地点个赞,然后闪人,牛
影丶 + 10 默默地点个赞,然后闪人
兔子酱 + 43 感谢参与精华帖奖励计划!
郁金香 + 10 太棒了,给你32个赞,么么哒

查看全部评分

发表于 2018-1-15 16:36:59
根据帆软论坛运营委员最终评分,本篇帖子综合得分43分,具体参见:帆软论坛精华帖奖励计划
恭喜@1176846029,同时也希望更多的番薯积极参与精华帖奖励计划!
发表于 2018-1-4 15:32:34
模块放出来啊
发表于 2018-1-4 15:33:04

忘了 忘了  马上补上
发表于 2018-1-4 15:36:55
66666666666666666666
发表于 2018-1-4 15:37:13
发表于 2018-1-4 15:37:57
大佬666
发表于 2018-1-4 15:39:58
发表于 2018-1-4 15:40:12
发表于 2018-1-4 15:51:52
9.0制作。我们8版本的打不开啊
发表于 2018-1-4 15:52:30
monvzhilei 发表于 2018-1-4 15:51
9.0制作。我们8版本的打不开啊

额 这个我考虑不周 我给弄一套8.0版本的模版放上去
发表于 2018-1-4 15:53:42
已提名精华帖,待论坛运营委员会评分后可评为精华帖。帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html
发表于 2018-1-4 16:09:57
来自手机
大佬666
发表于 2018-1-4 16:48:27
发表于 2018-1-4 16:51:17
发表于 2018-1-4 16:51:37
发表于 2018-1-4 20:25:35
发表于 2018-1-4 23:35:38
真心希望能多做些js的东西。我js太渣了。强烈希望能吸收各个方面的知识。
发表于 2018-1-5 13:31:14
厉害了,看好你。
发表于 2018-1-6 10:48:13
建议楼主补充GIF效果图
发表于 2018-1-6 10:51:53
来自手机
yiminglian 发表于 2018-1-6 10:48
建议楼主补充GIF效果图

好的。。。我尽快补上。。。
发表于 2018-1-13 11:10:39
超酷!!
发表于 2018-1-13 11:28:40
超酷!
发表于 2018-1-17 21:46:01
666666,实现了很实际的需求
发表于 2018-1-18 10:27:39
贼6
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

62回帖数 12关注人数 32027浏览人数
最后回复于:2023-2-20 10:14

返回顶部 返回列表