转：zTree高级入门：如何通过扩展节点的属性来达到是否显示节点的删除编辑等图标（按钮）

当我们在使用ztree树组件的节点编辑功能时，只要我们引入了ztree相关节点编辑的js脚本文件：

<script type="text/javascript" src=”/js/jquery.ztree.exedit-3.5.js"></script>

 

接着配置setting内的edit节点：

 

var setting = {

            edit: {

                enable: true,

                showRenameBtn: true,

                showRemoveBtn: true

            },

 

 

当我们ztree树加载完成后，我们将鼠标移动至每一个树节点上，节点后面均会显示两个图标，一个“删除节点”图标，一个是“编辑节点”图标。点击后可以进行节点的编辑和删除操作。

这样虽然很完美，但是还不够完美，如果我们针对某些节点不需要不需要进行节点的编辑或者删除操作，换言之就是某些节点不让其显示操作的图标。怎么办呢？

很显然，ztree树控件对于这一点上做得还不是很够，但是它已经给我们留了很大的扩展空间。

解决方案如下：

1、给节点扩展两个属性：noRemoveBtn和noEditBtn，分别设置为true表示均不显示操作图标。当然这里配置是第一步，还有第二步的哦。

示例代码如下：

 

var zNodes = [

            { id: 1, pId: 0, name: "父节点 1", open: true, noRemoveBtn: true, noEditBtn: true },

            { id: 11, pId: 1, name: "叶子节点 1-1",noRemoveBtn: false,noEditBtn:true },

            { id: 12, pId: 1, name: "叶子节点 1-2" },

            { id: 13, pId: 1, name: "叶子节点 1-3" }

                 ];

 

2、我们将setting内的edit节点下的showRenameBtn、showRemoveBtn两个属性就行修改，变成一个方法来返回是否显示图标，形如：

 

edit: {

                enable: true,

                showRenameBtn: showRenameBtn

            },

 

3、编写showRenameBtn(treeId,treeNode)方法，这里以是否显示节点编辑图标为例：

 

 //是否显示编辑按钮

function showRenameBtn(treeId, treeNode) { 

            //获取节点所配置的noEditBtn属性值           

            if (treeNode.noEditBtn != undefined && treeNode.noEditBtn) {

                return false;

            } else

                return true;

}

 

刷新我们的页面，然后就可以看到第一二个节点当我们鼠标移动上去的时候后面图标的显示情况。

补充：

1、showRenameBtn(treeId,treeNode)方法的执行或者触发是当我们鼠标移动至某个节点上时触发或者执行的，所以我们能够很清楚地知道节点的对象，接着判断其属性值情况。