关于Layui Table自定义列（列拖动）

原创 于 2025-05-16 18:07:24 发布 · 288 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#layui #前端 #javascript

代码示例 

如果soulTable.JS报错

则使用注释的代码

Hiraeth-
关注
【Layui】------ layui实现table表格拖拽行、列位置的示例代码
皮皮冰要做大神
04-03 2688
【代码】【Layui】------ layui实现table表格拖拽行、列位置的示例代码。
Layui 数据表格：用户个性化定制列（拖拽，隐藏）
夏已微凉、
07-24 1939
一、前言二、大致思路三、数据表设计四、后端实现1、用户进入页面时，获取用户的个性化设置2、用户点击工具栏时，请求接口，保存数据到数据表五、前端实现1、打开表格的列显示2、拖拽列3、进入页面，表格列加载处理4、点击 筛选列，数据保存到数据表六、具体操作 一、前言 大致效果是：当数据表格列太多时，用户只需要展示自己需要看到的比较重要的列，并且列支持拖拽。用户下次登录时，看到的是上次保存的数据。 二、大致思路 1、要实现用户个性化列，数据表是需要的，用于记录用户自定义的列 2、需要自定义显示、隐藏列，数据.
layui实现表格行拖拽，列拖拽等表格操作 -----layui-soul-able
qq_36785719的博客
07-03 8400
功能介绍 表头筛选、自定义条件（支持前端筛选、后台筛选） 拖动列调整顺序、隐藏显示列 excel导出（根据筛选条件和列顺序导出） 子表（表中表、无限层级、子表同样支持前3个功能） 拖动行 右击快捷菜单 合计栏支持固定列 双击自适应列宽 右侧固定列 列宽拖动改到单元格左侧 固定列支持滚动 非常方便的一个工具 跳转至layui-soul-table说明文档 ...
elementui table列的拖拽功能
11-08
自己使用，该附件里的代码已经实现了使用vue 及elementui的table列的拖动功能。
JQuery_可拖曳动态添加表格、动态排序
12-18
JQuery_可拖曳动态添加表格、动态排序
基于jquery可拖动表格
05-22
基于jquery可拖动表格 jquery 表格行可拖动 源码 使用说明
layui-soul-table:layui-table 表头筛选、列顺序调整、列快速隐藏、excel导出等
05-05
给 layui-table 注入点灵魂 当前layui版本 v2.5.6 在线demo及文档： 国内下载地址: 扩展功能 表头筛选、自定义条件（支持前端筛选、后台筛选介绍请看 ） 拖动列调整顺序、隐藏显示列 excel导出（根据筛选条件和列...
Layui快速入门之第七节 表格
qq_61313896的博客
09-14 2361
Layui快速入门之第七节 表格
Layui表单table渲染+条件查询
是个非常热爱生活、乐观、奋斗、努力的逗比青年
07-06 8299
🌼使用Layui的table组件进行表格渲染有以下几个优点：简单易用：Layui的table组件提供了简洁的API和丰富的配置选项，使得表格渲染变得简单易用。只需要设置好表格的数据源和列定义，就可以快速渲染出一个功能齐全的表格。支持分页：Layui的table组件内置了分页功能，可以轻松地实现对大量数据的分页显示。通过设置合适的参数，可以控制每页显示的数据量、当前页码、总页数等。支持排序和筛选：Layui的table组件支持对表格数据进行排序和筛选。
layui表格 可搜索过滤 可分页
03-25
layui表格 可搜索过滤 可分页layui表格
JQ JS javascript layui UI组件 元素 div 拖动插件
04-18
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件
layui-table组件使用记录
梁白开的博客
10-09 760
layui插件中的table组件
Layui - 数据表格 table
weixin_42361858的博客
12-03 4244
官网文档：https://www.layui.com/doc/modules/table.html 模块： layui.use('table', function(){ var table = layui.table; }); 目录 简单表格 参数 开放方法 方法 - 事件监听 简单表格 <!-- 注意class、layui参数、方法 --> <!-- 方法渲染 --> <table class="layui-table" id="simple"&gt.
layui 数据表格 sort排序，filter过滤——soulTable
qq_36636312的博客
09-04 3956
1，效果图 2，页面代码 <div class="fp-table" style="margin-left:0.5%;width: 86%"> <table id="fapztable" lay-filter="faptool" style="margin-bottom: 0px;"></table> </div> 3，js代码 //引入扩展组件 layui.config({ base: '/static
layui实现数据表格table的搜索功能
热门推荐
changyana的博客
01-30 3万+
layui根据特定信息对表格进行搜索并显示效果实现html部分js部分注意总结 效果 先放效果图 此处根据“角色名称”进行搜索，得到效果 实现 html部分 此处注意！！需要要为input、table里边加上“id”属性，在js部分需要特定进行获取。 <div class="layuimini-container"> <div class="layuimini-main"> <fieldset class="table-search-fieldset
00029-layui 表格table 操作列支持下拉按钮(菜单)，多级下拉按钮(菜单)，dropdown
09-15 3875
用到dropdown 控件： 地址： http://test.microanswer.cn/page/dropdown.html 引入css,js: <link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/dropdown.css" media="all"> layui.config({ base: '${ctxLayui}/layuiadmin/' }).extend({ index: 'lib/index' }).us
layui数据表格操作下拉
admin_zjy的博客
09-23 1239
http://test.microanswer.cn/page/dropdown.html layui数据表格操作下拉
layui table 行上下拖拽
最新发布
02-13
Layui 的 Table 模块本身并不直接支持行的上下拖拽功能，但是我们可以通过结合其他插件或自定义 JavaScript 来实现这一需求。 ### 实现思路 1. **引入必要的库** - 首先需要确保已经加载了 Layui 和相关的 CSS 文件。 - 可以借助 jQuery UI 中的 `sortable` 插件来轻松地添加拖拽排序的功能。如果你不想依赖额外的库，也可以通过原生 JS 或者其他的轻量级拖放库如 Sortable.js 来完成。 2. **初始化表格数据** 使用 Layui 提供的标准 API 初始化 table 组件，并准备好你要展示的数据源。 3. **增强 DOM 元素使其可拖动** 4. **监听拖拽事件并更新模型** 5. **提交更改（如果有必要的话）** #### 示例代码片段： ```html <!-- 引入layui --> <link rel="stylesheet" href="/path/to/layui/css/layui.css"> <script src="/path/to/layui/layui.js"></script> <!-- 如果使用jQuery UI sortable --> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <table id="demo" lay-filter="test"></table> <script> layui.use(['table'], function(){ var table = layui.table; // 渲染表格实例... table.render({ elem: '#demo' ,url:'/data.json' // 数据接口 ,cols: [[ // 表头配置略... {field:'id', title:'ID'}, {field:'name', title:'名称'} // ...更多列字段 ]] ,page: true // 开启分页 }); }); // 让每一行都成为一个可以拖拽的对象 (这里假设你用了 jQuery UI) $( "#demo tbody tr" ).sortable({ axis: "y", // 设置只允许垂直方向移动 update: function( event, ui ) { console.log('位置改变后的回调'); // 这里你可以获取新的顺序然后保存到服务器端 } }).disableSelection(); </script> ``` 请注意上述示例中关于让每行成为可拖拽项的部分是以 jQuery UI 为例写的简化版；实际应用时你需要根据所选工具的具体API做适当调整。 另外考虑到性能因素，在大型列表上实施这种交互可能会带来一些挑战，因此建议对涉及大量数据的情况采取优化措施，例如懒加载、虚拟滚动等技术。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值