文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

layui使用table的sort排序的方法

admin

admin

2024-04-02 17:21

关注

先看看目前layui自带的排序的效果,中文按字典排序这些不是本次讨论的重点,先看看如果存在整数负数还有0出现的情况

layui使用table的sort排序的方法

那么是不是调整一下sort里面的逻辑就可以了让它对负数和0的判断逻辑对了就好了。这个其实也不是这次讨论的重点。

那么重点是,server排序,实际上绝大部分的table的排序不会只是单页面的这样子简单的排序,而是把条件传到后台让后台排序,那么官方给出的一般是监听sort然后reload,把条件传过去,这些都很ok,逻辑都没问题。

but实际得到的效果呢?因为目前table没有区分前台排序还是server排序,在接收到数据之后再渲染表格的时候判断到有initSort,那么会再次将数据排序,然后显示,这就存在一个非常严重的问题!

明明server已经排好序了,为啥还要js里面再sort一下,更严重的是,能保证sort出来的结果跟后台排序的规则出来的结果一致么?拿什么保证呢?

看看下面的代码监听reload的时候然后模拟后台把数据按照负数<0<正数这个规则返回的data,实际reload之后是什么样子吧。

代码:

layui使用table的sort排序的方法

效果

layui使用table的sort排序的方法

可能你会觉得跟前面没啥区别呀,排序的时候还是错了呀,这正是异常的地方。看看我模拟返回的data里面的结构吧

原始的data:

layui使用table的sort排序的方法

模拟的接口返回的data:

layui使用table的sort排序的方法

这个返回之后显然显示的效果跟实际数据的顺序对不上号

原因就是上面说的,实际发后台排序的时候到了渲染的时候还是要走一次前台排序,等于是做了一个画蛇添足的处理。实际如果我们定义成server排序返回的数据就是要显示的顺序了。

绝对不能再走前端sort一下这个逻辑,不然后台排序的意义是什么还有如何保证逻辑跟后台是一致的,一致的话顶多算是一个无用功,但是如果不能保证一致,这个就是一个大事故了。

解决方案:提供用户一个配置项,决定是前台排序还是server排序。修改如下

需要修改的原始代码区域

layui使用table的sort排序的方法

修改之后的对应区域的代码:

layui使用table的sort排序的方法

测试的table在render的时候加入了sortType的配置

layui使用table的sort排序的方法

最后是sort的监听

layui使用table的sort排序的方法

最后的效果

layui使用table的sort排序的方法

关于layui使用table的sort排序的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     436人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     201人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     163人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     242人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     68人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