Layui如何实现数据表格列的左右位置交换

陌晨君_3768

陌晨君_3768

2026-07-11

906人浏览

原创

layui table 原生不支持列拖拽排序,必须手动实现:为 th 添加 draggable 属性,监听 dragstart 记录索引,drop 时更新 cols 数组并调用 table.reload() 同步顺序。

layui table 原生不支持列拖拽,别在 cols 配置里找 dragcol 参数

直接说结论:table.render() 无论加 fixed、unresize 还是自定义 toolbar,都触发不了列顺序拖拽。官方文档没写,源码里也没 dragcol 或 reordercols 这类配置项——这不是你漏了什么,是它压根没实现。

常见错误现象包括:鼠标 hover 表头没手型、th 上绑 dragstart 事件没响应、用 Chrome DevTools 查看 DOM 发现 th 根本没绑定任何拖拽监听器。

原因很简单:Layui 的 table 模块定位是轻量级数据表格,列顺序属于 UI 层交互逻辑,交由上层业务或插件处理。

必须手动更新 table.config.cols[0] 并调用 table.reload()

关键不是拖动视觉效果,而是拖动结束后能正确更新列定义数组。Layui 表格依赖 cols 数组顺序决定列显示顺序,DOM 结构变化不会自动同步到内部列定义。

仅移动 th 元素会导致:

  • 点击列头排序时,实际触发的是原始索引对应的字段,而非当前视觉位置的字段
  • table.cache 中每行数据仍是按原始列顺序存储的数组,tr 内 td 与 cols 错位
  • 导出、打印、缓存等行为全部按旧顺序执行

所以必须做三件事:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • 给每个 th 添加 draggable="true",并在 dragstart 中记录原始索引(如 th.dataset.dragIndex = i)
  • drop 时读取目标 th 的 dataset.dragIndex,对 table.config.cols[0] 执行 splice 移动(注意多级表头需扁平化)
  • 必须调用 table.reload({ cols: [cols] }),否则所有后续操作仍按原始顺序

固定列(fixed: 'left'/fixed: 'right')不能跨区拖拽

涉及 fixed 列时,只允许在同区域内部拖拽。比如左固定列之间可互换顺序,右固定列之间也可互换,但左固定列不能拖到右固定区,反之亦然——跨区移动会破坏布局,且 table.reload() 后 fixed 渲染逻辑会错乱。

配置时要注意:

  • 所有 fixed: 'left' 的列应集中写在 cols 数组前面(彼此相邻),否则渲染顺序和视觉顺序不一致
  • fixed 值必须严格为字符串 'left' 或 'right',大小写敏感,不能写成 True、1 或空字符串
  • 左右固定列总宽度不能超过表格总宽,否则触发横向滚动,固定效果失效

用原生 drag API 实现时,drop 事件容易误判目标位置

dragover 在 thead 上默认不触发,必须显式 e.preventDefault();但直接监听 th 的 drop 又容易因鼠标偏移导致目标索引计算错误。

更稳妥的做法是监听 thead 的 drop,再用 e.target.closest('th') 获取目标元素,并结合 $(e.target.closest('th')).index() 算位置。示例关键片段:

$('thead').on('drop', function(e) {
  e.preventDefault();
  const fromIdx = parseInt(e.target.closest('th').dataset.dragIndex);
  const toIdx = $(e.target.closest('th')).index();
  if (fromIdx === toIdx) return;
<p>const cols = table.config.cols[0];
const col = cols.splice(fromIdx, 1)[0];
if (fromIdx </p><p>注意:如果用了多级表头(即 <code>cols</code> 是二维数组嵌套),上面的 <code>cols[0]</code> 就不够,得先扁平化提取所有叶子节点列再操作——这点最容易被忽略,一拖就乱序。</p>

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2403

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5163

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6230

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5778

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

823

5

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

2023.10.23

3951

6

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

2024.03.06

6748

6

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

2025.12.30

794

19

html5新老标签汇总
html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验,不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签,还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

2025.12.30

694

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.8万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习