zoukankan      html  css  js  c++  java
  • ztree使用实例

    一、当某节点被选择或被取消选择时获取所有被选择的节点:

    <link rel="stylesheet" href="./static/libs/ztree/css/metroStyle/metroStyle.css" type="text/css"><!-- ztree -->
    <script src="./static/libs/ztree/js/jquery.ztree.core-3.5.js"></script><!-- ztree -->
    <script src="./static/libs/ztree/js/jquery.ztree.exedit.js"></script><!-- ztree -->
    <script src="./static/libs/ztree/js/jquery.ztree.excheck-3.5.js"></script><!-- ztree -->
    <script src="./static/libs/ztree/js/jquery.ztree.exhide-3.5.js"></script><!-- ztree -->
    <style>
    ul.ztree {border: 0 solid #617775;background: #ffffff;100%;height:100%;overflow-y:hidden;overflow-x:hidden;}
    </style>
    <ul id="treeDemo" class="ztree"></ul>
    var setting = {
        check: {
            enable: true,
            chkboxType: {
                "Y": "ps",
                "N": "ps"
            }//设置子父关联关系
        },
    	data: {
    		simpleData: {
    			enable: true
    		}
    	},
        callback: {
            beforeClick: beforeClick,
            onCheck: onCheck
        }
    };
    
    function beforeClick(treeId, treeNode) {
      var zTree = $.fn.zTree.getZTreeObj("treeDemo");
      zTree.checkNode(treeNode, !treeNode.checked, null, true);
      return true;//此处一定设置为true,否则当取消选择时,onCheck函数不会起作用
    }
    
    function onCheck(e, treeId, treeNode) {
      var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
          nodes = zTree.getCheckedNodes(true),
          v = "";
      for (var i=0, l=nodes.length; i<l; i++) {
          if(nodes[i].isParent){
    
          }else{
              v += nodes[i].name + ",";//name为获取节点名称 ,id为获取id,pId为获取pId
          }
      }
      if (v.length > 0 ) {
        v = v.substring(0, v.length-1);
      }
      alert(v);
    }
    
    var zNodes =[
    	{ id:1, pId:0, name:"根部门", open:true},
    	{ id:11, pId:1, name:"一级部门1", open:true},
    	{ id:111, pId:11, name:"一级部门1子部门1"},
    	{ id:112, pId:11, name:"一级部门1子部门2"},
    	{ id:12, pId:1, name:"一级部门2", open:true},
    	{ id:121, pId:12, name:"一级部门2子部门1"},
    	{ id:122, pId:12, name:"一级部门2子部门2"}
    ];
    
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);

    二、点击获取当前节点值:

    var setting = {
    	data: {
    		simpleData: {
    			enable: true
    		}
    	},
        callback: {
            onClick: onClick
        }
    };
    
    function onClick(event, treeId, treeNode) {
      alert(treeNode.id + ", " + treeNode.name);
      //你的ajax代码
    }
    
    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:"唉,随便点我吧"}
    ];
    
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);

    三、获取第一个父节点的第一个子节点 :

        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        console.log(zTree.getNodes()[0].children[0]);

    四、获取所有节点:

    一般情况下,通过zTree官方API的方法获取得到的是一个包含所有子节点的根节点(子节点都处于 children 属性下)

    var treeObj = $.fn.zTree.getZTreeObj(“tree");
    var nodes = treeObj.getNodes();

    当我们需要一次获取所有树节点的时候,有两种方法:

    一种是通过递归的方式(此处就不提及了)。

    另一种就是通过zTreet提供的方法:

    var treeObj = $.fn.zTree.getZTreeObj(”tree“);
    var node = treeObj.getNodes();
    var nodes = treeObj.transformToArray(node);

    这种方法得到的就是整颗树的所有节点集合了。

    五、取消节点选择:

    var treeId = $.fn.zTree.getZTreeObj("#tree-id");    	
    treeId.checkAllNodes(false);
    treeId.cancelSelectedNode();

    六、设置下拉树:

    下拉树html:

    <div class="form-group">
    	  <label class="col-lg-4 col-md-4 col-sm-4 control-label font-normal" style="text-align: right;">用户列表:</label>
    	  <div class="col-lg-5 col-md-5 col-sm-5" style="position:relative;z-index:9999999;">
    	        <input type="text" class="form-control" name="addUserModalUsers" id="add-user-modal-users" onfocus="this.blur();" onclick="showMenu();"/>
    <!--onfocus="this.blur();" 是为了禁止用户输入-->
    	        <div id="add-user-modal-users-content" style="display:none; position: absolute;  100%;">
    	        <ul id="add-user-modal-users-tree" class="ztree" style=" 100%;height: 200px; overflow: auto;border: 1px solid #e2e2e2;box-shadow: 0 0 10px #ccc;"></ul>
    	        </div>
    	   </div>
    </div>

    下拉树设置: 

    /**
     * 增加用户下拉树
     */
    var UsersTreeSetting = {
    		check : {
    			enable : true,
    			chkboxType : {
    				"Y" : "ps",
    				"N" : "ps"
    			}
    		},
    		view : {
    			dblClickExpand : false
    		},
    		data : {
    			simpleData : {
    				enable : true
    			}
    		},
    		callback : {
    			beforeClick : function(treeId, treeNode) {
    				var zTree = $.fn.zTree.getZTreeObj("add-user-modal-users-tree");
    				zTree.checkNode(treeNode, !treeNode.checked, null, true);
    				return true;
    			},
    			onCheck : function(e, treeId, treeNode) {
    				var zTree = $.fn.zTree.getZTreeObj("add-user-modal-users-tree"),
    					nodes = zTree.getCheckedNodes(true), 
    					v = "";
    				for (var i = 0, l = nodes.length; i < l; i++) {
    					if (nodes[i].isParent) {
    
    					} else {
    						v += nodes[i].name + ",";//只获取最末端节点的值
    					}
    				}
    				if (v.length >= 0){
    					v = v.substring(0, v.length - 1);
    					$("#add-user-modal-users").val(v).change();
    				}
    			}
    		}
    };
    
    function showMenu() {
    	var parentDept = $("#add-user-modal-users");
    	var parentDeptOffset = $("#add-user-modal-users").offset();
    	$("#add-user-modal-users-content").css({
    		right : -10 + "px",
    		top : (parentDept.outerHeight() + 5) + "px"
    	}).slideDown("fast");
    
    	$("body").bind("mousedown", onBodyDown);
    }
    
    function hideMenu() {
    	$("#add-user-modal-users-content").fadeOut("fast");
    	$("body").unbind("mousedown", onBodyDown);
    }
    
    function onBodyDown(event) {
    	if (!(event.target.id == "menuBtn"
    			|| event.target.id == "add-user-modal-users"
    			|| event.target.id == "add-user-modal-users-content" || $(event.target).parents(
    			"#add-user-modal-users-content").length > 0)) {
    		hideMenu();
    	}
    }

    通过异步请求获得节点数据:

            $.ajax({
                type: "GET",
                url: 'data/' + 'user' + '.json',
                data: {},
                dataType: "json",
                success: function(data){
                    $.fn.zTree.init($("#add-user-modal-users-tree"), UsersTreeSetting, data);
                    var usersTreeObj = $.fn.zTree.getZTreeObj("add-user-modal-users-tree");
                    usersTreeObj.expandAll(true);
                },
                error: function(data){
                    alert("error");
                    console.log(data);
                }
            });

    user.json: 

    [
      { "id":1, "pId":0, "name":"ktsdm", "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":1, "name":"电子科学与工程学院", "t":"点我可以,但是不能点我的子节点,有本事点一个你试试看?", "open":true},
      { "id":21, "pId":2, "name":"教授 - 1", "t":"你哪个单位的?敢随便点我?小心点儿..", "click":false},
      { "id":22, "pId":2, "name":"教授 - 2", "t":"我有老爸罩着呢,点击我的小心点儿..", "click":false},
      { "id":23, "pId":2, "name":"教授 - 3", "t":"好歹我也是个领导,别普通群众就来点击我..", "click":false},
      { "id":3, "pId":1, "name":"计算机学院", "t":"别点我,我好害怕...我的子节点随便点吧...", "open":true, "click":false },
      { "id":31, "pId":3, "name":"教授 - 1", "t":"唉,随便点我吧"},
      { "id":32, "pId":3, "name":"教授 - 2", "t":"唉,随便点我吧"},
      { "id":33, "pId":3, "name":"教授 - 3", "t":"唉,随便点我吧"}
    ]

     七、通过代码设置某一节点样式:

                $.fn.zTree.init($("#department-tree"), departmentTreeSetting, data);
                var zTree_Menu = $.fn.zTree.getZTreeObj("department-tree");
                var curMenu = zTree_Menu.getNodes()[0];
                zTree_Menu.selectNode(curMenu);
                var a = $("#" + zTree_Menu.getNodes()[0].tId + "_a");
                a.addClass("cur");
    var deptTree = $.fn.zTree.getZTreeObj("department-tree");
    var getAddedNode = deptTree.getNodeByParam("id", chosenDeptId, null);
                                
    deptTree.selectNode(getAddedNode);
    var currentNode = $("#" + getAddedNode.tId + "_a");
    currentNode.addClass("cur");

    八、在树节点中显示name属性中的内容,树节点鼠标保持hover状态时显示其它属性内容:

    按照如下方式设置即可:

    check: {
         enable: true,
         chkboxType : {
              "Y" : "ps",
              "N" : "ps"
         }
    },
    data: {
         simpleData: {
               enable: true,
               idKey : "did",
               pIdKey : "pdid"
         },
         key: {
               title: "alias"
         }
    },
  • 相关阅读:
    Atitit.Java exe bat  作为windows系统服务程序运行
    Atitit. Object-c语言 的新的特性  attilax总结
    Atitit. Object-c语言 的新的特性  attilax总结
    Atitit。Time base gc 垃圾 资源 收集的原理与设计
    Atitit。Time base gc 垃圾 资源 收集的原理与设计
    Atitit.go语言golang语言的新的特性  attilax总结
    Atitit.go语言golang语言的新的特性  attilax总结
    Atitit.pdf 预览 转换html attilax总结
    Atitit.pdf 预览 转换html attilax总结
    Atitit.office word  excel  ppt pdf 的web在线预览方案与html转换方案 attilax 总结
  • 原文地址:https://www.cnblogs.com/samve/p/9757842.html
Copyright © 2011-2022 走看看