樹 插件 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); }); }

 

獲得渲染效果

 

2、單擊樹節點時向後臺發起數據請求

這裏用到了

function zTreeOnClick(event, treeId, treeNode) {

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

}

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

這裏用到了 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)