一、前言
二、大致思路
三、数据表设计
四、后端实现（PHP）
- 1、用户进入页面时，获取用户的个性化设置
- 2、用户点击工具栏时，请求接口，保存数据到数据表
五、前端实现
- 1、打开数据表格右上角的列筛选图标
- 2、使用拖拽列组件 layui-soul-able
- 3、进入页面，表格列加载处理
- 4、点击筛选列，数据保存到数据表
六、页面如何操作

一、前言

大致效果是：当数据表格列太多时，用户只需要展示自己需要看到的比较重要的列，并且列支持拖拽。用户下次登录时，看到的是上次保存的数据。

二、大致思路

1、要实现用户个性化列，数据表是需要的，用于记录用户自定义的列
2、需要自定义显示、隐藏列，数据表格的 toolbar，defaultToolbar 属性可以显示出当前表格的列
3、表格的列支持拖拽，Layui 的组件 soulTable.js 可以实现

三、数据表设计

数据表名为 table_cols_person：数据表格列个性化

数据表字段为：

id int 主键自增ID
user_id int 当前登录的用户ID
href varchar 当前数据表格 Tab标签的的url
cols text 用户自定义列的 json数据
desc text 描述
create_time int 创建时间
modify_time int 更新数据

四、后端实现（PHP）

1、用户进入页面时，获取用户的个性化设置

从 table_cols_person 表中获取当前用户的列数据，并把数据传输到前端页面

//根据当前Tab的url获取用户自定义的列数据
public static function getCols($href)
{$userId = session('user')['id'];$colsTable = new Table('table_cols_person');$info = $colsTable->findOne(['user_id' => $userId, 'href' => $href]);$data = $info ? json_decode($info['cols'], true) : [];return $data;
}//把数据传输到页面：前端载入页
public function index()
{$this->assign('cols', TableService::getCols('/index/user/index.html'));return $this->fetch();
}

2、用户点击工具栏时，请求接口，保存数据到数据表

保存数据到数据表 table_cols_person：根据用户IDuser_id，标签页href确定数据唯一性；如果保存过则编辑，否则添加。

//用户自定义表格列数据处理：添加/编辑
public function setCols($data)
{$userId = session('user')['id'];//追加用户ID$data['user_id'] = $userId;//唯一性校验$colsTable = new Table('table_cols_person');$info = $colsTable->findOne(['user_id' => $userId, 'href' => $data['href']]);if ($info) { //如果存在，则修改数据$data['id'] = $info['id'];$colsTable->updateData($data);} else { //不存在，则添加数据$colsTable->insertData($data);}return "success";
}//数据接收方法入口：用户个性化设置
public function setCols() {$param = input('post.'); //href, cols, desc$data = TableService::setCols($param);$result =  ['code' => 0,'msg' => 'success','data' => $data];return json($result, 200);
}

五、前端实现

1、打开数据表格右上角的列筛选图标

设置table的属性即可~

,toolbar: true
,defaultToolbar: ['filter'] //还可设置为 'print', 'exports'

2、使用拖拽列组件 layui-soul-able

使用插件 layui-soul-able，使用方法为：先引用，然后在表格的done()中加一行soulTable.render(this); //表格列拖拽插件即可，详情请移步 >>> Layui layui-soul-able 组件表格列进行拖拽

3、进入页面，表格列加载处理

首次进入页面，表格的列应该是默认的，但是如果用户自定义了列，就使用用户自定义的列，代码如下：

let cols = {:json_encode($cols)}; //接收后台传过来的用户自定义列//定义默认的列
let defaultCols = [[{field: 'username', width: 180, title: '用户名'},{field: 'email', width: 130, title: '用户邮箱'},{field: 'source_text', width: 90, title: '用户来源'},{field: 'create_time', width: 120, title: '创建时间'},{title: '操作', width: 140, align: 'center', fixed: 'right', toolbar: '#table-useroper-oper'}
]];//写一个方法，对比默认的列 和 自定义的列，以默认的列为基准，得出最终的结果
//注意：如果用户自定义了列，为什么不直接使用自定义的列呢？因为如果默认列新增了，或者属性（height,sort）等修改了，自定义的列是体现不出来的
//所以需要以默认列为基准，对比自定义的列，得出最终的结果
let tableCols = (cols.length == 0) ? defaultCols : getTableCols(defaultCols, cols);//把列字段设置到 table.render({})中
//用户列表
let tableIns = table.render({elem: '#LAY-user-list-table',url: '/index/user/list',where: where,cols: tableCols,toolbar: true, //开启工具行defaultToolbar: ['filter'], //自定义只显示列数据，还可设置为：'filter', 'print', 'exports'text: {none: '暂无数据'},page: true,parseData: function (result) {return {code: result.code,msg: result.msg,count: result.data.count,data: result.data.data}},done: function (res, curr, count) {soulTable.render(this); //表格列拖拽插件}
});//处理用户自定义的列和默认列：表格列数据处理：根据默认的列，获取用户自定义的列
function getTableCols(defaultCols, personCols)
{//循环获取用户已自定义的列数据（勾选框、操作栏 等特殊列 键名为：undefined）let setTableColsMap = {};$.each(personCols[0], function(index, value) {setTableColsMap[value.field] = value.hide;});//以默认列为基准：处理数据：如果field为undefined（针对特殊列：勾选框，操作栏） 或者 setTableColsMap属性存在并且hide为false则说明用户已经设置了该列显示，需要追加；否则不追加（即隐藏列）let result = []; //自定义结果数组$.each(defaultCols[0], function (index, value) {let field = value.field;if ((field == undefined) || (setTableColsMap.hasOwnProperty(field) && setTableColsMap[field] == false)) {result.push(value);} else {value.hide = true; //需要隐藏的列，把hide属性设置为true即可result.push(value);}});return [result]; //返回列结果数据
}

