Ztree的使用

 

首先引入css  js

 

dom中：

<ul id="treeDemo" class="ztree"></ul>

 

js:

    

 // 渲染文件树
            var setting = {
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id", //id和pid
                        pIdKey: "pId",
                        rootPId: 0 //根节点
                    }
                },
                callback: { /**回调函数的设置**/
                    beforeClick: beforeClick
                }
            };
            $.ajax({
                method: 'post',
                url: '/authority/user/findAllMenu',
                success: function(result) {
                    if (result.meta.code != 200) {
                        alert(result.meta.error_message);
                    } else {
                        $.fn.zTree.init($("#treeDemo"), setting, result.data);
                        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                        var node = treeObj.getNodeByTId("1");
                        treeObj.selectNode(node);
                        _self.currentNode = node.name;
                    }
                }
            });
            function beforeClick(treeId, treeNode) {
                _self.currentNode = treeNode.name;
            }
 
//保存资源
$.ajax({
                    method: 'post',
                    data: data,
                    url: '/authority/menu/saveMenu',
                    success: function(result) {
                        if (result.meta.code != 200) {
                            closeModal($('#addCityDiv'));
                            openFrame(result.meta.error_message);
                        } else {
                            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                            //选中节点
                            var nodes = treeObj.getSelectedNodes();
                            var childZNode = {
                                id: result.data.id,
                                name: $("#name").val()
                            }; //构造子节点
                            treeObj.addNodes(nodes[0], childZNode, true);
                            closeModal($('#addCityDiv'));
                        }
                    }
                });
//更新资源
$.ajax({
                    method: 'post',
                    data: data,
                    url: '/authority/menu/updateMenu',
                    success: function(result) {
                        if (result.meta.code != 200) {
                            closeModal($('#editCityDiv'));
                            openFrame(result.meta.error_message);
                        } else {
                            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                            //选中节点
                            var nodes = treeObj.getSelectedNodes();
                            nodes[0].name = $("#auth_name").val();
                            treeObj.updateNode(nodes[0]);
                            closeModal($('#editCityDiv'));
                        }
                    }
                });
//删除资源
$.ajax({
                method: 'post',
                url: '/authority/menu/delMenu/'+nodes[0].id,
                success: function(result) {
                    if (result.meta.code != 200) {
                        openFrame(result.meta.error_message);
                    } else {
                        var ns = treeObj.getNodesByParam("id",nodes[0].pId, null);
                         treeObj.selectNode(ns[0]);
                        //删除选中的子节点
                         treeObj.removeNode(nodes[0],true);
                    }
                }
            });