前言

笔者代码中使用了vue和jquery,以下代码片段中的this有时指向的是vue实例对象

修改显示内容

zTrees 初始化代码如下,第二个 param 是配置选项

$.fn.zTree.init($("#treeDemo"), setting, this.zNodes);

在 setting 中 view 对象上加上 addDiyDom 方法

var setting={
        view: {
            addDiyDom: this.addDiyDom
              },
        }

在 addDiyDom 方法中可以对内容进行修改

var setting={
        addDiyDom :function(treeId, treeNode) {
            var spaceWidth = 5;
            var switchObj = $("#" + treeNode.tId + "_switch");
            var spaceStr = "html代码块,构建出想要的样式,图片或文字";
            switchObj.before(spaceStr);
        },

节点增删改操作

以更改节点内容为例

为了取到当前操作节点的数据,需要在 setting 中 callback 对象上加上触发回调的方法,例如onRightClick

 callback: { 
    onRightClick: this.OnRightClick,
                }

在 onRightClick 方法中调用 treeObj 对象的 selectNode 方法(用来确定操作的节点对象)

OnRightClick:function OnRightClick(event, treeId, treeNode) {
        if (treeNode && !treeNode.noR) {
                    this.treeObj.selectNode(treeNode);
                }

            }

确定了要操作的节点对象,就可以用 getSelectedNodes()[0] 取到,进而修改节点的属性,最后别忘了 update

alertTreeNode:function (url) {
                   var oldNode =  this.treeObj.getSelectedNodes()[0];
                    oldNode.name = "图片";
                    oldNode.imgurl = url;
            this.treeObj.updateNode(oldNode);        
                }