用zTree做树形多选

最新推荐文章于 2025-06-04 17:43:46 发布

原创最新推荐文章于 2025-06-04 17:43:46 发布 · 置顶 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#zTree #javascript #java #资源树 #多选框

java前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何利用zTree插件实现树形结构的多选功能。重点包括引入必要的js和css文件，以及java后台数据的获取和处理。通过示例代码，读者可以了解实现这一功能的具体步骤。

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

一、引插件

jquery.js
zTreeStyle.css
jquery.ztree.core.min.js
jquery.ztree.excheck-3.5.min.js
共四个，缺一不可

二、代码示例

<script type="text/javascript">

        var setting = {
            check: {
                enable: true,
                chkStyle: "checkbox",
                chkboxType: { "Y": "s", "N": "ps" }
            },
            async : {    
                enable : true,   
                url : "<%=basePath%>admin/role/getMenuTrees.php?roleId=${role.id}" // Ajax 获取数据的 URL 地址    
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback:{
                onCheck:onCheck
            }
        };

        function onCheck(e,treeId,treeNode){
            var treeObj=$.fn.zTree.getZTreeObj("treeMultiple"),nodes=treeObj.getCheckedNodes(true),menuids="";
            for(var i=0;i<nodes.length;i++){
                if(i== nodes.length-1){
                    menuids+=nodes[i].id;//id字符串拼接
                }else{
                    menuids+=nodes[i].id + ",";
                }
            }
            $("#menuids").val(menuids);
        }

        $(document).ready(function(){
            $.fn.zTree.init($("#treeMultiple"), setting);
        });

    </script>

中的代码为

<!-- 资源树多选框 -->
<div class="form-group">
    <label class="control-label col-md-3">选择权限：</label>
    <div class="col-md-8">
        <div class="zTreeDemoBackground left">
            <input id="menuids" type="hidden" name="menuids" value="${menuids }"/>
            <ul id="treeMultiple" class="ztree form-control" style="height: auto; width:200px; overflow-y: auto"></ul>
        </div>
    </div>
</div>

java后台的数据获取，可以多多思考