Layui表格组件实现行拖拽排序功能详解

2025-05-05 18:01:55作者：傅爽业Veleda

背景概述

在Web开发中，数据表格的交互体验至关重要。Layui作为一款经典的前端UI框架，其表格组件(table)虽然提供了丰富的功能，但原生并不支持直接通过拖拽行来实现排序操作。开发者通常需要通过编辑模式来实现排序，这在用户体验上存在一定局限。

技术实现方案

核心思路

通过引入第三方拖拽库Sortable.js与Layui表格组件相结合，可以实现优雅的行拖拽排序功能。这种方案既保持了Layui的简洁性，又扩展了其交互能力。

实现步骤详解

基础表格渲染 首先使用Layui的table.render方法渲染基础表格，注意在done回调中获取表格DOM元素。
引入Sortable.js 在表格渲染完成后初始化Sortable实例，绑定到表格的tbody元素上。
拖拽事件处理 在Sortable的onEnd事件中，处理行位置变更后的数据更新：

获取当前拖拽行的原始位置(oldIndex)和新位置(newIndex)
从缓存数据中移除原位置的行数据
将行数据插入到新位置
调用table.reloadData方法刷新表格显示

视觉优化 通过设置ghostClass为拖拽过程中的行添加半透明效果，提升用户体验。

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui表格拖拽排序</title>
  <link rel="stylesheet" href="layui.css">
  <style>
    .ghost {
      opacity: .4;
    }
  </style>
</head>
<body>
  <table id="demo-table"></table>
  
  <script src="sortable.min.js"></script>
  <script src="layui.js"></script>
  <script>
    layui.use(['table', 'jquery'], function(){
      var table = layui.table;
      
      table.render({
        elem: '#demo-table',
        cols: [[
          {field: 'id', title: 'ID'},
          {field: 'name', title: '名称'},
          {field: 'value', title: '值'}
        ]],
        data: [
          {id: 1, name: '项目A', value: 100},
          {id: 2, name: '项目B', value: 200},
          {id: 3, name: '项目C', value: 300}
        ],
        done: function(){
          new Sortable(
            this.elem.next().find('tbody')[0], 
            {
              ghostClass: 'ghost',
              onEnd: function(e){
                var cacheData = table.cache['demo-table'];
                var movedRow = cacheData.splice(e.oldIndex, 1)[0];
                cacheData.splice(e.newIndex, 0, movedRow);
                table.reloadData('demo-table', {data: cacheData});
              }
            }
          );
        }
      });
    });
  </script>
</body>
</html>