4、点击筛选列，数据保存到数据表

点击表格右上角的 筛选列图标，post 请求接口，把数据存到数据表

var tabHref = $(window.parent.document).find('ul#LAY_app_tabsheader').find('li.layui-this').attr('lay-attr');  //当前标签页的url地址
setCols('LAY-user-list-table', tabHref, '会员列表);//setCols方法具体实现
//监听表头工具栏事件，保存数据到数据表
function setCols (tableLayFilter, tabHref, desc)
{var clickTimes = 1; //点击次数，如果大于1次，则请求接口保存数据（这里还可以再优化优化）//监听表头工具栏事件table.on('toolbar(' + tableLayFilter + ')', function(obj) {// console.log(obj.event, obj); //打印其他的列：LAYTABLE_EXPORT 导出；LAYTABLE_PRINT 打印；LAYTABLE_COLS 筛选列switch (obj.event) {case 'LAYTABLE_COLS': //监听筛选列点击事件，传输数据到后台保存到数据表if (clickTimes > 1) {let field = {href: tabHref,cols: JSON.stringify(obj.config.cols),desc: desc,};$.ajax({url: '/user/setCols',data: field,type: 'post',success: function(result) {layer.msg(result);},error: function(result) {layer.alert(result.error.msg);}})}clickTimes++;break;}})
}

六、页面如何操作

自定义列：点击表格右上角的筛选图标，取消不需要的列，再次点击筛选图标，就保存数据了（当点击次数大于1的时候每次都会保存：这里可以再优化优化）
拖拽列：鼠标左键长按点击列的标题名，即可拖动列的位置

Layui 数据表格：用户个性化定制列（拖拽，隐藏）相关推荐

解决Layui数据表格无数据最后列被顶出去的问题
解决Layui数据表格无数据最后列被顶出去的问题参考文章: (1)解决Layui数据表格无数据最后列被顶出去的问题 (2)https://www.cnblogs.com/Caoxdong/p/963 ...
layui 鼠标移入变为小手_如何在 LayUI 数据表格的列元素上，鼠标悬浮，显示所有文字内容（修改源码）...
文中使用的LayUI版本:layui-v2.5.5 问题描述: 最近参与开发了问题分析: 要实现鼠标悬浮显示所有内容,一般采用的都是给对应元素上添加 title 属性,这样当鼠标悬浮在对应列的时候, ...
layui数据表格增加序号列（第二页从1开始 or 接上一页序号开始）
layui数据表格增加序号列: 一.分页模式下第二页从1开始 1.在table.render()方法中,加 {title: '序号', align: "center",temple ...
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
5. Layui数据表格的快速使用
飘向天边,我们慢慢明白,有些告别,就是最后一面.--<云边有个小卖部> Layui数据表格的快速使用 1.什么是数据表格 2.方法渲染 3.自动渲染 4.把静态表格转换为动态 1.什么是数 ...
layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...
LayUI数据表格的使用指南
LayUI是现在比较流行的一款前端框架,数据表格也是后台管理中很长用到的工具了. 最近做项目就用到了,项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮.之后就写了一 ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
Layui数据表格的引用
对于一些编程插件的引用,相信大多数的编程人员都不会感觉到陌生,因为在对程序开发和项目开发的过程中往往都会需要引用到插件,那么至于插件呢,也有很多种,比如: bootstrap jquery layui ...
layui数据表格中包含图片的处理方式
layui数据表格中包含图片时,图片可能显示不全. 搜索后网上的解决方法: <style>.layui-table-cell {height: 100%;max-width: 100%;} ...

Layui 数据表格：用户个性化定制列（拖拽，隐藏）

一、前言

二、大致思路

三、数据表设计

四、后端实现（PHP）

1、用户进入页面时，获取用户的个性化设置

2、用户点击工具栏时，请求接口，保存数据到数据表

五、前端实现

1、打开数据表格右上角的列筛选图标

2、使用拖拽列组件 layui-soul-able

3、进入页面，表格列加载处理

4、点击筛选列，数据保存到数据表

六、页面如何操作

Layui 数据表格：用户个性化定制列（拖拽，隐藏）相关推荐

最新文章

热门文章

Layui 数据表格：用户个性化定制列（拖拽，隐藏）

一、前言

二、大致思路

三、数据表设计

四、后端实现（PHP）

1、用户进入页面时，获取用户的个性化设置

2、用户点击工具栏时，请求接口，保存数据到数据表

五、前端实现

1、打开数据表格右上角的列筛选图标

2、使用拖拽列组件 layui-soul-able

3、进入页面，表格列加载处理

4、点击 筛选列，数据保存到数据表

六、页面如何操作

Layui 数据表格：用户个性化定制列（拖拽，隐藏）相关推荐

最新文章

热门文章

4、点击筛选列，数据保存到数据表