Ztree 节点不可选

有一棵树，我们只需要其中几个节点可以通过勾选前面checkbox来对其进行操作，且这个操作需要动态执行。应该如何实现呢？

==========》

面对这样一个需求，如果我们使用的是zTree树控件，那么将会变得非常地简单。

1、引入ztree树相关的js文件

view sourceprint?

1.<link rel="stylesheet" href="../../../css/demo.css" type="text/css">

2.<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">

3.<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>

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

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

注意excheck.js文件是一定要引入的，要不然会导致节点前的checkbox无法显示和操作。

2、默认设置每一个节点的nocheck属性值为true

nocheck表示无checkbox选择框，属性值设置为true，表示不会显示节点前面的checkbox选择框。所以需要我们在提供节点数据给zTree树控件之前设置好每一个节点的nocheck值为true，示例数据形如：

view sourceprint?

01.//ztree用于初始化的静态数据

02.var zNodes = [

03.{ id: 1, pId: 0, name: "随意勾选 1", nocheck: true },

04.{ id: 11, pId: 1, name: "随意勾选 1-1", nocheck: true },

05.{ id: 111, pId: 11, name: "无 checkbox 1-1-1", nocheck: true },

06.{ id: 112, pId: 11, name: "随意勾选 1-1-2", nocheck: true },

07.{ id: 12, pId: 1, name: "无 checkbox 1-2", nocheck: true },

08.{ id: 2, pId: 0, name: "随意勾选 2", nocheck: true },

09.];

3、动态设置节点前显示checkbox

想要让某个节点显示checkbox选择框，就必须要更新其nocheck属性值为false即可。核心方法如下所示：

view sourceprint?

01.//过滤节点的机制直接return node表示不做任何过滤

02.function filter(node) {

03.return node;

04.}

05.

06.///动态设置zTree的所有节点有checkbox

07.function DynamicUpdateNodeCheck() {

08.var zTree = $.fn.zTree.getZTreeObj("treeDemo");

09.//根据过滤机制获得zTree的所有节点

10.var nodes = zTree.getNodesByFilter(filter);

11.//遍历每一个节点然后动态更新nocheck属性值

12.for (var i = 0; i < nodes.length; i++) {

13.var node = nodes[i];

14.node.nocheck = false; //表示显示checkbox

15.zTree.updateNode(node);

16.}

17.}

完整示例代码如下所示：

[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<title>ZTREE DEMO - 默认zTree几点无checkbox动态设置节点checkbox出现</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript">
<!--
var setting = {
check: {
enable: true,
nocheckInherit: false
},
data: {
simpleData: {
enable: true
}
}
};
//ztree用于初始化的静态数据
var zNodes = [
{ id: 1, pId: 0, name: "随意勾选 1", nocheck: true },
{ id: 11, pId: 1, name: "随意勾选 1-1", nocheck: true },
{ id: 111, pId: 11, name: "无 checkbox 1-1-1", nocheck: true },
{ id: 112, pId: 11, name: "随意勾选 1-1-2", nocheck: true },
{ id: 12, pId: 1, name: "无 checkbox 1-2", nocheck: true },
{ id: 2, pId: 0, name: "随意勾选 2", nocheck: true },
];
//过滤节点的机制直接return node表示不做任何过滤
function filter(node) {
return node;
}
///动态设置zTree的所有节点有checkbox
function DynamicUpdateNodeCheck() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//根据过滤机制获得zTree的所有节点
var nodes = zTree.getNodesByFilter(filter);
//遍历每一个节点然后动态更新nocheck属性值
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
node.nocheck = false; //表示显示checkbox
zTree.updateNode(node);
}
}
///页面加载后初始化zTree数据且默认展开所有节点
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes).expandAll(true);
});
//-->
</script>
</head>
<body>
<h1>
Checkbox nocheck 演示</h1>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree">
</ul>
</div>
<div class="right">
<p>
默认情况下设置任何节点无checkbox选择框，需要配置每一个节点的nocheck属性为true即可。</p>
<p>
zTree加载完成后通过updateNode(node)方法动态更新节点的nocheck属性为false，则节点将会显示checkbox。</p>
<h3>
STEP DAY</h3>
<div>
<input type="button" value="动态设置节点有checkbox" onclick="DynamicUpdateNodeCheck()" />
</div>
</div>
</div>
</body>
</html>

Ztree 节点不可选相关推荐

Ztree节点增加删除修改和Icheck的用法
简介官方文档:http://www.treejs.cn/v3/api.php zTree 是一个依靠 jQuery 实现的多功能 "树插件", 而且拥有较好的浏览器兼容性,有着丰 ...
浅谈ztree节点的增加和获取
zTree 是一个依靠 jQuery 实现的多功能 "树插件".使用zTree会涉及到一些操作的逻辑,例如增加节点.删除节点等,下面我简要描述一下实际使用中的一点心得. zTree ...
zTree节点增删改
效果: 完成增删改,要注意几个关键点: 使用编辑功能,必须设置 setting.edit 中的各个属性使用编辑功能的事件回调函数,必须设置 setting.callback.beforeRemo ...
给ztree节点赋值
需求:点击节点的时候,给节点赋值,获取显示所点击的树节点里面的所有的信息. 图片.png 1:在弹出添加或者删除界面之前,给节点赋值,得到节点里面的信息之后再做下一步逻辑. $("#toU ...
ztree 自定义参数_Ztree节点前加上两个自定义按钮
前言: 在我的权限管理模块遇到了给某些角色加权限的问题,这时就需要实现将每个模块做成树,在每个节点前加上预览和编辑的按钮,这样可以根据数据库的某个字段给每个角色赋权限. 必须必须吐槽的是,这部分的功能 ...
ztree之获取当前节点的所有子节点
在使用zTree插件实现树形图中,如果需要获取当前点击的父节点的子节点数的需求,可以使用treeNode.children获取子节点数据集合,使用length方法获取集合长度. 将当前节点的treeN ...
【ztree系列】节点的增删改
一直以来,项目中用到的树形结构,都是用来读取显示数据.或者控制页面上其它内容的展示.对于树数据源的修改,一般由其它模块来完成,这样可以让功能单一化,不必让树的职责过多,但是却不得不再多加一步了.为了给 ...
jQuery EasyUI ztree插件使用
1.下载easyUI的开发包该包的结构是 2.将easyUI的资源文件引入的页面中: <link rel="stylesheet" type="text/css& ...
jQuery zTree几种常用的使用方式
最近在用这个ztree进行项目中的某些功能的开发.所以这里就随笔记录一下.顺便为我那菜的无地自容地JavaScript做点笔记. 什么是 ZTree 官方简介: zTree 是一个依靠 jQuery ...

Ztree 节点不可选

Ztree 节点不可选相关推荐

最新文章

热门文章