ZTreeDemo

everlxq

浏览: 108748 次
性别:
来自: 青岛

最近访客更多访客>>

lilybao

kalin001

haodyy

Jessie丶J

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<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-3.5.js"></script>
  <script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>
    <base href="<%=basePath%>">
    <title>ZTree</title>
    <script type="text/javascript">
    var setting={
    	check: {
				enable: true,
				chkStyle: "checkbox",
				chkboxType: { "Y": "", "N": ""}
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onCheck: onCheck,
				onClick: zTreeOnClick,
				beforeCheck: zTreeBeforeCheck
	}
    };
    var s="";
    function zTreeBeforeCheck(treeId, treeNode) {
    	if(treeNode!=null){
    	for(var i=0;i<treeNode.length;i++){
    		s+=treeNode[i].name+",";
    	}
    	}
    };
    function onCheck(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treedemo");
			var select = $("#select").val();
			if(select==0){
				alert("请选择一个选取类型..");
				treeNode.checked=false;
			}
			if(select==1){
			s=treeNode.name+",";
		if(!treeNode.checked){
			var nodes = treeNode.children;
			if(nodes!=null){
			for(var i=0;i<nodes.length;i++){
				if(nodes[i].checked==true){
					zTree.checkAllNodes(false);
				}
			}
			}
        }else{
            zTree.checkAllNodes(false);
            var nodes = treeNode.children;
            zTree.checkNode(treeNode, !treeNode.checked, true);
           if(nodes!=null){
            for(var i=0;i<nodes.length;i++){
            	zTree.checkNode(nodes[i], !nodes[i].checked, true);
            	s+=nodes[i].name+",";
            }
          }
         }
		}
		if(select==2){
			var node= treeNode.getParentNode();
			if(treeNode.checked==true){
			if(!node.checked==true){
			var nodes1 = zTree.getCheckedNodes(true);
			if(nodes1!=null){
			var node1 = nodes1[0];
			var nodes2=node1.children;
			if(nodes2!=null){
			var flags=false;
			for(var i=0;i<nodes2.length;i++){
				if(treeNode.name==nodes2[i].name){
					flags=true;
				}
			}
			if(!flags){
				zTree.checkAllNodes(false);
			}
			}
			}
			zTree.checkNode(node, !node.checked, true);
			zTree.checkNode(treeNode, true, true);
			s=node.name+","+treeNode.name+",";
			}else{
			var nodes1 = zTree.getCheckedNodes(true);
			var node1 = nodes1[0];
			var nodes2=node1.children;
			s+=treeNode.name+",";
			var flags=false;
			for(var i=0;i<nodes2.length;i++){
				if(treeNode.name==nodes2[i].name){
					flags=true;
				}
			}
			if(!flags){
				zTree.checkAllNodes(false);
				zTree.checkNode(node, !node.checked, true);
			zTree.checkNode(treeNode, !treeNode.checked, true);
			}
			}
		  }
		}
           $("#text").attr("value", s.substring(0,s.length-1));
		};
    function zTreeOnClick(event, treeId, treeNode,clickFlag) {
    //alert(treeNode.tId + ", " + treeNode.name);
     var zTree = $.fn.zTree.getZTreeObj("treedemo");
            //var nodes = zTree.getNodes();
            var nodes = treeNode.children;
            var s=treeNode.name+",";
            for(var i=0;i<nodes.length;i++){
            	s+=nodes[i].name+",";
            }
           $("#text").attr("value", s);
};

   var  znodes=[
	   {id:1,pId:0,name:"山东",open:true},
	   {id:11,pId:1,name:"临沂"},
	   {id:12,pId:1,name:"青岛"},
	   {id:111,pId:11,name:"平邑",open:true},
	   {id:112,pId:11,name:"费县"},
	   {id:1111,pId:111,name:"流峪"},
	   {id:1112,pId:111,name:"仲村"},
	   {id:11111,pId:1111,name:"日本"}
	   ];
    $(function(){
    	$.fn.zTree.init($("#treedemo"),setting,znodes);
    });
    
    </script>
  </head>
  <body>
    This is my JSP page. <br>
    	<input type="text" id="text"/>
		<div id="treedemo" class="ztree"></div>
		<input type="button" value="button" onclick="showCheckeds()"/>
		<input type="hidden" value="0" id="select"/>
		<input type="button" value="根据上级部门选取" onclick="selectByParent()"/>
		<input type="button" value="根据下级部门选取" onclick="selectByChild()"/>
		<script type="text/javascript">
		function selectByParent(){
			if($("#select").val()==2){
			var zTree = $.fn.zTree.getZTreeObj("treedemo");	
			 zTree.checkAllNodes(false);
			}
			$("#select").attr("value",1);
			alert(1);
		}
		
		function selectByChild(){
			if($("#select").val()==1){
			var zTree = $.fn.zTree.getZTreeObj("treedemo");	
			 zTree.checkAllNodes(false);
			}
			$("#select").attr("value",2);
			alert(2);
		}
		
		function showCheckeds(){
		var zTree = $.fn.zTree.getZTreeObj("treedemo");
		var nodes = zTree.getCheckedNodes(true);
		var s="";
		for(var i=0;i<nodes.length;i++){
			s+=nodes[i].name+",";
		}
		alert(s);
		}
		</script>
  </body>
</html>

{id:12,pId:1,name:"青岛"} pId中I是大写

class="ztree" 是必须的

$(function(){
    $.fn.zTree.init($("#treedemo"),setting,znodes);
    });
初始化树的方法

callback: {
onClick: zTreeOnClick
}

function zTreeOnClick(event, treeId, treeNode) {
    alert(treeNode.tId + ", " + treeNode.name);
};

点击的callback事件

实现了点击节点，他的子节点（不包含孙子节点）也同时选中或取消，在点击了这个节点（定为1）后，点击其他节点，1节点及其子节点如果是选中状态则取消选中状态。
返回此节点及其子节点的name && id。
当一个节点1与他的子节点被选中后，点击字节点时，这个子节点11及其他本身的自己点不会选中，11节点变成为选中状态
返回checked的节点属性。

brforeCheck方法实现通过子节点找父节点1，再添加1的多个子节点，以及取消功能
实现点击不是父节点1的子节点2时，取消所选中选项，将节点2及其父节点选中！

子找父，父找子之间切换先取消树的所有选项框的选中状态

解决刚开始时获取选中项时空值导致不能选择父节点的问题。判断获得的集合是否为空。

解决一开始子节点不能选中的问题。顺序乱，想的不周全

callback: {                 

                onClick: onClick
            }
        };
        function onClick(event, treeId, treeNode,clickFlag) {
            alert(treeNode.tId + ", " + treeNode.name);//点击直接返回节点对象treeNode
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            //var nodes = zTree.getNodes();
            var nodes = zTree.getSelectedNodes();
            alert(nodes[0].name);//返回被选中节点对象
        };

获得checked或selected节点详细查看API

需求实现

分享到：