layui中table的sort排序介绍

layui中table的sort排序介绍

今天来谈谈table sort的那点事。预告一下,目的是做到前台排序还有服务器排序区分开,目前的table的分页实际是比较“乱”的,相信很多用的有一段时间的特别是做server排序的同学都会多多少少遇到不正常的情况。

推荐:layui教程

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

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

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

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

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

看看下面的代码监听reload的时候然后模拟后台把数据按照负数

代码:

1.jpg效果

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

原始的data:

2.jpg模拟的接口返回的data:

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

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

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

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

需要修改的原始代码区域

4.jpg

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

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

6.JPG最后是sort的监听

7.jpg最后的效果

3.gif完整的测试代码还有对table.js的对应修改的地址: https://pan.baidu.com/s/1OjwwVmjy02wRQ0rT1euLlQ

以上就是layui中table的sort排序介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3006028.html

(0)
上一篇 2025年3月13日 01:06:56
下一篇 2025年3月13日 01:07:07

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • webpack打包layui实现步骤

    总的来说打包webpack打包layui要解决几个问题: 1、解决引入layui-src报错的问题 2、layui插件的打包方式 3、解决打包后样式不生效的问题 解决上面几个问题,基本就能成功打包了 首先安装layui(推荐:layui教程…

    2025年3月13日
    000
  • layui table模块对表格数据处理后的排序问题

    使用layui table过程中,将某一列的数据格式进行转换,或者将0/1状态改为是/否,或者将数字改为星星评分显示的时候都会遇到一个问题,我的表格数据转换成其他形式,同时设置了sort:true,此时,点击排序按钮之后,该列数据就消失了。…

    2025年3月13日
    200
  • 数据表格自动分配列宽的一种实现方法

    layui数据表格自动分配列宽效果图: 适用场景:主要是解决窗口大小改变后表格尾列出现空白和滚动条的问题-窗口由小变大,出现表格尾列出现空白 窗口由大变小,出现横向滚动条 重新加载框架后恢复正常 使用前提: -每一列的表头必须全部设置min…

    2025年3月13日 编程技术
    200
  • 采用layui的美化时保留select里面的change事件

    很多小伙伴遇到美化了之后里面的change事件不触发了这个问题,以前的建议就是既然使用layui的组件,就充分利用他,他对应的也提供了表单的select事件,但是如果这些节点以前就存在了后来用了layui岂不是都要去把对应的事件搬过来。 推…

    2025年3月13日 编程技术
    200
  • 基于layui的步骤条面板(附代码)

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,下面我们来看一下基于layui的步骤条面板实现。 html元素             条目1        条目2   …

    2025年3月13日
    200
  • LayUI第三方插件开发规范详解

    本规范一共四件事:1、规定插件的目录使用,2、规定插件css样式的前缀,3、规定插件的统一封装,4、规定插件的引入方式。 一、目录篇 先来一个目录图 目录结构说明(结合图片理解)mod_name代表插件名,author代表第三方作者 lay…

    2025年3月13日 编程技术
    200
  • Layui table组件相关介绍

    出现的问题: 1、使用 Layui 官方提供的 【转换静态表格】 方式初始化加载时报 id 找不到的错误(自己的锅) 2、传递参数问题 使用的 table 加载刷新方案 有一个页面,左侧是一个 tree,右侧是一个 table,默认 tab…

    2025年3月13日
    200
  • layui入门总结

    获得 Layui 你可以在官网首页下载到 Layui 的最新版,也可以通过 GitHub 得到Layui的开源包。目前只同步维护这两处资源渠道。一般如果你是用于实际项目,推荐你直接从官网下载。layui构建后的结构(也就是你获得的包) ├─…

    2025年3月13日
    200
  • layui复选框使用介绍

    layui复选框: 效果图 layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样 layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置 html代码使用了jfi…

    2025年3月13日
    200
  • layui事件监听使用

    在使用layui的form表单做验证提交的时候,如果结合vue,或者是三级联动的时候,就需要做事件监听了。 具体语法: form.on(‘event(过滤器值)’, callback); 登录后复制 可以用于监听:select,checkb…

    2025年3月13日
    200

发表回复

登录后才能评论