163 lines
		
	
	
		
			5.0 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
		
		
			
		
	
	
			163 lines
		
	
	
		
			5.0 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
|  | /* | |||
|  |  * treeId:节点树ID | |||
|  |  * keyword:模糊查询输入框的id,如:“#keyword” | |||
|  |  * notSearchType:不参与查询的节点类型 | |||
|  |  * typeSonNode:不参与查询的节点的子孙节点是否也不参与匹配,默认为false,即子节点参与匹配 | |||
|  |  * */ | |||
|  | 
 | |||
|  | window.newFuzzySearch = function( | |||
|  |   treeId, | |||
|  |   keyword, | |||
|  |   notSearchType = [], | |||
|  |   typeSonNode = false, | |||
|  |   dispatch = "" | |||
|  | ) { | |||
|  |   //获取所有节点数据
 | |||
|  |   let zTreeObj = $.fn.zTree.getZTreeObj(treeId); | |||
|  |   let idKey = zTreeObj.setting.data.simpleData.idKey; | |||
|  |   let nodes = zTreeObj.getNodes(); | |||
|  | 
 | |||
|  |   //过滤掉不要的
 | |||
|  |   function getCustomNodes(allNodes) { | |||
|  |     // let allNode = JSON.parse(JSON.stringify(allNodes))
 | |||
|  |     let notSearchTypeNodesIds = []; | |||
|  |     if (notSearchType.length) { | |||
|  |       allNodes.forEach((allNodeItem) => { | |||
|  |         if (notSearchType.includes(allNodeItem.sourceType)) { | |||
|  |           notSearchTypeNodesIds.push(allNodeItem[idKey]); | |||
|  |         } | |||
|  |       }); | |||
|  |       //typeSonNode为true时,循环notSearchType类型的节点,找出其子节点
 | |||
|  |       let res = []; | |||
|  |       if (typeSonNode) { | |||
|  |         notSearchTypeNodesIds.forEach((id, index) => { | |||
|  |           let nodes = zTreeObj.transformToArray( | |||
|  |             zTreeObj.getNodeByParam(idKey, id, null) | |||
|  |           ); | |||
|  |           nodes.forEach((item) => { | |||
|  |             res.push(item[idKey]); | |||
|  |           }); | |||
|  |         }); | |||
|  |         notSearchTypeNodesIds = res; | |||
|  |       } | |||
|  |     } | |||
|  |     let res = []; | |||
|  |     allNodes.forEach((item, index) => { | |||
|  |       if (!notSearchTypeNodesIds.includes(item[idKey])) { | |||
|  |         // console.log(index)
 | |||
|  |         res.push(item); | |||
|  |       } | |||
|  |     }); | |||
|  |     allNodes = res; | |||
|  |     return allNodes; | |||
|  |   } | |||
|  |   /*let allNodes = zTreeObj.transformToArray(nodes); | |||
|  |     let nodeChildren = getCustomNodes(allNodes)*/ | |||
|  |   // console.log("nodeChildren", nodeChildren)
 | |||
|  |   // console.log("allNodes", allNodes)
 | |||
|  | 
 | |||
|  |   //隐藏所有节点
 | |||
|  |   function hideAllNode(allNodes) { | |||
|  |     if (!allNodes || !Array.isArray(allNodes)) { | |||
|  |       console.warn("hideAllNode: allNodes 参数无效"); | |||
|  |       return; | |||
|  |     } | |||
|  |     let nodeChildren = getCustomNodes(allNodes); | |||
|  |     if (nodeChildren && nodeChildren.length > 0) { | |||
|  |       zTreeObj.hideNodes(nodeChildren); | |||
|  |     } | |||
|  |   } | |||
|  | 
 | |||
|  |   //模糊匹配所有符合的节点
 | |||
|  |   function search(contrast, allNodes) { | |||
|  |     if (!allNodes || !Array.isArray(allNodes)) { | |||
|  |       console.warn("search: allNodes 参数无效"); | |||
|  |       return; | |||
|  |     } | |||
|  |     let nodeChildren = getCustomNodes(allNodes); | |||
|  |     if (!nodeChildren) { | |||
|  |       return; | |||
|  |     } | |||
|  |     hideAllNode(allNodes); | |||
|  |     nodeChildren.forEach((item) => { | |||
|  |       if (item.oldname) { | |||
|  |         item.sourceName = item.oldname; | |||
|  |         zTreeObj.updateNode(item); | |||
|  |       } | |||
|  |       if (contrast) { | |||
|  |         if ((item.sourceName || "").indexOf(contrast) > -1) { | |||
|  |           console.log("sourceName包含关键字"); | |||
|  |           console.log(item); | |||
|  |           console.log(item.sourceName); | |||
|  | 
 | |||
|  |           item.oldname = item.sourceName; | |||
|  |           item.highlight = true; | |||
|  |           let F = new RegExp(contrast, "gi"); | |||
|  |           item.sourceName = item.oldname.replace(F, function(h) { | |||
|  |             let str = | |||
|  |               '<span style="color: whitesmoke;background-color: darkred;">' + | |||
|  |               h + | |||
|  |               "</span>"; | |||
|  |             return str; | |||
|  |           }); | |||
|  | 
 | |||
|  |           // let a = item.name
 | |||
|  |           // a = '<span style="color: whitesmoke;background-color: darkred;">' + a + "</span>"
 | |||
|  |           // item.name = a
 | |||
|  |           zTreeObj.setting.view.nameIsHTML = true; | |||
|  |           item.checked = true; | |||
|  |           // zTreeObj.setting.view.fontCss["color"] = "#8B0000"
 | |||
|  |           zTreeObj.updateNode(item); | |||
|  |           zTreeObj.showNode(item); | |||
|  |           showNodePath(item); | |||
|  |         } | |||
|  |         /*zTreeObj.updateNode(item); | |||
|  |                 zTreeObj.showNode(item); | |||
|  |                 showNodePath(item)*/ | |||
|  |       } | |||
|  |     }); | |||
|  |     /*let searchNodes = zTreeObj.getNodesByParamFuzzy('name', contrast); | |||
|  |         console.log('searchNodes', searchNodes) | |||
|  |         searchNodes.forEach(function (node) { | |||
|  |           node.checked = true | |||
|  |           zTreeObj.showNode(node); | |||
|  |           showNodePath(node) | |||
|  |         })*/ | |||
|  |     zTreeObj.expandAll(true); | |||
|  |   } | |||
|  | 
 | |||
|  |   //将查找到的节点父节点按路径设置为显示
 | |||
|  |   function showNodePath(node) { | |||
|  |     let parrentNodes = node.getPath(); | |||
|  |     parrentNodes && | |||
|  |       parrentNodes.forEach(function(node) { | |||
|  |         zTreeObj.showNode(node); | |||
|  |       }); | |||
|  |   } | |||
|  | 
 | |||
|  |   window.treeSearchCb = (value = undefined) => { | |||
|  |     let inputValue = value == undefined ? $(keyword).val() : ""; | |||
|  |     // console.log("搜索值", inputValue)
 | |||
|  |     nodes = zTreeObj.getNodes(); | |||
|  |     let allNodes = zTreeObj.transformToArray(nodes); | |||
|  |     let nodeChildren = getCustomNodes(allNodes); | |||
|  |     console.log("nodeChildren", nodeChildren); | |||
|  |     search(inputValue, allNodes); | |||
|  |     //当查询条件为空时,显示所有节点
 | |||
|  |     console.log("inputValue", inputValue); | |||
|  |     if ((inputValue == null || inputValue === "") && nodeChildren.length >= 0) { | |||
|  |       nodeChildren.forEach(function(node) { | |||
|  |         // node.checked = false
 | |||
|  |         zTreeObj.showNode(node); | |||
|  |       }); | |||
|  |       // zTreeObj.expandAll(false);
 | |||
|  |     } | |||
|  |   }; | |||
|  |   if (dispatch == "") { | |||
|  |     //input框值改变时
 | |||
|  |     $(keyword).bind("input propertychange", treeSearchCb); | |||
|  |   } else { | |||
|  |     // $(dispatch).bind('click', treeSearchCb)
 | |||
|  |   } | |||
|  | }; |