zTree多选框模糊查询

我会带着你远行 2022-05-13 22:48 325阅读 0赞

一.设置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);
    				}
    			}
    		}
    	 }

三.实现效果

![70][]

[70]: /images/20220514/4673142e7f9f4defa35b38f846750b68.png

发表评论取消回复

表情：

评论列表（有 0 条评论，325人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 多选框&单选框

此多选框、单选框可以换按钮皮肤，只更改雪碧图的定位即可。没有使用自带的控件，是重新写的。用到了模块化开发，类的导出导入，类的继承。 <!-- html部分

向右看齐/ 2023年07月07日 12:57/ 0 赞/ 12 阅读

相关 element动态生成单选框，多选框

<template> <div class="demo"> <div> <ul> <li v-f

谁借莪１个温暖的怀抱￠/ 2022年10月07日 09:51/ 0 赞/ 315 阅读

相关 EasyUI下拉框实现多选、全选、复选和模糊查询

其实整个的思路还是很麻烦的。之前网上查不到能囊括上面所有东西的。但是参考之后还是摸出了一种新的方法，但是仍然不完美。毕竟是在封装的东西上面修改。 ![Image 1][]

比眉伴天荒/ 2022年07月18日 00:21/ 0 赞/ 372 阅读

相关 Ztree创建带有复选框的树

需要增加的属性 check: { enable: true } 封装的工具代码 function createTree(url, treeId)

绝地灬酷狼/ 2022年06月16日 11:13/ 0 赞/ 189 阅读

相关 ztree模糊查询

![20180508161430109][] ![20180508161447310][] 源码请在[https://download.csdn.ne

以你之姓@/ 2022年05月25日 05:09/ 0 赞/ 222 阅读

相关 ztree 模糊查询

之前写的一篇文章仅符合自己项目需求的一种写法，现提供通用的书写方式，废话少说见代码。页面效果： ![70][]![70 1][] 代码如下： //co

朴灿烈づ我的快乐病毒、/ 2022年05月20日 03:15/ 0 赞/ 251 阅读

相关 zTree多选框模糊查询

一.设置seting的view属性 view: { dblClickExpand: true, selectedMulti : true,/

我会带着你远行/ 2022年05月13日 22:48/ 0 赞/ 326 阅读

相关 Android 搜索框的实时查询/模糊查询

参考 http://www.cnblogs.com/jeffen/p/6958235.html http://blog.csdn.net/ljd4305/article/d

骑猪看日落/ 2022年04月16日 06:56/ 0 赞/ 712 阅读

相关多选框使用

[https://crlcu.github.io/multiselect/\][https_crlcu.github.io_multiselect] [https_crlc

港控/mmm°/ 2022年01月07日 04:51/ 0 赞/ 361 阅读

相关 zTree 模糊搜索

/\\ \ 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】 \ @param treeId \ @param searchConditionId 搜索条件Id

古城微笑少年丶/ 2021年11月13日 21:56/ 0 赞/ 377 阅读