zTree根据json选中节点,并且设置其他节点不可选

首先,在适配目录树时,使用checkbox形式,配置代码如下:

看下效果:

这时的每个节点都处于一个可选的状态(但都未选中),但在实际项目中我们可能还会遇到另外两种情况:

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"}]

水平有限,欢迎批评指正!

时间: 2024-10-12 19:54:09

zTree根据json选中节点,并且设置其他节点不可选的相关文章

zTree实现清空选中的第一个节点的子节点

Cache是位于CPU寄存器与内存之间的存储器,它的容量比内存小但交换速度快. Cache的工作原理 1.读取顺序 当数据从内存读入时,整行的数据(16~32字节)被装入Cache,如果程序具有良好的地址引用局部性(顺序浏览一个字符串),那么CPU以后对邻近数据的引用就可以从快速的Cache读取,而不用从缓慢的内存读取.典型情况下,主存的存取速度可能只有Cache的四分之一. CPU要读取一个数据时,首先从Cache中查找,如果找到就立即读取并送给CPU处理:如果没有找到,就用相对慢的速度从内存

ztree获取当前选中节点子节点id集合的方法(转载)

本文实例讲述了ztree获取当前选中节点子节点id集合的方法.分享给大家供大家参考.具体分析如下: 要求:获取当前选中节点的子节点id集合. 步骤: 1.获取当前节点 2.用ztree的方法transformToArray()获取当前选中节点(含选中节点)的子节点对象集合. 3.遍历集合,取出需要的值. treeNode:当前选中节点对象 function getChildNodes(treeNode) { var naviTree = $.fn.zTree.getZTreeObj(zTreeI

zTree实现单独选中根节点中第一个节点

1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href=&

使用zTree和json构建树节点

我们常常碰到需要构建树结构展示的情况,我推荐使用zTree和JSON. 例如: <?php /** * * 使用zTree和json构建树节点 * */ $arr = array( 0=>array( 'id' => 1, 'pid' => 0, 'name' => 'china', 'son' => array( array( 'id' => 3, 'pid' => 1, 'name' => 'Beijing', ), array( 'id' =&g

ztree中获取选中节点下的所有叶子节点

ztree中获取选中节点下的所有叶子节点 var setting = {     data: {         simpleData: {             enable: true        }     },     callback: {         onClick: treenodeClick     } }; //点击树节点,获取节点的所有叶子节点idfunction treenodeClick(event, treeId, treeNode, clickFlag) {

在package.json里面的script设置环境变量,区分开发及生产环境。注意mac与windows的设置方式不一样

在package.json里面的script设置环境变量,区分开发及生产环境. 注意mac与windows的设置方式不一样. "scripts": { "publish-mac": "export NODE_ENV=prod&&webpack -p --progress --colors", "publish-win": "set NODE_ENV=prod&&webpack -p -

通用多层json递归解析,根据json层级关系直接使用: 基节点.子节点.孙节点。

package com.matol.utils; import java.io.InputStream; import java.util.ArrayList; import java.util.Iterator; import java.util.LinkedHashMap; import java.util.List; import java.util.Map; import java.util.Properties; import org.codehaus.jackson.map.Obje

三级联动,json数据、可设置默认城市

闲来无事,折腾个三级联动,json数据.可设置默认城市.可配置是否显示第三级select <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市县三级联动</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script&g

easyui Tree模拟级联勾选cascadeCheck,节点选择,父节点自动选中,节点取消,父节点自动取消选择,节点选择,所有子节点全部选择,节点取消,所有子节点全部取消勾选

最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网上百度了很多资料,都没有完全符合自己业务场景的,所以就自己动手写咯. 先说一下自己的业务需求: 1.选中节点,上级以及所有直系上级节点自动选中,所有下级子孙节点全部自动选中: 2.取消选择节点,如果兄弟节点都未选择,则上级以及所有直系上级节点自动取消选择,所有下级子孙节点全部取消选中. 这里说一下c