Layui树形列表，Layui树形菜单列表

Layui树形列表

比较简单请耐心查看

效果图

实现方式
首先引入组件（源码放到最后面了）

layui.config({base: $projectPath+"/js/util/layui-module/"
}).extend({treeSelect: "treeSelect",treeTable: "treeTable",
});

js 中

var layer;
var form;
var table;
var treeTable;
var interUrl = {select: $projectPath+'/sys/menu/selecTreeTable',
}
/*** layui 组件引入* @returns*/
layui.use([ 'layer', 'form', 'table', "treeTable"], function() {layer = layui.layer;form = layui.form;table = layui.table;treeTable = layui.treeTable;// 执行一个 table 实例var treeTablParam = treeTable.render({elem : '#data_table',id : 'data_table',url : interUrl.select, height:'full-120',page: false,toolbar : '#toolberLeft',treeColIndex: 1,// 树形图标显示在第几列treeSpid: 0,// 最上级的父级idtreeIdName: 'mid',// id字段的名称treePidName: 'parentId',// pid字段的名称treeDefaultClose: false,// 是否默认折叠treeLinkage: true,// 父级展开时是否自动展开所有子级cols : [[ // 表头{type : 'checkbox', fixed : 'left', hide: true},  {field : 'mname', title : '菜单名称', align : 'left', width: '150'},{field : 'mid', title : 'ID',  align : 'center', width: '80', hide: true}, {field : 'code', title : '编码', align : 'center', width: '100',}, {field : 'isProject', title : '权限', align : 'center', width: '100', templet: (d) => getDictText("is_project",d.isProject)}, {field : 'url', title : '跳转路径', align : 'center', width: '300'}, {field : 'iconCls', title : '图标样式', align : 'center', width: '150',templet:function(res){return ''+res.iconCls+'';}},{title : '操作', align : 'center', width: '300', toolbar : '#toolRow'} // fixed : 'right',]]});// 头部左侧事件table.on('toolbar(data_table)',  function(obj) {if (obj.event === 'search') {select();// treeTablParam = treeTable.render(treeTablParam); // 重载}else if(obj.event === 'add'){}else if(obj.event === 'expand'){treeTable.expandAll('#data_table');}else if(obj.event === 'fold'){treeTable.foldAll('#data_table');}})// 监听行工具事件table.on('tool(data_table)', function(obj) {var data = obj.data;if (obj.event === 'add') {}else if (obj.event === 'del') {} else if (obj.event === 'edit') {}else if (obj.event === 'detail') {}});})
function select() {var name = $("#serarch_name").val();var searchCount = 0;if (name) {$('.layui-table').find('tbody tr td').each(function() {$(this).css('background-color', 'transparent');var text = $(this).text();if (text.indexOf(name) != -1) {$(this).css('background-color', '#e0f1c5');searchCount++;}});if (searchCount == 0) {layer.msg("无匹配");}} else {layer.msg("请输入搜索内容");}
}

html 中

<table id="data_table" class="layui-hide" lay-filter="data_table">table><script type="text/html" id="toolberLeft"><div class="layui-form"><a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="expand" style="margin-left: 5px;" title="展开"><i class="layui-icon">&#xe624;</i></a><a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="fold" style="margin-left: 5px;" title="折叠"><i class="layui-icon">&#xe67e;</i></a><div class="layui-input-inline"><input type="text" name="name" class="layui-input" id="serarch_name" style="height: 33px;" placeholder="请输入名称关键字"></div><div class="layui-inline" style="text-align: center;"><a class="layui-btn layui-btn-sm" lay-event="search" style="margin-left: 5px;"><i class="layui-icon">&#xe615;</i>搜索</a></div><a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add" style="margin-left: 5px;"><i class="layui-icon">&#xe654;</i>新增</a></div>
script><script type="text/html" id="toolRow"><a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="add">添加下降菜单</a><a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail">查看</a><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
script>

java 中（serviceImpl层）

	/*** 获取树形表格* @param m* @return*/public Result<?> selecTreeTable(MenuEntity m) {List<MenuEntityResp> list = dao.selectTreeAll();// 一次性查出所有// 这里的Result是分页的数据和总数，我这里直接查询所有并没有分页return Result.success(list, (long)list.size());}

需要去除下面这个图标的话

/** 隐藏树形表格的图标*/
.treeTable-icon .layui-icon-layer{display: none;
}

效果如下

treetable.css和treeTable.js代码（组件源码）

treetable.css

.treeTable-empty {width: 20px;display: inline-block;
}.treeTable-icon {cursor: pointer;
}.treeTable-icon .layui-icon-triangle-d:before {content: "\e623";
}.treeTable-icon.open .layui-icon-triangle-d:before {content: "\e625";background-color: transparent;
}

treeTable.js

layui.define(['layer', 'table'], function (exports) {var $ = layui.jquery;var layer = layui.layer;var table = layui.table;var treetable = {// 渲染树形表格render: function (param) {// 检查参数if (!treetable.checkParam(param)) {return;}// 复制一个新对象var newParam = $.extend(true,{},param) ;// 获取数据if (!param.where && param.data) {treetable.init(param, param.data);} else {$.getJSON(param.url, param.where, function (res) {treetable.init(param, res.data);});}return newParam;},// 渲染表格init: function (param, data) {var mData = [];var doneCallback = param.done;var tNodes = data;// 补上id和pid字段for (var i = 0; i < tNodes.length; i++) {var tt = tNodes[i];if (!tt.id) {if (!param.treeIdName) {layer.msg('参数treeIdName不能为空', {icon: 5});return;}tt.id = tt[param.treeIdName];}if (!tt.pid) {if (!param.treePidName) {layer.msg('参数treePidName不能为空', {icon: 5});return;}tt.pid = tt[param.treePidName];}}// 对数据进行排序var sort = function (s_pid, data) {for (var i = 0; i < data.length; i++) {if (data[i].pid == s_pid) {var len = mData.length;if (len > 0 && mData[len - 1].id == s_pid) {mData[len - 1].isParent = true;}mData.push(data[i]);sort(data[i].id, data);}}};sort(param.treeSpid, tNodes);if(mData.length < 1){mData = tNodes;}// 重写参数param.url = undefined;param.data = mData;param.page = {count: param.data.length,limit: param.data.length};param.cols[0][param.treeColIndex].templet = function (d) {var mId = d.id;var mPid = d.pid;var isDir = d.isParent;var emptyNum = treetable.getEmptyNum(mPid, mData);var iconHtml = '';for (var i = 0; i < emptyNum; i++) {iconHtml += '';}if (isDir) {iconHtml += ' ';} else {iconHtml += '';}iconHtml += '  ';var ttype = isDir ? 'dir' : 'file';var vg = '+ mId + '" lay-tpid="' + mPid + '" lay-ttype="' + ttype + '">';return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + ''};param.done = function (res, curr, count) {$(param.elem).next().addClass('treeTable');$('.treeTable .layui-table-page').css('display', 'none');$(param.elem).next().attr('treeLinkage', param.treeLinkage);// 绑定事件换成对body绑定/*$('.treeTable .treeTable-icon').click(function () {treetable.toggleRows($(this), param.treeLinkage);});*/if (param.treeDefaultClose) {treetable.foldAll(param.elem);}if (doneCallback) {doneCallback(res, curr, count);}};// 渲染表格table.render(param);},// 计算缩进的数量getEmptyNum: function (pid, data) {var num = 0;if (!pid) {return num;}var tPid;for (var i = 0; i < data.length; i++) {if (pid == data[i].id) {num += 1;tPid = data[i].pid;break;}}return num + treetable.getEmptyNum(tPid, data);},// 展开/折叠行toggleRows: function ($dom, linkage) {var type = $dom.attr('lay-ttype');if ('file' == type) {return;}var mId = $dom.attr('lay-tid');var isOpen = $dom.hasClass('open');if (isOpen) {$dom.removeClass('open');} else {$dom.addClass('open');}$dom.closest('tbody').find('tr').each(function () {var $ti = $(this).find('.treeTable-icon');var pid = $ti.attr('lay-tpid');var ttype = $ti.attr('lay-ttype');var tOpen = $ti.hasClass('open');if (mId == pid) {if (isOpen) {$(this).hide();if ('dir' == ttype && tOpen == isOpen) {$ti.trigger('click');}} else {$(this).show();if (linkage && 'dir' == ttype && tOpen == isOpen) {$ti.trigger('click');}}}});},// 检查参数checkParam: function (param) {if (!param.treeSpid && param.treeSpid != 0) {layer.msg('参数treeSpid不能为空', {icon: 5});return false;}if (!param.treeColIndex && param.treeColIndex != 0) {layer.msg('参数treeColIndex不能为空', {icon: 5});return false;}return true;},// 展开所有expandAll: function (dom) {$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {var $ti = $(this).find('.treeTable-icon');var ttype = $ti.attr('lay-ttype');var tOpen = $ti.hasClass('open');if ('dir' == ttype && !tOpen) {$ti.trigger('click');}});},// 折叠所有foldAll: function (dom) {$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {var $ti = $(this).find('.treeTable-icon');var ttype = $ti.attr('lay-ttype');var tOpen = $ti.hasClass('open');if ('dir' == ttype && tOpen) {$ti.trigger('click');}});}};// 引入图标layui.link(layui.cache.base + '/treetable.css');// 给图标列绑定事件$('body').on('click', '.treeTable .treeTable-icon', function () {var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage');if ('true' == treeLinkage) {treetable.toggleRows($(this), true);} else {treetable.toggleRows($(this), false);}});exports('treeTable', treetable);
});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！