layui +ztree实现下拉分类树完整实例_layui下拉分类-优快云博客

该博客介绍了如何使用layui和ztree库创建一个下拉分类树的完整实例，包括html结构和goodsBatchAdd.js中的关键代码。提供了相关资源链接供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图在这里插入图片描述
html：

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org"
       xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!--<head th:include="layout :: htmlhead" th:with="title='管理'">-->
<head   th:with="title='管理'">
    <link rel="stylesheet" th:href="@{/zTree/layui/css/layui.css}"></link>
    <link rel="stylesheet" th:href="@{/zTree/metroStyle/metroStyle.css}"></link>
    <link rel="stylesheet" th:href="@{/zTree/css/index.css}"></link>
    <script th:src="@{/zTree/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/zTree/jquery-1.4.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/zTree/jquery.ztree.all.js}"></script>
    <script type="text/javascript" th:src="@{/zTree/selectTree.js}"></script>
</head>
<body class="bg">
<div class="layui-layout layui-layout-admin">
    <div class="content-body">
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <div id="demo" class="layui-form-select select-tree">
                </div>
            </div>
        </div>
        <div class="layui-input-inline">
            <div id="demo2" class="select-tree layui-form-select">
            </div>
        </div>
    </div>

</div>

<!--底部-->
<div class="layui-footer"> 
</div>


<script src="/js/goods/goodsBatchAdd.js"></script>
 

</body>
</html>

goodsBatchAdd.js 文件如下：


    layui.use(['form', 'element'], function () {
   
    });
    //本地测试数据
    var zNodes