zTree根据json选中节点,并且设置其他节点不可选
首先,在适配目录树时,使用checkbox形式,配置代码如下:
var settingCatalog = {
check:{
enable: true
},
data:{
simpleData:{
enable: true
}
}
}
看下效果:

这时的每个节点都处于一个可选的状态(但都未选中),但在实际项目中我们可能还会遇到另外两种情况:
1、根据后台返回的json,选中指定节点(此时所有的节点仍处于可编辑的状态);

代码如下:
var treeObj = $.fn.zTree.getZtreeObj("categoryTree");
for(var j = 0; j < zNodes.length; j++){
treeObj.checkNode(treeObj.getNodeByParam("id",zNodes[j].id),true);
}
zNodes是后台获取的json数据,其中包括 id、parentId、name、deep,形式如下:

2、根据json,选中指定节点,所有节点为不可操作状态。
代码如下:
/**获取树对象*/
var treeObj = $.fn.zTree.getZTreeObj("categoryTree");
/**获取所有节点*/
var nodes = treeObj.transformToArray(treeObj.getNodes());
for(var i = 0; i < nodes.length; i++){
for(var j = 0; j < zNodes.length; j++){
if(nodes[i] === treeObj.getNodeByParam("id",zNodes[j].dataAuthorityId)){
treeObj.checkNode(treeObj.getNodeByParam("id",zNodes[j].dataAuthorityId),true);
}
}
nodes[i].chkDisabled = true;
}
效果:

