Layui如何实现表格行的拖拽换行排序（结合Sortable.js）-Layui教程-PHP中文网

直接用 Sortable.js 拖拽 Layui 表格行会失效，因 Layui 启用虚拟滚动、DOM 动态复用，拖拽仅改 DOM 未同步 data 数组，导致排序错乱、索引丢失及报错。

为什么直接用 `Sortable.js` 拖拽 Layui 表格行会失效？

layui 的表格（layui.table）默认启用虚拟滚动、复用 dom 节点，且行元素（.layui-table-body tbody tr）不是原始渲染的静态节点，而是由 layui 动态管理的。直接对 tbody 初始化 sortable，拖拽时会触发 layui 内部的重绘逻辑，导致排序错乱、索引丢失、甚至报错 "cannot read property 'setattribute' of null"。

根本原因在于：Layui 表格的 DOM 结构和数据模型是分离的，拖拽操作必须同步更新 data 数组，不能只改 DOM。

不要对 .layui-table-body tbody 直接初始化 Sortable
必须监听拖拽结束事件，在回调中手动更新表格数据源（table.config.data 或你维护的原始数组）
拖拽目标容器需避开 Layui 自动管理区域，推荐用 .layui-table-main（即整个表格主体区）或自定义 tbody 容器（需禁用 Layui 虚拟滚动）

如何正确绑定 `Sortable` 到 Layui 表格并同步数据？

核心思路：绕过 Layui 的内部 tbody，用一个「纯净」的 tbody 容器承载行，并关闭 Layui 的 scrollbar 和 height（避免虚拟滚动）。然后用 Sortable 管理该容器，再在 onEnd 中重排你的数据源，并调用 table.reload()。

实操步骤：

初始化表格时设置 height: 'auto' 和 limit: 1000（或足够大），禁用滚动条和分页，确保所有行真实渲染
给表格容器加 ID，如 id="sortTable"；在 done 回调里定位到 $('#sortTable .layui-table-body tbody')
用 Sortable.create(el, { ... }) 绑定，关键配置：handle: '.drag-handler'（推荐加拖拽手柄列，避免误触文本）、animation: 150、ghostClass: 'sortable-ghost'
在 onEnd 回调中：获取当前 el.children 的顺序，映射回原始数据数组的索引，重新排列你的数据源（不是 DOM！）
调用 table.reload('yourTableId', { data: newData }) 刷新表格

示例关键片段：

php版微信js-sdk支付接口类

下载

table.render({
  elem: '#sortTable',
  height: 'auto',
  limit: 9999,
  cols: [[
    { type: 'numbers', width: 50 },
    { field: 'title', title: '标题' },
    { title: '操作', width: 80, templet: '<div class="drag-handler">≡</div>' }
  ]],
  data: myDataList, // 你维护的可变数组
  done: function(res, curr, count){
    const tbody = document.querySelector('#sortTable .layui-table-body tbody');
    new Sortable(tbody, {
      handle: '.drag-handler',
      animation: 150,
      onEnd: function(evt) {
        const newIndex = evt.newIndex;
        const oldIndex = evt.oldIndex;
        // 在 myDataList 中执行数组移动（非 splice 移位，要用 splice + insert）
        const item = myDataList.splice(oldIndex, 1)[0];
        myDataList.splice(newIndex, 0, item);
        // 重载表格，不传 page / where，仅更新 data
        table.reload('sortTable', { data: myDataList });
      }
    });
  }
});

拖拽后序号列（`type: 'numbers'`）不更新怎么办？

Layui 的 type: 'numbers' 是渲染时按当前页顺序生成的静态文本，table.reload() 不会自动重算它——因为它是“伪序号”，不绑定数据字段。如果你依赖序号反映真实排序位置，必须显式处理。

方案一（推荐）：去掉 type: 'numbers'，改用真实字段，比如在数据中加 sortIndex 字段，表格列定义为 { field: 'sortIndex', title: '序号' }，每次拖拽后遍历 myDataList 重赋值：myDataList.forEach((d, i) => d.sortIndex = i + 1)
方案二：用 CSS 计数器模拟，但仅适用于展示，无法导出或参与搜索
切勿尝试用 JS 遍历 DOM 修改 .layui-table-number 文本——Layui 下次 reload 会覆盖