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,// 最上级的父级id
        treeIdName: '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 '<i class="font-icon">'+res.iconCls+'</i>';
				}
		    },{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 += '<span class="treeTable-empty"></span>';
                }
                if (isDir) {
                    iconHtml += '<i class="layui-icon layui-icon-triangle-d"></i> <i class="layui-icon layui-icon-layer"></i>';
                } else {
                    iconHtml += '<i class="layui-icon layui-icon-file"></i>';
                }
                iconHtml += '&nbsp;&nbsp;';
                var ttype = isDir ? 'dir' : 'file';
                var vg = '<span class="treeTable-icon open" lay-tid="' + mId + '" lay-tpid="' + mPid + '" lay-ttype="' + ttype + '">';
                return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '</span>'
            };

            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);
});