提问
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

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

剧终 社区微信达人实名认证 番薯互助团队 互助砖家
发表于 2018-1-4 15:28 | 显示全部楼层 |取消关注该作者的回复
排序.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  

js实现排序.cpt

9.01 KB, 下载次数: 191

这个是9.0的版本

WorkBook11.cpt

7.15 KB, 下载次数: 175

这个是8.0的版本

评分

参与人数 7F豆 +140 F币 +43 收起 理由
上衫达也战 + 10 默默地点个赞,然后闪人
pengshaojia + 5 骚年,我看好你哦
shadin + 5 太棒了,给你32个赞,么么哒
葛智 + 100 默默地点个赞,然后闪人,牛
影丶 + 10 默默地点个赞,然后闪人
兔子酱 + 43 感谢参与精华帖奖励计划!
郁金香 + 10 太棒了,给你32个赞,么么哒

查看全部评分

此帖共有 674 位番薯登录后查看

已有3人关注本帖

dejatpv注册遇到困难
回复

使用道具 举报

兔子酱 社区微信达人帆软员工 管理员
发表于 2018-1-15 16:36 | 显示全部楼层 |取消关注该作者的回复
根据帆软论坛运营委员最终评分,本篇帖子综合得分43分,具体参见:帆软论坛精华帖奖励计划
恭喜@1176846029,同时也希望更多的番薯积极参与精华帖奖励计划!
  • 评论

回复 支持 反对

使用道具 举报

孤陌 社区微信达人番薯互助团队 互助叫兽
发表于 2018-1-4 15:32 | 显示全部楼层 |取消关注该作者的回复
模块放出来啊
  • 评论

回复 支持 反对

使用道具 举报

剧终 社区微信达人实名认证 番薯互助团队 互助砖家
发表于 2018-1-4 15:33 | 显示全部楼层 |取消关注该作者的回复

忘了 忘了  马上补上
  • 评论

回复 支持 反对

使用道具 举报

瑞城科技-格调 社区微信达人实名认证 渐入佳境(Lv2)
发表于 2018-1-4 15:36 | 显示全部楼层 |取消关注该作者的回复
66666666666666666666
  • 评论

回复 支持 反对

使用道具 举报

瑞城科技-格调 社区微信达人实名认证 渐入佳境(Lv2)
发表于 2018-1-4 15:37 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

星痕 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP1
发表于 2018-1-4 15:37 | 显示全部楼层 |取消关注该作者的回复
大佬666
  • 评论

回复 支持 反对

使用道具 举报

剧终 社区微信达人实名认证 番薯互助团队 互助砖家
发表于 2018-1-4 15:39 | 显示全部楼层 |取消关注该作者的回复
  收起(1)
  • 星痕 星痕
    2018-01-04 15:52 评论
  • 评论

回复 支持 反对

使用道具 举报

剧终 社区微信达人实名认证 番薯互助团队 互助砖家
发表于 2018-1-4 15:40 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

monvzhilei  初出茅庐(Lv3)
发表于 2018-1-4 15:51 | 显示全部楼层 |取消关注该作者的回复
9.0制作。我们8版本的打不开啊
  • 评论

回复 支持 反对

使用道具 举报

剧终 社区微信达人实名认证 番薯互助团队 互助砖家
发表于 2018-1-4 15:52 | 显示全部楼层 |取消关注该作者的回复
monvzhilei 发表于 2018-1-4 15:51
9.0制作。我们8版本的打不开啊

额 这个我考虑不周 我给弄一套8.0版本的模版放上去
  • 评论

回复 支持 反对

使用道具 举报

孤陌 社区微信达人番薯互助团队 互助叫兽
发表于 2018-1-4 15:53 | 显示全部楼层 |取消关注该作者的回复
已提名精华帖,待论坛运营委员会评分后可评为精华帖。帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html
  • 评论

回复 支持 反对

使用道具 举报

郁金香  初出茅庐(Lv3)
发表于 2018-1-4 16:09 来自手机 | 显示全部楼层 |取消关注该作者的回复
大佬666
  • 评论

回复 支持 反对

使用道具 举报

我从山中来 社区微信达人实名认证 番薯互助团队 文档共创团队 互助砖家、助理编辑
发表于 2018-1-4 16:48 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

剧终 社区微信达人实名认证 番薯互助团队 互助砖家
发表于 2018-1-4 16:51 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

剧终 社区微信达人实名认证 番薯互助团队 互助砖家
发表于 2018-1-4 16:51 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

axing 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑
发表于 2018-1-4 20:25 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

flyingsnake 社区微信达人实名认证 番薯互助团队 文档共创团队 互助叫兽、助理编辑
发表于 2018-1-4 23:35 | 显示全部楼层 |取消关注该作者的回复
真心希望能多做些js的东西。我js太渣了。强烈希望能吸收各个方面的知识。
  • 评论

回复 支持 1 反对 0

使用道具 举报

长鱼面 社区微信达人实名认证 渐入佳境(Lv2)
发表于 2018-1-5 13:31 | 显示全部楼层 |取消关注该作者的回复
厉害了,看好你。
  • 评论

回复 支持 反对

使用道具 举报

yiminglian 社区微信达人实名认证 番薯互助团队 互助新人
发表于 2018-1-6 10:48 | 显示全部楼层 |取消关注该作者的回复
建议楼主补充GIF效果图
  • 评论

回复 支持 反对

使用道具 举报

剧终 社区微信达人实名认证 番薯互助团队 互助砖家
发表于 2018-1-6 10:51 来自手机 | 显示全部楼层 |取消关注该作者的回复
yiminglian 发表于 2018-1-6 10:48
建议楼主补充GIF效果图

好的。。。我尽快补上。。。
  • 评论

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

Copyright © 帆软|联系帆软| 联系管理员@兔子酱|免责声明|手机版|帆软社区 ( 苏ICP备14031611号-3 )

GMT+8, 2018-8-15 03:02 , Processed in 1.228298 second(s), 232 queries , Gzip On.

返回顶部 返回列表