Tips:
实际项目中,有时需要把选中的节点以json的形式传给后台,既然要获取节点,那当然要从节点下手啦:
var json = [];
var treeObj=$.fn.zTree.getZTreeObj("categoryTree");
var nodes=treeObj.getCheckedNodes(true);
for(var i = 0; i < nodes.length; i++){
var obj = {};
obj.dataAuthorityId = nodes[i].id;
obj.parentId = nodes[i].pId;
obj.name = nodes[i].name;
obj.deep = nodes[i].deep;
json.push(obj);
}
json = JSON.stringfy(json); //要作为参数传给后台,别忘了序列化一下
看看我们得到了什么:
[{"dataAuthorityId":"00","parentId":null,"name":"京师目录体系","deep":"0"},{"dataAuthorityId":"gaozhong","parentId":"00","name":"高中","deep":"1"},{"dataAuthorityId":"gaozhong-shuxue","parentId":"gaozhong","name":"数学","deep":"2"},{"dataAuthorityId":"xiaoxue","parentId":"00","name":"小学","deep":"1"},{"dataAuthorityId":"xiaoxue-shuxue","parentId":"xiaoxue","name":"数学","deep":"2"},{"dataAuthorityId":"xiaoxue-yingyu","parentId":"xiaoxue","name":"英语","deep":"2"}]
水平有限,欢迎批评指正!
zTree根据json选中节点,并且设置其他节点不可选的更多相关文章
- ztree取消之前选中状态并设置新的选中
var zTreeObject = $.fn.zTree.getZTreeObj("treeId"); var node = zTreeObject.getNodeByParam( ...
- ztree获取当前选中节点子节点id集合的方法(转载)
本文实例讲述了ztree获取当前选中节点子节点id集合的方法.分享给大家供大家参考.具体分析如下: 要求:获取当前选中节点的子节点id集合. 步骤: 1.获取当前节点 2.用ztree的方法trans ...
- zTree实现清空选中的第一个节点的子节点
zTree实现清空选中的第一个节点的子节点 1.实现源代码 <!DOCTYPE html> <html> <head> <title>zTree实现基本 ...
- 使用zTree和json构建简单树节点
我们经常碰到须要构建树结构展示的情况,我推荐使用zTree和JSON. 比如: <? php /** * * 使用zTree和json构建树节点 * */ $arr = array( 0=> ...
- zTree实现单独选中根节点中第一个节点
zTree实现单独选中根节点中第一个节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树& ...
- ztree 获取当前选中节点的子节点集合
功能:获取当前选中节点的子节点id集合. 步骤:1.获取当前节点 2.用ztree的方法transformToArray()获取当前选中节点(含选中节点)的子节点对象集合. 3.遍历集合,取出需要的值 ...
- SQL 横转竖 、竖专横 (转载) 使用Dapper.Contrib 开发.net core程序,兼容多种数据库 C# 读取PDF多级书签 Json.net日期格式化设置 ASPNET 下载共享文件 ASPNET 文件批量下载 递归,循环,尾递归 利用IDisposable接口构建包含非托管资源对象 《.NET 进阶指南》读书笔记2------定义不可改变类型
SQL 横转竖 .竖专横 (转载) 普通行列转换 问题:假设有张学生成绩表(tb)如下: 姓名 课程 分数 张三 语文 74 张三 数学 83 张三 物理 93 李四 语文 74 李四 数学 84 ...
- javascript入门 之 ztree (十 checkbox选中事件)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...
- Tree树节点选中及取消和指定节点的隐藏
指定节点变色 指定节点隐藏 单击节点 未选中则选中该节点 已选中则取消该节点 前台: 1.HTML <ul id="listDept" name="listDept ...
随机推荐
- Android 音视频编解码——YUV视频格式详解
一.YUV 介绍 YUV是一种颜色编码方方式,通常由彩色摄像机进行取像,然后把取得的彩色图像信号经过分色.分别放大校正后得到RGB,再经过矩阵变换得到亮度信号Y和两个色差信号B-Y(即U).R-Y(即 ...
- Linux Centos 下安装软件 三种方式(转)
Linux学习的路还很远呢,各位码农,新年快乐哈! 1)一种是软件的源代码,您需要自己动手编译它.这种软件安装包通常是用gzip压缩过的tar包(后缀为.tar.gz). 2)另一种是软件的可执行程序 ...
- delphi 数组复制利用CopyMemory 最为完美
在各网站的文章里面,见复制数据的方法中,有move的,有system.copy的,而要实际应用中,这两种方法,并不是很完美,会遇到一些问题,比如copy在记录里面的复制时,编译都过不去,而CopyMe ...
- Knowledge point
静态网页的特点:以htm.html.sbtml.xml.js.css等为后缀扩展名. 1)程序在客户浏览器端解析,不需要读取数据库,性能和效率较高: 2)后端没有数据库支持,所以和用户的交互性差,功能 ...
- 【Java一看就懂】浅克隆和深克隆
一.何为克隆 在Java的体系中,数据类型分为基本数据类型和引用数据类型. 基本数据类型包括byte,short,int,long,float,double,boolean,char 8种,其克隆可通 ...
- Android学习笔记2——shape
Android有很多特别的xml文件,如常用的selector.style以及shape,熟练使用这些xml可以是我们的项目变得更个性化. 一.子标签(corners.gradient.padding ...
- 使用Java编译思想
1.Java常见的注释有哪些,语法是怎样的? 1)单行注释用//表示,编译器看到//会忽略该行//后的所文本 2)多行注释/* */表示,编译器看到/*时会搜索接下来的*/,忽略掉/* */之间的文本 ...
- 根据 中序遍历 和 后序遍历构造树(Presentation)(C++)
好不容易又到周五了,周末终于可以休息休息了.写这一篇随笔只是心血来潮,下午问了一位朋友PAT考的如何,顺便看一下他考的试题,里面有最后一道题,是关于给出中序遍历和后序遍历然后求一个层次遍历.等等,我找 ...
- 基于bootstrap的表格数据展示
一.导入bootstrap文件 二.前端html代码 对应的是前台条件查询和js数据获取 js数据获取部分在第四段 三.后台数据 total为集合总数 int类型 rows为前台需要展示的数据集合 ...
- 剑指Offer-二叉树的下一个结点
题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 思路 分析二叉树的下一个节点,一共有以下情况: 二叉树 ...