Tree树节点选中及取消和指定节点的隐藏

时间:2022-09-03 21:04:11

指定节点变色

Tree树节点选中及取消和指定节点的隐藏

指定节点隐藏

Tree树节点选中及取消和指定节点的隐藏

单击节点

未选中则选中该节点

已选中则取消该节点

Tree树节点选中及取消和指定节点的隐藏

前台:

1.HTML

<ul id="listDept" name="listDept"  data-options="region:'center',border: true"></ul>

2.JS

var deptTree = null;

$(function() {

  deptTree = $('#listDept');

   initTree() ;

}

//初始化树
function initTree() {
  deptTree.tree({
    url: '../dutyController/listDeptMembers.do',
    animate: false,//定义是否在每个节点前边显示复选框。
    lines : true, //定义是否显示树线条。
    checkbox : true,//定义是否在每个节点前边显示复选框。
    onlyLeafCheck: true,//定义是否只在叶节点前显示复选框。
    onClick: function(node) {//节点点击事件,参数为节点
      if(node.checked){//如果该节点被勾选
        deptTree.tree('uncheck',node.target);//设置该节点被取消勾选
      }else{
        deptTree.tree('check',node.target);//设置该节点被勾选
      }
    },
    onBeforeLoad: function() {//请求发出前触发,返回 false 则取消加载动作。
      listDutymember();
    },
    onLoadSuccess: function() {//当加载数据的请求发出前触发,返回 false 则取消加载动作。
      selectedNode = deptTree.tree('getRoot');//从根节点开始加载树
      var nodes = deptTree.tree('getChildren');//获取孩子节点
      for(var i=0;i<nodes.length;i++){//遍历 树
        for(var j=0;j<dutymemberRows.length;j++){//遍历 表
          if(nodes[i].id==dutymemberRows[j].memberid){
            node = deptTree.tree('find', dutymemberRows[j].memberid);//查找节点,返回节点对象
            // node.target.disabled="disabled";//(node.target).disabled=true
            // deptTree[i + 1].disabled = true;
            /* $(this).find('span.tree-checkbox').unbind().click(function(){////设置该节点不可编辑
              return false;
             });*/
            node.target.style.color="#EEEE00";//设置节点颜色
            node.target.style.display = 'none'; //隐藏节点
          }

        }
      }
    }
  });
}

Tree树节点选中及取消和指定节点的隐藏的更多相关文章

  1. JavaScript对列表节点的操作:删除指定节点、删除最后一个节点、删除第一个节点、删除所有节点、增加节点

    使用菜鸟的运行环境直接测试:http://www.runoob.com/try/try.php?filename=tryjs_events <!DOCTYPE html> <html ...

  2. 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格

    EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...

  3. 第二百二十六节,jQuery EasyUI,Tree&lpar;树&rpar;组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一.加 ...

  4. extjs4 treepanel 多个checkbox先中 多个节点选中 多级节点展开

    //<%@ page contentType="text/html; charset=utf-8" %> var checkedNodes = { _data:{}, ...

  5. 【Kubernetes】创建Pod并分配到指定节点

    一.编辑yaml文件 [root@K8s-Master Tools]# cat hello-world-pod.yaml apiVersion: v1 kind: Pod metadata: name ...

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

    最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网 ...

  7. EasyUI取消树节点选中

    $('#organTree').find('.tree-node-selected').removeClass('tree-node-selected'); 取消树的节点选中

  8. ElementUI如何展开指定Tree树节点

    原文:https://blog.csdn.net/gaojie_csdn/article/details/80738488 [问题] 在页面使用ElementUI的时候,想做出一个主动展开树节点的效果 ...

  9. easyui tree选中指定节点,点击指定节点

    功能需求描述如下: A主页面,在datagrid的某行上,操作列,点击详情,Tab页面上加载B页面 B页面,左边是树tree,右边是左边树的详情列表 要求:由A页面链接到B页面,B页面的tree,默认 ...

随机推荐

  1. Scala 学习笔记(五)

    def main(args : Array[String]): Unit = { def add(x:Int,y:Int):Int = { return x+y; } def subtract:(In ...

  2. Ajax提交与传统表单提交的区别说明

    Ajax提交是通过js来提交请求,请求与响应均由js引擎来处理,页面不会刷新,用户感觉不到实际上浏览器发出了请求.比如说我们希望网页总是显示最新的新闻,而又不想老是去点刷新按钮,我们就可以用Ajax机 ...

  3. HDU 3695 Computer Virus on Planet Pandora(AC自动机模版题)

    Computer Virus on Planet Pandora Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 256000/1280 ...

  4. date类型时间比较大小

    #方法一Date1.after(Date2),当Date1大于Date2时,返回TRUE,当小于等于时,返回false:Date1.before(Date2),当Date1小于Date2时,返回TRU ...

  5. Unity3d疑难问题解决

    1. 加载 c++ dll 不成功,报这个错: Failed to load 'Assets/Plugins/x86_64/myFile.dll' with error 'The operation ...

  6. javaWeb学习总结(7)-关于session的实现:cookie与url重写

    本文讨论的语境是java EE servlet.我们都知道session的实现主要两种方式:cookie与url重写,而cookie是首选(默认)的方式,因为各种现代浏览器都默认开通cookie功能, ...

  7. 程序员如何巧用Excel提高工作效率 第二篇

    之前写了一篇博客程序员如何巧用Excel提高工作效率,讲解了程序员在日常工作中如何利用Excel来提高工作效率,没想到收到很好的反馈,点赞量,评论量以及阅读量一度飙升为我的博客中Top 1,看来大家平 ...

  8. redis 五大数据结构&lowbar;&lowbar;常用命令

    linux 下下载redis数据库 apt install redis 如果提示权限不够的话, 直接提权: sudo apt install redis-server linux启用.停止服务 ser ...

  9. 山东省网络安全技能大赛 部分writeup

    web1 提示:ip不在范围内 直接抓包加client-ip: 127.0.0.1 即可得到flag web2 <?php include 'here.php';    $key = 'kela ...

  10. 解决jQuery和其他库冲突

    <script> console.log($); // //jquery在其他库之前导入,直接使用jQuery()或 // var $replace = jQuery.noConflict ...