12zTree - 单击节点控制

简介: 12zTree - 单击节点控制

设置步骤:

1、beforeClick / onClick 事件回调函数控制

2、setting 配置信息说明

需要设置 setting.callback.beforeClick 和 setting.callback.onClick 属性, 详细请参见 API 文档中的相关内容

image.png

代码:

<!DOCTYPE html>
<HTML>
<HEAD>
  <TITLE> ZTREE DEMO - beforeClick / onClick</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.js"></script>
  <SCRIPT type="text/javascript">
    <!--
    var setting = {
      data: {
        key: {
          title:"t"
        },
        simpleData: {
          enable: true
        }
      },
      callback: {
        beforeClick: beforeClick
      }
    };
    var zNodes =[
      { id:1, pId:0, name:"普通的父节点", t:"我很普通,随便点我吧", open:true},
      { id:11, pId:1, name:"叶子节点 - 1", t:"我很普通,随便点我吧"},
      { id:12, pId:1, name:"叶子节点 - 2", t:"我很普通,随便点我吧"},
      { id:13, pId:1, name:"叶子节点 - 3", t:"我很普通,随便点我吧"},
      { id:2, pId:0, name:"NB的父节点", t:"点我可以,但是不能点我的子节点,有本事点一个你试试看?", open:true},
      { id:21, pId:2, name:"叶子节点2 - 1", t:"你哪个单位的?敢随便点我?小心点儿..", click:false},
      { id:22, pId:2, name:"叶子节点2 - 2", t:"我有老爸罩着呢,点击我的小心点儿..", click:false},
      { id:23, pId:2, name:"叶子节点2 - 3", t:"好歹我也是个领导,别普通群众就来点击我..", click:false},
      { id:3, pId:0, name:"郁闷的父节点", t:"别点我,我好害怕...我的子节点随便点吧...", open:true, click:false },
      { id:31, pId:3, name:"叶子节点3 - 1", t:"唉,随便点我吧"},
      { id:32, pId:3, name:"叶子节点3 - 2", t:"唉,随便点我吧"},
      { id:33, pId:3, name:"叶子节点3 - 3", t:"唉,随便点我吧"}
    ];
    function beforeClick(treeId, treeNode, clickFlag) {
      return (treeNode.click != false);
    }
    $(document).ready(function(){
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    //-->
  </SCRIPT>
</HEAD>
<BODY>
    <ul id="treeDemo" class="ztree"></ul>
</BODY>
</HTML>
目录
相关文章
|
JavaScript
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
1453 0
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
|
7月前
|
JSON 前端开发 数据格式
获取ztree树的选中子菜单信息并且提交给后端
获取ztree树的选中子菜单信息并且提交给后端
33 0
获取ztree树的选中子菜单信息并且提交给后端
|
8月前
13zTree - 展开 / 折叠父节点控制
13zTree - 展开 / 折叠父节点控制
36 0
13zTree - 展开 / 折叠父节点控制
|
7月前
layer弹框删除ztree节点非阻塞问题解决
layer弹框删除ztree节点非阻塞问题解决
21 0
|
7月前
|
Web App开发 JSON 前端开发
ztree实现根节点单击事件,显示节点信息
ztree实现根节点单击事件,显示节点信息
47 0
|
7月前
|
数据处理 网络架构
ElementUI - 主页面--动态树&右侧内容管理
ElementUI - 主页面--动态树&右侧内容管理
53 0
|
7月前
|
JavaScript Java
ztree实现根节点右击事件,弹出菜单进行增删改操作
ztree实现根节点右击事件,弹出菜单进行增删改操作
24 0
|
7月前
zTree根据ID选中节点
zTree根据ID选中节点
|
7月前
ztree隐藏指定节点后面的(重命名和删除)图标
ztree隐藏指定节点后面的(重命名和删除)图标
|
8月前
28zTree - 拖拽节点高级控制
28zTree - 拖拽节点高级控制
18 0