layui前端菜单构建-批量删除-弹框填写-树状菜单-树状下拉框选择treeSelect

最新推荐文章于 2025-09-11 02:16:19 发布

原创

最新推荐文章于 2025-09-11 02:16:19 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #jquery

本文详细介绍了一种基于layui框架的树形表格treeTable的实现方法，包括其独特的列宽分配方式，能够自动适应容器宽度变化，非常适合单页面应用。文章通过具体的HTML代码示例展示了如何构建树状表，并集成了树状下拉(TreeSelect)、表单验证等功能。

树形表格treeTable实现了layui数据表格

TreeTable树状表

https://gitee.com/whvse/treetable-lay

https://gitee.com/whvse/treetable-lay/wikis/pages?sort_id=1986092&doc_id=142114

https://layuiextend.hsianglee.cn/eletree/

TreeSelect树状下拉

https://fly.layui.com/extend/treeSelect/

效果图

页面总体

<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script th:src="@{/js/jquery-1.10.2.js}"></script>
        <script th:src="@{/layui/layui.all.js}"></script>
        <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
        <style>
            .demo-side {
                position: relative;
                transition: all .3s;
            }

            .demo-side.show {
                padding-left: 120px;
                position: relative;
            }

            .demo-side:before {
                content: "假设这是侧边栏, treeTable使用了与layui数据表格完全不同的列宽分配方式, 由浏览器来分配, 所以当容器宽度变化后会自动适应, 对单页面系统非常友好";
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -90px;
                width: 105px;
                visibility: hidden;
                line-height: 1.5;
            }

            .demo-side.show:before {
                visibility: visible;
            }
        </style>
    </head>
    <body>
        <div id="edit-main" style="display: none;" >
            <div class="my-form" id="edit-permission">
                <form class="layui-form" action="">
                    <input type="hidden"id="menuId1" name="menuId1" required >
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单类型</label>
                        <div class="layui-input-block">
                            <input type="radio" id="menuTypeM1" name="menuType1" value="M" title="目录">
                            <input type="radio" id="menuTypeC1" name="menuType1" value="C" title="菜单">
                            <input type="radio" id="menuTypeF1" name="menuType1" value="F" title="按钮">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="menuName1" name="menuName1" required  lay-verify="required" placeholder="菜单名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请求地址url</label>
                        <div class="layui-input-inline">
                            <input type="text" id="url1" name="url1" required  lay-verify="required" placeholder="请求地址url" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">权限标识</label>
                        <div class="layui-input-inline">
                            <input type="text" id="perms1" name="perms1" required  lay-verify="required" placeholder="权限标识" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">显示排序</label>
                        <div class="layui-input-inline">
                            <input type="text" id ="orderNum1" name="orderNum1" required  lay-verify="required" placeholder="显示排序" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">图标</label>
                        <div class="layui-input-inline">
                            <input type="text" id="icon1" name="icon1" required  lay-verify="required" placeholder="图标" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否显示</label>
                        <div class="layui-input-block">
                            <input type="radio" id="visible1" name="visible1" value="0" title="显示">
                            <input type="radio" id="visible2" name="visible1" value="1" title="隐藏">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-inline">
                            <input type="text" id="remark1" name="remark1" required  placeholder="备注" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemoEdit">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div id="add-main" style="display: none;" >
            <div class="my-form" id="permission">

                <form class="layui-form" action="">

                    <div class="layui-form-item">
                        <label class="layui-form-label">上级菜单ID</label>
                        <div class="layui-input-inline">
                            <input type="text"id="parentId" name="parentId" required readonly="readonly"   placeholder="菜单名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上级菜单</label>
                        <div class="layui-input-inline">
                            <input type="text" id="parentName" name="parentName" required readonly="readonly"   placeholder="菜单名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">选择上级菜单</label>
                        <div class="layui-input-inline">
                            <input type="text"id="tree" lay-filter="tree" required   placeholder="菜单名" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单类型</label>
                        <div class="layui-input-block">
                            <input type="radio" id="menuTypeM" name="menuType" value="M" title="目录">
                            <input type="radio" id="menuTypeC" name="menuType" value="C" title="菜单">
                            <input type="radio" id="menuTypeF" name="menuType" value="F" title="按钮">
                        </div>
                    </div>

                    <div class="layui-form-item">