English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Как показано ниже:
* 1) Расширение метода поиска узлов для jquery easyui tree. Способ использования: * $("#treeId").tree("search", searchText); * В них, treeId — ID корневого UL элемента easyui tree, searchText — текст для поиска. * Если searchText пуст или "", будет восстановлен нормальный статус отображения всех узлов (function($) { $.extend($.fn.tree.methods, { * 扩展easyui tree的搜索方法 * @param tree easyui tree的根DOM节点(UL节点)的jQuery对象 * @param searchText Текст поиска * @param this-context easyui tree的tree对象 search: function(jqTree, searchText) { //Объект tree для easyui tree. Методы easyui tree можно вызывать через tree.methodName(jqTree) var tree = this; //获取所有树节点 var nodeList = getAllNodes(jqTree, tree); //如果没有搜索条件,则显示所有树节点 searchText = $.trim(searchText); if (searchText == "") { for (var i = 0; i < nodeList.length; i++) { $(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted"); $.show(nodeList[i].target); //展开已选择的节点(如果之前已选择) var selectedNode = tree.getSelected(jqTree); if (selectedNode) { tree.expandTo(jqTree, selectedNode.target); return; //搜索匹配的节点并突出显示 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); //隐藏所有节点 for (var i = 0; i < nodeList.length; i++) { $(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted"); $.hide(nodeList[i].target); //折叠所有节点 tree.collapseAll(jqTree); //显示所有匹配的节点及其父节点 for (var i = 0; i < matchedNodeList.length; i++) { showMatchedNode(jqTree, tree, matchedNodeList[i]); }, * 显示节点的子节点(子节点可能在搜索过程中被隐藏) * @param node easyui tree节点 showChildren: function(jqTree, node) { //Объект tree для easyui tree. Методы easyui tree можно вызывать через tree.methodName(jqTree) var tree = this; //Показывать подузлы 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(); }, * Прокрутить полосу прокрутки до указанного узла, чтобы он стал видимым (если есть полоса прокрутки, то прокручивается, если нет, то не прокручивается) * @param param { * treeContainer: контейнер easyui tree (т.е. контейнер с полосой прокрутки). Если null, то берется родительский узел корневого UL узла easyui tree * targetNode: узел easyui tree, к которому нужно прокрутить. Если targetNode пуст, то прокрутка к текущему выбранному узлу, если нет выбранного узла, то прокрутка не производится * } scrollTo: function(jqTree, param) { //Объект tree для easyui tree. Методы easyui tree можно вызывать через tree.methodName(jqTree) var tree = this; //Если узел node пуст, то получить текущий выбранный узел var targetNode = param && param.targetNode ? param.targetNode : tree.getSelected(jqTree); if (targetNode != null) { //Определение находится ли узел в области видимости 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); }); * Показывать узлы, соответствующие поисковому запросу function showMatchedNode(jqTree, tree, node) { // Показать все родительские узлы $(node.target).show(); $(".tree-title", node.target).addClass("tree-node-targeted"); var pNode = node; while ((pNode = tree.getParent(jqTree, pNode.target))) { $(pNode.target).show(); // Раскрывать до этого узла tree.expandTo(jqTree, node.target); // Если это не листовой узел, необходимо сложить все подузлы этого узла if (!tree.isLeaf(jqTree, node.target)) { tree.collapse(jqTree, node.target); * Определение совпадения searchText с targetText * @param searchText Текст поиска * @param targetText Целевой текст * @return true - если текст поиска совпадает с целевым текстом; в противном случае false. function isMatch(searchText, targetText) { return $.trim(targetText)!="" && targetText.indexOf(searchText)!=-1; * Получение всех узлов node в easyui tree 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); возврат allNodeList; * Определение рекурсивного алгоритма для получения подузлов 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)); возврат childNodeList;
Поскольку по умолчанию в jQuery easyui tree поддерживается только поиск по ID, я расширил метод поиска узлов в jQuery easyui tree, чтобы он поддерживал неявное соответствие имен узлов и скрывал несовпадающие узлы.
Вот и все, что я вам привел в качестве расширения метода поиска узлов в расширении jQuery easyui tree, пожалуйста, поддержите и хлопайте в ладоши учебнику ~