树 插件 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)