树插件 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[].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[].name  //数据从后台请求得来

                        console.log(name)

                        var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //treeDemo是树所在容器

                        var selectedNode = treeObj.getSelectedNodes(); //所选择的节点

                        console.log(selectedNode[])

                        var newNode = {name:name,id:data.data[].id}; //新增的节点的名称name 和 节点id

                        newNode = treeObj.addNodes(selectedNode[],newNode);

                        console.log(newNode)

巴特西

树插件 ztree 的基本用法

最新文章

热门文章

巴特西

树 插件 ztree 的基本用法

最新文章

热门文章

树插件 ztree 的基本用法