ZTree使用过程

1、引入ZTree所需要的js和css

<script src="<%=path %>/static/js/jquery.ztree.core.min.js" type="text/javascript"></script>
<script src="<%=path %>/static/js/jquery.ztree.excheck.min.js" type="text/javascript"></script>
<link href="<%=path %>/static/css/zTreeStyle.css" rel="stylesheet" type="text/css" />

2、前端页面代码

 <script type="text/javascript">
　　　　　　//初始化ztree

            var setting = {
                view: {
                    selectedMulti: false
                },
                check: {
                    enable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };
            
        $(function() {
                // 使用异步请求，让后台生成相应的node对象列表，然后返回到前端，进行节点加载
                $.ajax({
                    url: "<%=request.getContextPath()%>/role/getMenuForAuthor",
                    type: "post",
                    data: {
                        "roid": $("#roid").val(),
                        "roLevel":$("#roLevel").val()
                    },
                    dataType: "json",
                    success: function(data) {
                        // 此时返回的data数据，就是node节点列表
                        // zTree整个的初始化操作，我们通过该行代码，来将zTree进行生成
                        $.fn.zTree.init($("#treeDemo"), setting, data);
                        $("#init").bind("change", createTree);
                        $("#last").bind("change", createTree);
                    }
                });
            });    
            

        function getSpids() {
            var spIds = "";
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = zTree.getCheckedNodes(true);
            
            //进行循环遍历
            for (var i = 0; i<nodes.length; i++) {
                spIds = spIds + nodes[i].id + "-";
            }
            spIds = spIds.substring(0, spIds.length - 1);
            //进行异步授权
            $.ajax({
                url: "<%=request.getContextPath()%>/role/autoRole",
                type: "post",
                data: {
                    "roid": $("#roid").val(),
                    "spIds": spIds
                },
                dataType: "json",
                success: function (data) {
                    if (data == true) {
                        alert("授权成功！");
                    } else {
                        alert("授权失败！");
                    }
                    //关闭模态框
                    parent.closeModal();
                }
                
            });
        }
     </script>
   </head>
   <body>
      <input type="hidden" id="roid"  value="${role.roid }">
      <input type="hidden" id="roLevel"  value="${role.roLevel }">
      <div class="content_wrap">
         <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
         </div>
      </div>
      <div style="position:absolute;right:0;bottom:0;">
           <a class="btn btn-success " onclick="getSpids();" >
           <span></span>
                保存
         </a>
      </div>
   </body>

3、node对象

　　 private String id;
    private String pId;
    private String name;
    private boolean open;      //子菜单展开
    private boolean checked;   //选中状态

猜你喜欢