樹 插件 ztree 的基本用法

因業務需要 用到 ztree 插件

第一次用tree插件上手有點難度

官網 http://www.treejs.cn/v3/main.php#_zTreeInfo

第一步：初始化樹，樹的所有數據從后台請求所得

//首頁加載左邊樹形AJAX
                    $.ajax({
                        dataType:'json',
                        type:'post',
                        url:'http://192.168.0.51:8184/wd-service/api/dict/findParentDict',
                        //請求成功===============
                        success:function(data){
                            console.log(data)
                            var list=data.data
                            console.log(data.data[0].parentId)
                            zNodes=list
                            // tres插件
                            var setting = {
                                view: {
                                    addHoverDom: false, //去掉添加圖標
                                    removeHoverDom: false, //去掉刪除圖標
                                    selectedMulti: false,
                                    addDiyDom: true,
                                    dblClickExpand: false,//屏蔽雙擊
                                    isSilent : false
                                },
                                check: {
                                    enable: false
                                },
                                data: {
                                    simpleData: {  //簡單數據模式
                                        enable: true,
                                         idKey: "id",  
                                         pIdKey: "pid",  
                                         rootPId: "",
                                    }
                                },
                                edit: {
                                    enable: false,
                                    removeTitle : "刪除節點",
                                },
                                callback:{
                                    onClick:zTreeOnClick,
                                },
                                async:{  
                                    enable:true,  
                                },  
                            };
                            $.fn.zTree.init($("#treeDemo"), setting,zNodes); //初始化樹形結構 ，treeDemo是樹容器

初始化根節點

    var zNodes
            var zTreeObj;     
            // 初始化根節點
            function initTree() {
                $.get(basePath + "/design/detain/initNode?type=1", function(data) {
                    // 設置父節點不顯示checkbox
                    data.returnData.node.nocheck = true;
                    zTreeObj = $.fn.zTree.init($("#zTree"), setting,
                            data.returnData.node);
                });
            }

 

得到渲染效果

 

二、單擊樹節點時向后台發起數據請求

這里用到了

function zTreeOnClick(event, treeId, treeNode) {

　　console.log(treeNode.id)  //當單擊節點的時候會輸出節點的id

}

三、動態添加節點，當添加一天數據節點的時候，在不刷新頁面的前提下更新節點

這里用到了 addNodes （詳細看IPA文檔）

//刷新樹==============================
                        var name=data.data[0].name  //數據從后台請求得來
                        console.log(name)
                        var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //treeDemo是樹所在容器
                        var selectedNode = treeObj.getSelectedNodes(); //所選擇的節點
                        console.log(selectedNode[0])
                        var newNode = {name:name,id:data.data[0].id}; //新增的節點的名稱name 和 節點id
                        newNode = treeObj.addNodes(selectedNode[0],newNode);
                        console.log(newNode)