前言

相信很多的项目中都要用到树形表格的功能,今天要说的是layUI的TreeTable,先上一张图看一下效果: 158e40a06275fb9e3153aaa6744e7be.png

插件地址

演示地址: 演示地址 项目地址: 项目地址

相关依赖

微信图片_20190926113106.png

可以去官网下载,这里就不放了:layUi官网

html代码

<head>
        <%@ include file="/WEB-INF/views/jsp/common/common.jsp" %>
        <script type="text/javascript" src="/static/js/module/treetable-lay/treetable.js"></script>
        <title>菜单管理</title>
</head>
<body>
    <div class="layui-card-header"><h1>菜单管理</h1></div>
    <div class="layui-card-body">
	<button class="layui-btn layui-btn-radius"  id="btn-expand">展开所有</button>
        <button class="layui-btn layui-btn-radius" id="btn-fold">折叠所有</button>
        <table class="layui-table" id="menu" lay-filter="menu" lay-data="{id: 'menu'}"></table>
    </div>
</body>

js代码

        <script>

            layui.config({
            base: '/static/js/module/'
            }).extend({
            treetable: 'treetable-lay/treetable'
            }).use(['table', 'form', 'element', 'treetable', 'layer'], function () {
                    var $ = layui.jquery;
                    var table = layui.table;
                    var form = layui.form;
                    var element = layui.element;
                    var treetable = layui.treetable;
                    var layer = layui.layer;

                // 渲染表格
                var menuTable = function () {
                    treetable.render({
                        treeColIndex: "1",//树形图标显示在第几列
                        treeSpid: "0",//最上级的父级id
                        treeIdName: 'id',//id字段的名称
                        treePidName: 'parentId',//pid字段的名称
                        treeDefaultClose: true,//是否默认折叠
                        treeLinkage: true,//父级展开时是否自动展开所有子级
                        elem: '#menu',
                        url: '/xxx/xxxx',
                        page: false,
                        cols: [[
                        //{type: 'numbers'},
                        {field: 'id', title: 'id',align: 'center', sort: true},
                        {field: 'describe', title: '描述',align: 'center', unresize: true},
                        {field: 'menuName', title: '菜单名',align: 'center', unresize: true},
                        {field: 'menuType', title: '菜单类型',align: 'center', unresize: true},
                        {field: 'iconUrl', title: '图标地址',align: 'center', unresize: true},
                        {field: 'parentId', title: '父Id',align: 'center', unresize: true},
                        {templet: '#oper-col', title: '操作',unresize: true}
                        ]]
                    });
                };

                menuTable();

                $('#btn-expand').click(function () {
                    treetable.expandAll('#menu');
                });

                $('#btn-fold').click(function () {
                    treetable.foldAll('#menu');
                });
            });
        </script>