Maison >interface Web >js tutoriel >jquery ztree implémente la fonction de recherche floue_jquery
jquery ztree implémente la fonction de recherche floue_jquery
- WBOYoriginal
- 2016-05-16 15:13:482378parcourir
Cet article partage deux exemples de jquery ztree implémentant la fonction de recherche floue pour votre référence. Le contenu spécifique est le suivant
.Dans le code démo officiel de ztree :
Rechercher des nœuds en fonction de paramètres
Modifiez le fichier ci-dessus dans le code suivant
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exhide-3.5.js"></script>
<!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
<SCRIPT type="text/javascript">
var setting = {
data: {
key: {
title: "t"
},
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"节点属性搜索演示 1", t:"id=1"},
{ id:11, pId:1, name:"关键字可以是名字", t:"id=11"},
{ id:12, pId:1, name:"关键字可以是level", t:"id=12"},
{ id:13, pId:1, name:"关键字可以是id", t:"id=13"},
{ id:14, pId:1, name:"关键字可以是各种属性", t:"id=14"},
{ id:2, pId:0, name:"节点搜索演示 2", t:"id=2"},
{ id:21, pId:2, name:"可以只搜索一个节点", t:"id=21"},
{ id:22, pId:2, name:"可以搜索节点集合", t:"id=22"},
{ id:23, pId:2, name:"搜我吧", t:"id=23"},
{ id:3, pId:0, name:"节点搜索演示 3", t:"id=3"},
{ id:31, pId:3, name:"我的 id 是: 31", t:"id=31"},
{ id:32, pId:31, name:"我的 id 是: 32", t:"id=32"},
{ id:33, pId:32, name:"我的 id 是: 33", t:"id=33"}
];
function focusKey(e) {
if (key.hasClass("empty")) {
key.removeClass("empty");
}
}
function blurKey(e) {
if (key.get(0).value === "") {
key.addClass("empty");
}
}
var lastValue = "", nodeList = [], fontCss = {};
function clickRadio(e) {
lastValue = "";
searchNode(e);
}
function searchNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
if (!$("#getNodesByFilter").attr("checked")) {
var value = $.trim(key.get(0).value);
var keyType = "";
if ($("#name").attr("checked")) {
keyType = "name";
} else if ($("#level").attr("checked")) {
keyType = "level";
value = parseInt(value);
} else if ($("#id").attr("checked")) {
keyType = "id";
value = parseInt(value);
}
if (key.hasClass("empty")) {
value = "";
}
if (lastValue === value) return;
lastValue = value;
if (value === "") {
zTree.showNodes(zTree.transformToArray(zTree.getNodes())) ;
return;
}
if ($("#getNodeByParam").attr("checked")) {
var node = zTree.getNodeByParam(keyType, value);
if (node === null) {
nodeList = [];
} else {
nodeList = [node];
}
} else if ($("#getNodesByParam").attr("checked")) {
nodeList = zTree.getNodesByParam(keyType, value);
} else if ($("#getNodesByParamFuzzy").attr("checked")) {
nodeList = zTree.getNodesByParamFuzzy(keyType, value);
}
} else {
updateNodes(false);
nodeList = zTree.getNodesByFilter(filter);
}
/**不查询父级
for(var x = 0 ; x<nodeList.length ; x++){
if(nodeList[x].isParent){
nodeList.splice(x--,1);
}
}
*/
nodeList = zTree.transformToArray(nodeList);
updateNodes(true);
}
function updateNodes(highlight) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var allNode = zTree.transformToArray(zTree.getNodes());
zTree.hideNodes(allNode);
for(var n in nodeList){
findParent(zTree,nodeList[n]);
}
zTree.showNodes(nodeList);
}
function findParent(zTree,node){
zTree.expandNode(node,true,false,false);
var pNode = node.getParentNode();
if(pNode != null){
nodeList.push(pNode);
findParent(zTree,pNode);
}
}
function getFontCss(treeId, treeNode) {
return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
}
function filter(node) {
return !node.isParent && node.isFirstNode;
}
var key;
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
key = $("#key");
key.bind("focus", focusKey)
.bind("blur", blurKey)
.bind("propertychange", searchNode)
.bind("input", searchNode);
$("#name").bind("change", clickRadio);
$("#level").bind("change", clickRadio);
$("#id").bind("change", clickRadio);
$("#getNodeByParam").bind("change", clickRadio);
$("#getNodesByParam").bind("change", clickRadio);
$("#getNodesByParamFuzzy").bind("change", clickRadio);
$("#getNodesByFilter").bind("change", clickRadio);
});
</SCRIPT>
</HEAD>
<BODY>
<h1>根据参数查找节点</h1>
<h6>[ 文件路径: core/searchNodes.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1、getNodeByParam / getNodesByParam / getNodesByParamFuzzy 方法操作说明</h2>
<ul class="list">
<li class="highlight_red">使用 zTreeObj.getNodeByParam / getNodesByParam / getNodesByParamFuzzy / getNodeByTId 方法，详细请参见 API 文档中的相关内容</li>
<li><p>搜索试试看：<br/>
属性值( value )：<input type="text" id="key" value="" class="empty" /><br/>
属性( key )：<input type="radio" id="name" name="keyType" class="radio first" checked /><span>name (string)</span><br/>
<input type="radio" id="level" name="keyType" class="radio" style="margin-left:68px;" /><span>level (number) ... 根节点 level = 0</span><br/>
<input type="radio" id="id" name="keyType" class="radio" style="margin-left:68px;" /><span>id (number)</span><br/>
方法：<input type="radio" id="getNodeByParam" name="funType" class="radio first" /><span>getNodeByParam</span><br/>
<input type="radio" id="getNodesByParam" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByParam</span><br/>
<input type="radio" id="getNodesByParamFuzzy" name="funType" class="radio" style="margin-left:36px;" checked /><span>getNodesByParamFuzzy (only string)</span><br/>
<input type="radio" id="getNodesByFilter" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByFilter (参考本页源码中 function filter)</span><br/>
</p>
</li>
</ul>
</li>
<li class="title"><h2>2、setting 配置信息说明</h2>
<ul class="list">
<li>不需要对 setting 进行特殊设置</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li class="highlight_red">请注意各个方法使用时保证传入查找的参数类型与设定要查找的属性的类型一致</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
De cette façon, la fonction d'affichage de recherche floue peut être facilement réalisée.
La deuxième méthode d'implémentation de recherche floue dans la structure arborescente Ztree, le contenu spécifique est le suivant
function expand_ztree(treeId){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.expandAll(true);
}
function close_ztree(treeId){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var nodes = treeObj.transformToArray(treeObj.getNodes());
var nodeLength = nodes.length;
for (var i = 0; i < nodeLength; i++) {
if (nodes[i].id == '0') {
//根节点：展开 treeObj.expandNode(nodes[i], true, true, false);
} else {
//非根节点：收起 treeObj.expandNode(nodes[i], false, true, false);
}
}
}
function search_ztree(treeId, searchConditionId){
searchByFlag_ztree(treeId, searchConditionId, "");
}
function searchByFlag_ztree(treeId, searchConditionId, flag){
//<1>.搜索条件 var searchCondition = $('#' + searchConditionId).val();
//<2>.得到模糊匹配搜索条件的节点数组集合 var highlightNodes = new Array();
if (searchCondition != "") {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
}
//<3>.高亮显示并展示【指定节点s】 highlightAndExpand_ztree(treeId, highlightNodes, flag);
}
function highlightAndExpand_ztree(treeId, highlightNodes, flag){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
//<1>. 先把全部节点更新为普通样式 var treeNodes = treeObj.transformToArray(treeObj.getNodes());
for (var i = 0; i < treeNodes.length; i++) {
treeNodes[i].highlight = false;
treeObj.updateNode(treeNodes[i]);
}
//<2>.收起树, 只展开根节点下的一级节点 close_ztree(treeId);
//<3>.把指定节点的样式更新为高亮显示，并展开 if (highlightNodes != null) {
for (var i = 0; i < highlightNodes.length; i++) {
if (flag != null && flag != "") {
if (highlightNodes[i].flag == flag) {
//高亮显示节点，并展开 highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//高亮显示节点的父节点的父节点....直到根节点，并展示 var parentNode = highlightNodes[i].getParentNode();
var parentNodes = getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
}
} else {
//高亮显示节点，并展开 highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//高亮显示节点的父节点的父节点....直到根节点，并展示 var parentNode = highlightNodes[i].getParentNode();
var parentNodes = getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
}
}
}
}
function getParentNodes_ztree(treeId, node){
if (node != null) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var parentNode = node.getParentNode();
return getParentNodes_ztree(treeId, parentNode);
} else {
return node;
}
}
function setFontCss_ztree(treeId, treeNode) {
if (treeNode.id == 0) {
//根节点 return {color:"#333", "font-weight":"bold"};
} else if (treeNode.isParent == false){
//叶子节点 return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"};
} else {
//父节点 return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
}
}
//==============HTML==============
class="padd" style="padding-bottom: 0px;">
class="input-append row-fluid" style="margin-bottom: 0px;">
"search_condition" type="text" placeholder="请输入搜索条件" class="span8" style="font-size:12px"/>
"button" class="btn btn-info" onclick="search_ztree('dep_tree', 'search_condition')">搜索
"dep_tree" class="ztree">
Ce qui précède est le code permettant à jquery ztree d'implémenter la fonction de recherche floue. J'espère que cela sera utile à l'apprentissage de chacun.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JQuery ztree avec filtrage et chargement asynchrone examples_jqueryArticle suivant：JQuery ztree avec filtrage et chargement asynchrone examples_jquery
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript