English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Voici un exemple :
/**
* 1Extension de la méthode de recherche de nœuds du jQuery easyui tree. La méthode d'utilisation est la suivante :
* $("#treeId").tree("search", searchText);
* Dans celui-ci, treeId est l'ID de l'élément UL racine de easyui tree, searchText est le texte de recherche.
* Si searchText est vide ou "", rétablir l'affichage de tous les nœuds à l'état normal
*/
(function($) {
$.extend($.fn.tree.methods, {
/**
* Étendre la méthode de recherche de l'easyui tree
* @param tree L'objet jQuery du nœud DOM racine (nœud UL) de l'easyui tree
* @param searchText Texte recherché
* @param this-L'objet tree de l'easyui context
*/
search: function(jqTree, searchText) {
//l'objet tree de easyui tree. Il est possible de appeler les méthodes de easyui tree de la manière tree.methodName(jqTree)
var tree = this;
//Obtenir tous les nœuds de l'arbre
var nodeList = getAllNodes(jqTree, tree);
//Si il n'y a pas de condition de recherche, afficher tous les nœuds de l'arbre
searchText = $.trim(searchText);
if (searchText == "") {
for (var i=0; i<nodeList.length; i++
$(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");
$(nodeList[i].target).show();
//Étendre le nœud sélectionné (si précédemment sélectionné)
var selectedNode = tree.getSelected(jqTree);
if (selectedNode) {
tree.expandTo(jqTree, selectedNode.target);
return;
//Rechercher les nœuds correspondants et les afficher en surbrillance
var matchedNodeList = [];
if (nodeList && nodeList.length>0) {
var node = null;
for (var i=0; i<nodeList.length; i++
node = nodeList[i];
if (isMatch(searchText, node.text)) {
matchedNodeList.push(node);
//Cacher tous les nœuds
for (var i=0; i<nodeList.length; i++
$(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");
$(nodeList[i].target).hide();
//Replier tous les nœuds
tree.collapseAll(jqTree);
//Afficher tous les nœuds correspondants et leurs nœuds parents
for (var i=0; i<matchedNodeList.length; i++
showMatchedNode(jqTree, tree, matchedNodeList[i]);
},
/**
* afficher les nœuds enfants du nœud (les nœuds enfants peuvent être cachés pendant le processus de recherche)
* @param node nœud easyui tree
*/
showChildren: function(jqTree, node) {
//l'objet tree de easyui tree. Il est possible de appeler les méthodes de easyui tree de la manière tree.methodName(jqTree)
var tree = this;
//afficher les nœuds enfants
if (!tree.isLeaf(jqTree, node.target)) {
var children = tree.getChildren(jqTree, node.target);
if (children && children.length>0) {
for (var i=0; i<children.length; i++
if ($(children[i].target).is(":hidden")) {
$(children[i].target).show();
},
/**
* faire défiler la barre de défilement à la position du nœud spécifié pour rendre le nœud visible (il faut défiler s'il y a une barre de défilement, sinon il ne faut pas défiler)
* @param param {
* treeContainer: le conteneur de easyui tree (c'est-à-dire le conteneur de l'arbre avec la barre de défilement). Si il est null, il prend le parent du nœud UL racine de easyui tree
* targetNode: le nœud easyui tree vers lequel il faut faire défiler. Si targetNode est vide, il est défiler vers le nœud sélectionné actuel par défaut, s'il n'y a pas de nœud sélectionné, il ne faut pas défiler
*
*/
scrollTo: function(jqTree, param) {
//l'objet tree de easyui tree. Il est possible de appeler les méthodes de easyui tree de la manière tree.methodName(jqTree)
var tree = this;
//si node est vide, obtenir le nœud sélectionné actuel
var targetNode = param && param.targetNode ? param.targetNode : tree.getSelected(jqTree);
if (targetNode != null) {
//vérifier si le nœud est dans la zone visible
var root = tree.getRoot(jqTree);
var $targetNode = $(targetNode.target);
var container = param && param.treeContainer ? param.treeContainer : jqTree.parent();
var containerH = container.height();
var nodeOffsetHeight = $targetNode.offset().top - container.offset().top;
if (nodeOffsetHeight > (containerH - 30)) {
var scrollHeight = container.scrollTop() + nodeOffsetHeight - containerH + 30;
container.scrollTop(scrollHeight);
});
/**
* Afficher les nœuds correspondant à la recherche
*/
function showMatchedNode(jqTree, tree, node) {
//Afficher tous les nœuds parents
$("node.target").show();
$(".tree-$("title", node.target).addClass("tree-node-targeted");
var pNode = node;
while ((pNode = tree.getParent(jqTree, pNode.target))) {
$("pNode.target").show();
//Développer jusqu'au nœud
tree.expandTo(jqTree, node.target);
//Si le nœud n'est pas une feuille, il faut replier tous les sous-nœuds de ce nœud
if (!tree.isLeaf(jqTree, node.target)) {
tree.collapse(jqTree, node.target);
/**
* Juger si searchText correspond à targetText
* @param searchText Texte recherché
* @param targetText Texte cible
* @return true-Le texte recherché correspond au texte cible ; sinon, c'est false.
*/
function isMatch(searchText, targetText) {
return $.trim(targetText)!="" && targetText.indexOf(searchText)!=-1;
/**
* Récupérer tous les nœuds node de l'arbre easyui
*/
function getAllNodes(jqTree, tree) {
var allNodeList = jqTree.data("allNodeList");
if (!allNodeList) {
var roots = tree.getRoots(jqTree);
allNodeList = getChildNodeList(jqTree, tree, roots);
jqTree.data("allNodeList", allNodeList);
return allNodeList;
/**
* Définir l'algorithme récursif pour obtenir les sous-nœuds de l'arbre easyui tree
*/
function getChildNodeList(jqTree, tree, nodes) {
var childNodeList = [];
if (nodes && nodes.length>0) {
var node = null;
for (var i=0; i<nodes.length; i++
node = nodes[i];
childNodeList.push(node);
if (!tree.isLeaf(jqTree, node.target)) {
var children = tree.getChildren(jqTree, node.target);
childNodeList = childNodeList.concat(getChildNodeList(jqTree, tree, children));
return childNodeList;
Comme la recherche native de jquery easyui tree ne prend en charge que la recherche par ID, une méthode d'extension de la recherche des nœuds de l'arbre easyui tree a été ajoutée pour prendre en charge la correspondance floue des noms de nœuds et cacher les nœuds non correspondants.
C'est tout ce que l'éditeur vous apporte aujourd'hui en termes de méthode de recherche des nœuds de l'arbre easyui tree jQuery (recommandé). J'espère que vous soutiendrez le tutoriel criant~