English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
아래와 같이 표시됩니다：
/**
* 1）jquery easyui tree의 노드 검색 메서드를 확장합니다. 사용 방법은 다음과 같습니다：
* $("#treeId").tree("search", searchText);
* 그 중에서 treeId는 easyui tree의 루트 UL 요소의 ID이며 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) {
//easyui tree의 tree 객체. tree.methodName(jqTree) 방식으로 easyui tree의 메서드를 호출할 수 있습니다
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");
$(nodeList[i].target).show();
//이전에 선택된 경우 선택된 노드를 펼칩니다
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");
$(nodeList[i].target).hide();
//모든 노드를 접은 상태로 만듭니다
tree.collapseAll(jqTree);
//모든 일치하는 노드 및 부모 노드를 표시합니다
for (var i=0; i<matchedNodeList.length; i++
showMatchedNode(jqTree, tree, matchedNodeList[i]);
},
/**
* 노드의 자식 노드를 표시합니다(자식 노드가 검색 중에 숨겨질 수 있습니다)
* @param node easyui tree 노드
*/
showChildren: function(jqTree, node) {
//easyui tree의 tree 객체. tree.methodName(jqTree) 방식으로 easyui tree의 메서드를 호출할 수 있습니다
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이면, easyui tree의 루트 UL 노드의 부모를 가져옵니다
* targetNode: 이동할 easyui tree 노드. targetNode가 비어 있으면, 현재 선택된 노드로 이동, 선택된 노드가 없으면 이동하지 않습니다
*
*/
scrollTo: function(jqTree, param) {
//easyui tree의 tree 객체. tree.methodName(jqTree) 방식으로 easyui tree의 메서드를 호출할 수 있습니다
var tree = this;
//node가 비어 있으면, 현재 선택된 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);
//leaf 노드가 아니면, 해당 노드의 모든 자식 노드를 접어들어야 합니다
if (!tree.isLeaf(jqTree, node.target)) {
tree.collapse(jqTree, node.target);
/**
* searchText가 targetText와 일치하는지 확인
* @param searchText 검색된 텍스트
* @param targetText 목표 텍스트
* @return true-검색된 텍스트와 목표 텍스트가 일치하면 true; 그렇지 않으면 false.
*/
function isMatch(searchText, targetText) {
return $.trim(targetText) !== "" && targetText.indexOf(searchText) !==-1;
/**
* easyui tree의 모든 node 노드를 가져오기
*/
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;
/**
* 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;
jQuery easyui tree 원래 검색은 ID 검색만 지원하기 때문에, 노드 이름의 애매한 일치를 지원하고 불일치 노드를 숨기기 위해 검색 트리 노드 메서드를 확장했습니다.
이제 편집자가 여러분께 제공한 jQuery easyui tree 확장 검색 트리 노드 메서드(추천) 전체 내용이 끝났습니다. 많은 지지와 응원을 부탁드립니다.呐喊 교육을 지지해 주세요~