Ztree树的复选框和获取选择的节点实例和代码

最新推荐文章于 2021-01-14 16:16:47 发布

原创最新推荐文章于 2021-01-14 16:16:47 发布 · 3w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#ztree js 复选框

笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Ztree中添加复选框，并提供了获取选中节点ID的示例代码。通过JavaScript和jQuery，展示了如何初始化Ztree、设置复选框功能、以及获取被选中的公司办公室和策略组ID。还提到了当需要获取所有叶子节点ID时，可以使用`onClick`事件结合递归函数实现。

关于ztree中添加复选框的问题，自己研究查资料和api 获取得到被选择的树节点的id。

如图只获取公司办公室和策略组的id

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
选择收件人
</title>
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/zTreeStyle/demo.css" type="text/css">
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script charset="utf-8" src="<%=request.getContextPath()%>/js/jquery-1.7.1.min.js"></script>
	<script charset="utf-8" src="<%=request.getContextPath()%>/js/jquery.ztree.all-3.5.min.js"></script>
	<SCRIPT type="text/javascript">
	$(function(){
		//查询所有的菜单信息
		$.ajax({
			type:'post',
			url:'getorganization.jsp',
			success:function(result){
				

				var setting = {
					data:{
						simpleData:{
							enable:true
						}
					},
					check: {  
						enable: true
					}

				};
				eval("var ztreenode="+result);
				$.fn.zTree.init($("#treeDemo"),setting,ztreenode);
				SelectNode();
			}
		});
	});
	 function SelectNode() {
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
             
            var treenode = treeObj.getNodeByParam("id", <%=code%>, null);
            treeObj.expandNode(treenode, true, true, true);
            treeObj.selectNode(treenode);
        }
	function  fun_getCheckValue(){
	   var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		
				var nodes=zTree.getChangeCheckedNodes(true);

				var result='';
				if(nodes.length==0){
					alert("请选择部门！！");
					return false;
				}
				 for (var i = 0; i < nodes.length; i++) {
					var halfCheck = nodes[i].getCheckStatus();
					 if (!halfCheck.half){
						result += nodes[i].id +',';
					 }
                
				}
				result=result.substring(0,result.lastIndexOf(","));
		window.opener.showChiledValue_(result);//传到父页面
		  window.close();
	
	}
</SCRIPT>
</head>
<style type="text/css">

</style>
<body style='background: none repeat scroll 0 0 #ddedf1;'>  
<div style="float:">
<table >
<tr><td>
<div style="float: left; width: 280px;">
<table width="100%" style="padding-left: 10px;">

    <tr>
	<td align="left" >组织部门：</td>
	</tr>
	<tr>
		<td><div  class="zTreeDemoBackground left" style="border-width: 0px 1px 1px; border-style: solid; border-color: rgb(220, 217, 212); border-radius: 0px; padding: 0px; margin-top: 0px; width: 100%;background: none repeat scroll 0 0 #ffffff;overflow: auto;height:250px">
			
				<div id="treeDemo" class="ztree"></div>
		
		</div>
		</td>
	</tr>
	</table>

</div>
</div>
</td></tr>
		<tr>
				<td align="center" ><input type="button"
					class="btn btn_main" value="确定" onClick="fun_getCheckValue();">

				</td>
			</tr>
</table>
	</div>


</body>
</html>

