jquery和zTree 树结构的测试demo 2

最新推荐文章于 2023-04-06 18:27:20 发布

原创最新推荐文章于 2023-04-06 18:27:20 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #zTree

jquery 同时被 2 个专栏收录

13 篇文章

订阅专栏

ztree

1 篇文章

订阅专栏

本文介绍如何使用zTree插件构建短信和邮件通讯录，包括初始化树状结构、加载数据、实现复选框功能及根据选择更新输入框等。

js代码：      

        $(function(){
		
		initTree("dxTxl",CONST_URL.LOAD_DXTREE,"id","yhzid");//初始化短信通讯录
		initTree("yjTxl",CONST_URL.LOAD_YJTREE,"id","yhzid");//初始化邮件通讯录

        }

        //构建zTree
	function  initTree(zTreeID,url,id,pid) {
		  var setting = {
				check: {
			        enable: true  //显示checkbox
			    },  
				data: {
			          key: {name:"xm"},
			          simpleData: {
			              enable: true,
			              idKey : "id",
			              pIdKey : "yhzid" 
			          }
			    },
			    callback: {
					onCheck: getCheckedData   // checkbox 值改变触发的方法
			    }
		};	
		$.ajax({
	               type: "get",
	               dataType: "json",
	               url: url,
	               success: function(data){
	                  $.fn.zTree.init($("#"+zTreeID), setting, data.data); 
	               }
	   });
	}

        //触发的方法
        function getCheckedData(e,treeId,treeNode){
		if(treeNode.checked){  //勾选操作
			if (treeNode.isParent) {  //判断是否为父节点
				 var childrenNodes = treeNode.children;  // 获取子节点的对象
				 if (childrenNodes){
					 $.each(childrenNodes,function(){
                                             setDxOrYj(this);   //往输入框set值
                                         });
				 }
			}else{
				setDxOrYj(treeNode);
			} 
		}else{ //取消勾选操作
			if (treeNode.isParent) {
				 var childrenNodes = treeNode.children;
				 if (childrenNodes){
					 $.each(childrenNodes,function(){
                                              clearDxOrYj(this); // 清空输入框的值
                                         });
				 }
			}else{
				clearDxOrYj(treeNode);
			}
		}
	}
	//往收信人输入框set值
	function setDxOrYj(treeNode){
		if(treeNode.txllx=="001"){ //短信通讯录
			if($('#dxsxr').val()==""){
				$('#dxsxr').val(treeNode.sj);
			}else{
				$('#dxsxr').val($('#dxsxr').val()+";"+treeNode.sj);
			}
		}else if(treeNode.txllx=="002"){ //邮件通讯录
			if($('#yjsjr').val()==""){
				$('#yjsjr').val(treeNode.dzyj);
			}else{
				$('#yjsjr').val($('#yjsjr').val()+";"+treeNode.dzyj);
			}
		}
	}
	//消除收信人输入框的值
	function clearDxOrYj(treeNode){  
		var data = "";
		if(treeNode.txllx=="001"){ //短信通讯录
			var dxdata = ($('#dxsxr').val()).split(";");
			for(var i=0;i<dxdata.length;i++){
				if(treeNode.sj!=dxdata[i]) {
					if(data==""){data += dxdata[i];}
					else{data += ";"+dxdata[i];}
				};
			}
			$('#dxsxr').val(data);
		}else if(treeNode.txllx=="002"){ //邮件通讯录
			var yjdata = $('#yjsjr').val().split(";");
			for(var i=0;i<yjdata.length;i++){
				if(treeNode.dzyj!=yjdata[i]) {
					if(data==""){data += yjdata[i];}
					else{data += ";"+yjdata[i];}
				};
			}
			$('#yjsjr').val(data);
		}
	}