zTree多选框模糊查询

一.设置seting的view属性

view: {
    dblClickExpand: true,
	selectedMulti : true,//可以多选
	showLine: true,
	fontCss: function (treeId, treeNode) {//设置高亮显示颜色和普通显示颜色
	    return (!!treeNode.highlight) ? {color: "#A60000", "font-weight": "bold"} : {
		    color: "#000", "font-weight": "normal"
		    };
		}
	}

二.CSS关键代码

<input type="text" id="materialClass"  oninput="searchMaterial();"  name="materialClass" maxlength="40" placeholder="关键字">
<div class="ztree" id="materialTree" ></div>

二.JS关键代码

function createTree(treeId,dL,dLSize){
		 //获取树参数默认值
		 var setting=getSetting();
		 var zNodes=new Array();
		 //设置根节点数据
		 zNodes[0]={ id:'##', pId:"-1", name:'物资类别', t:'物资类别',open:true};
		 for(var i=0;i<dLSize;i++){//设置子节点数据
			zNodes[i+1]={ id:dL[i].classCode, pId:dL[i].parentCode, name:dL[i].className+"("+dL[i].classCode+")",classId:dL[i].classId, t:dL[i].className};
		 }
		 //1)创建zTree树
		 $.fn.zTree.init($(treeId), setting, zNodes);
		 //2)初始化已经被选中的物资类别
		 checkMaterial();
	 }

function checkMaterial(){
		 var classCodes = $("#classCodes").val();//物资编码
		 var datalist = classCodes.split("，");//将物资编码打散成数组
		 //获取所有树节点
		 var treeObj = $.fn.zTree.getZTreeObj("materialTree");
		 if(datalist!='' &&datalist.length>0){
			 var nodes=treeObj.getNodes();//获取所有子节点
			 for(var i=0;i<datalist.length;i++){
				 //通过id查找节点
				 var node = treeObj.getNodeByParam("classId",datalist[i],null);
				 //选中该节点
				 if(node!=null){//先判断节点是否为空
					 //选中该节点
					 treeObj.checkNode(node,true,true);
				     //获取该节点父节点
					 var parent = node.getParentNode();
		             if(!parent.open){//如果父节点没有展开则展开父节点
		            	 treeObj.expandNode(parent,true,true);
		             }
				 }
			 }
		 }
	 }

function onCheck(event, treeId, treeNode){
		 var classCodes = $("#classCodes").val();//物资编码
		 var classNames = $("#classNames").val();//物资名字
		 //alert("onCheck");
		 //获取所有树节点
		 var treeObj = $.fn.zTree.getZTreeObj("materialTree");
		 if(treeNode.checked){//如果是选中节点
			 if(treeNode.isParent){//如果选中的是父节点(有子节点的节点)
				 //获取选中的父节点的所有子节点
				 var childrenNodes = treeNode.children;
				 for (var i = 0; i < childrenNodes.length; i++) {
					 classCodes+="，"+childrenNodes[i].classId;
					 classNames+="，"+childrenNodes[i].name;
	             } 
			 }else{//如果是子节点(无子节点的节点)
				 classCodes += "，"+treeNode.classId;
				 classNames += "，"+treeNode.name;
			 }
		 }else{//如果是取消选中
			 if(treeNode.isParent){//如果取消的是父节点(有子节点的节点)
				 //获取消的父节点的所有子节点
				 var childrenNodes = treeNode.children;
				 for (var i = 0; i < childrenNodes.length; i++) {
					 var classCode="，"+childrenNodes[i].classId;
					 var className="，"+childrenNodes[i].name;
					 //删除取消的节点对应的数据
					 classCodes=classCodes.replace(classCode, "");
					 classNames=classNames.replace(className, "");
	             }
			 }else{//如果是子节点(无子节点的节点)
				 classCode = "，"+treeNode.classId;
				 className = "，"+treeNode.name;
				 //删除取消的节点对应的数据
				 classCodes=classCodes.replace(classCode, "");
				 classNames=classNames.replace(className, "");
			 }
		 }
		 //保存选中的值(物资类别编码、物资类别名字)
		 $("#classCodes").val(classCodes);
		 $("#classNames").val(classNames);
	 }


function searchMaterial(){
		//初始化树
		createTree("#materialTree",${classListJson},${classListSzie});
		//获取所有树对象
		var zTree = $.fn.zTree.getZTreeObj("materialTree");
		//获取查询参数
		var materialClass=$.trim($("#materialClass").val());
		if(materialClass != ""){
			//模糊查询节点
			var nodes = zTree.getNodesByParamFuzzy("name", materialClass, null);
			if (nodes.length>0) {
				for(var i=0;i<nodes.length;i++){
					//设置高亮
					nodes[i].highlight = true;
					//更新节点
					zTree.updateNode(nodes[i]);
					zTree.expandNode(nodes[i].getParentNode(), true, null, null, false);
				}
			}
		}
	 }

三.实现效果