如果全部获取的话。并且给节点绑定click事件的话。代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
选择收件人
</title>
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/zTreeStyle/demo.css" type="text/css">
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script charset="utf-8" src="<%=request.getContextPath()%>/js/jquery-1.7.1.min.js"></script>
	<script charset="utf-8" src="<%=request.getContextPath()%>/js/jquery.ztree.all-3.5.min.js"></script>
	<SCRIPT type="text/javascript">
	$(function(){
		//查询所有的菜单信息
		$.ajax({
			type:'post',
			url:'getorganization.jsp',
			success:function(result){
				

				var setting = {
					data:{
						simpleData:{
							enable:true
						}
					},
					check: {  
						enable: true
					},  
					callback: {
						onClick: zTreeOnClick
					}

				};
				console.info(result);
				eval("var ztreenode="+result);
				$.fn.zTree.init($("#treeDemo"),setting,ztreenode);
				SelectNode();
			}
		});
	});
	 function SelectNode() {
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
             
            var treenode = treeObj.getNodeByParam("id", <%=code%>, null);
            treeObj.expandNode(treenode, true, true, true);
            treeObj.selectNode(treenode);
        }
	function getAllChildrenNodes(treeNode,result){

      if (treeNode.isParent) {

        var childrenNodes = treeNode.children;

        if (childrenNodes) {

            for (var i = 0; i < childrenNodes.length; i++) {

                result += ','+childrenNodes[i].id ;

                result = getAllChildrenNodes(childrenNodes[i], result);

            }

        }

    }

    return result;

}
	function zTreeOnClick(event, treeId, treeNode) {
	   // alert(treeNode.id + ", " + treeNode.name);
	   var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	   var str =treeNode.id;

     str = getAllChildrenNodes(treeNode,str);

     alert(str); //所有叶子节点ID
	  /* var nodes=zTree.getNodes(); 
	   var nodes_array = zTree.transformToArray (nodes);
		alert(nodes_array.length);
	   for(var i=0;i<nodes_array.length;i++){
		   alert(nodes_array[i].name); 
		  } 
		  */
	    $.ajax({
	    	url:'getYuangong.jsp?deptcode='+treeNode.id+"&mm="+<%=Math.random()%>,
			success:function(result){
				$("#employee").html(result);
				}
	    });
	};
	
	$(function(){
		   $.ajax({
		    	url:'getUserTongshi.jsp?mm='+<%=Math.random()%>,
				success:function(result){
					$("#employee").html(result);
					}
		    });
		
		
		});
	function rightMove(value){
			if(value!=""){
		       $("#choseemployee").append('<option  value="'+value+'">'+$('#employee option:selected').text()+'</option>');
		       $('#employee option:selected').remove();
			}
		   
	}
	function leftMove(value){
		
		if(value!=""){
	       $("#employee").append('<option  value="'+value+'">'+$('#choseemployee option:selected').text()+'</option>');
	       $('#choseemployee option:selected').remove();
		}
	}

	
</SCRIPT>
</head>
<style type="text/css">

</style>
<body style='background: none repeat scroll 0 0 #ddedf1;'>  
<div style="float:">
<table >
<tr><td>
<div style="float: left; width: 280px;">
<table width="100%" style="padding-left: 10px;">

    <tr>
	<td align="left" >组织部门：</td>
	</tr>
	<tr>
		<td><div  class="zTreeDemoBackground left" style="border-width: 0px 1px 1px; border-style: solid; border-color: rgb(220, 217, 212); border-radius: 0px; padding: 0px; margin-top: 0px; width: 100%;background: none repeat scroll 0 0 #ffffff;overflow: auto;height:250px">
			
				<div id="treeDemo" class="ztree"></div>
		
		</div>
		</td>
	</tr>
	</table>

</div>
<div style='float:right;width: 250px;'>
<table width="100%" >

    <tr>
	<td  align="left">已选收件人：</td>
	</tr>
	<tr>
		<td>
		<div id="aa"style="border-width: 0px 1px 1px; border-style: solid; border-color: rgb(220, 217, 212); border-radius: 0px; padding: 0px; margin-top: 0px; width: 100%;background: none repeat scroll 0 0 #ffffff;overflow: auto;height:150px">
			<select ondblclick="leftMove(this.value);" name="choseemployee" id="choseemployee"	multiple="multiple"style="width: 240px; height: 150px;">
			
			</select>
			</div>
		</td>
	</tr>
	</table>

</div>
<div style='float:right;width: 200px;padding-right: 30px;'>
<table width="100%">

    <tr>
	<td align="left">部门员工：</td>
	</tr>
	<tr>
		<td>
		<div id="content"style="border-width: 0px 1px 1px; border-style: solid; border-color: rgb(220, 217, 212); border-radius: 0px; padding: 0px; margin-top: 0px; width: 100%;background: none repeat scroll 0 0 #ffffff;overflow: auto;height:150px">
				<select ondblclick="rightMove(this.value);" name="employee" id="employee"	multiple="multiple"style="width: 200px; height: 150px;">
			
				</select>
			</div>
		</td>
	</tr>
	</table>

</div>
</td></tr>
		<tr>
				<td align="center" ><input type="button"
					class="btn btn_main" value="确定" onClick="fun_getCheckValue();">

				</td>
			</tr>
</table>
	</div>
	<script type="text/javascript">
	function fun_getCheckValue(){
		var staffnos=[];
		var staffnames=[];
		 for(i=0;i<$("#choseemployee option").length;i++){
			 staffnos.push($("#choseemployee option")[i].value);
			 staffnames.push($("#choseemployee option")[i].text);
		 }
		 window.opener.showChiledValue_(staffnos,staffnames);//传到父页面
		  window.close();
	}

	</script>

</body>
</html>