转: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)方法的执行或者触发是当我们鼠标移动至某个节点上时触发或者执行的,所以我们能够很清楚地知道节点的对象,接着判断其属性值情况。

时间: 2024-10-10 20:18:20

转:zTree高级入门:如何通过扩展节点的属性来达到是否显示节点的删除编辑等图标(按钮)的相关文章

元素节点的属性和方法

元素节点的属性 /* tagName innerHTML 双标签 value     单标签(input,textarea(虽然是双标签))既一般为表单标签 */ 节点属性只能获取行间样式 <script> /* tagName innerHTML 双标签 value 单标签(input,textarea(虽然是双标签))既一般为表单标签 */ window.onload = function(){ var oDiv = document.getElementById('div1'); //t

《JAVASCRIPT高级程序设计》DOM扩展

虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商发现某项功能缺失时,仍然会直接往DOM中添加专有扩展,以弥补不足.下面分别介绍这些标准扩展和专有扩展. 一.选择符API 选择符API的功能是根据CSS选择符选择与某个模式匹配的DOM元素.Jquery的核心就是通过CSS选择符查询DOM文档以取得元素的引用,从而抛开了getElementById(

转:zTree树控件key配置之title:zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该节点的全称,这里我们以title名称为例吧,示例代码如下所示: view sourceprint? 1.{ id:233, pId:23, name:"叶子节点233...",title:"叶子节点23333434343434"}, 2.{ id:234, pId:23

zTree变异篇:如何让同级树节点平铺而非垂直显示

昨天有一个zTree的使用者在实际的项目中有着这样一个特殊的需求,要求同级树节点能够水平显示,根据设定的宽度自动换行,效果图如下所示: 通过在浏览器调试模式下观察其同级节点的css为: li { display: list-item; text-align: -webkit-match-parent; } 这个display属性就注定了其节点都会像item一样垂直显示的.我们知道了这一点所以问题解决方案就出来了. 解决思路: 1.彻底修改zTree树所配备的zTreeStyle.css文件: 2

初探JavaScript(一)——也谈元素节点、属性节点、文本节点

Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本<Javascript Dom编程艺术>,开始慢慢走近JS,与它套近乎,今天是第三天了,从目前来看,比较好相处.就此动笔,是一个回忆复习的过程,权当是自己的一份读书笔记. JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,已经被广泛用于Web应用开发,常用来为网

rac 中节点的vip在该节点启动不了,在其他节点正常启动。

本实验是在虚拟机中! 与实验相同的问题:http://blog.csdn.net/wanghui5767260/article/details/38850335 问题描述: 节点1.节点2和节点3同时我做了断电处理,结果节点1 和节点2 都正常启动了,而节点3的vip在自己的节点上启动报错而在其他节点上启动正常. 注:节点3只装入了集群. 查看状态: [[email protected] bin]# ./crs_stat -t Name          Type           Targe

节点的属性

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 &l

二叉树权值最大的叶子节点到权值最小的叶子节点的距离

有一棵二叉树,树上每个点标有权值,权值各不相同,请设计一个算法算出权值最大的叶节点到权值最小的叶节点的距离.二叉树每条边的距离为1,一个节点经过多少条边到达另一个节点为这两个节点之间的距离. 给定二叉树的根节点root,请返回所求距离. 真是醉了,看漏了叶子节点. 代码: 1 import java.util.*; 2 3 /* 4 public class TreeNode { 5 int val = 0; 6 TreeNode left = null; 7 TreeNode right =

轻松学习JavaScript二十一:DOM编程学习之获取元素节点的子节点和属性节点

我们这里所说的获取元素节点的所有子节点包含元素子节点和文本节点两种.还是拿上一篇博文的代码实例进行 分析: <span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1