用zTree做樹形多選

一、引插件

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後臺的數據獲取，可以多多思考