提问
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

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

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

这个是9.0的版本

WorkBook11.cpt

7.15 KB, 下载次数: 198

这个是8.0的版本

评分

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

查看全部评分

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

已有4人关注本帖

dejatpvZoey
回复

使用道具 举报

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

回复 支持 反对

使用道具 举报

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

回复 支持 反对

使用道具 举报

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

忘了 忘了  马上补上
  • 评论

回复 支持 反对

使用道具 举报

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

回复 支持 反对

使用道具 举报

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

回复 支持 反对

使用道具 举报

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

回复 支持 反对

使用道具 举报

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

回复 支持 反对

使用道具 举报

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

回复 支持 反对

使用道具 举报

monvzhilei  初出茅庐(Lv3)
发表于 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
  • 评论

回复 支持 反对

使用道具 举报

郁金香  初出茅庐(Lv3)
发表于 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 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

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

回复 支持 反对

使用道具 举报

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

回复 支持 1 反对 0

使用道具 举报

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

回复 支持 反对

使用道具 举报

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

回复 支持 反对

使用道具 举报

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

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

回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2018-12-10 21:31 , Processed in 1.147555 second(s), 223 queries , Gzip On.

返回顶部 返回列表