easyui 扩展下拉树(combotree)检索功能

href="../resource/jquery-easyui-1.4.3/themes/metro-blue/" />

//javascript

//

var treeData = [{

id: 1,

text: 'Languages',

children: [{

id: 11,

text: 'Java'

}, {

id: 12,

text: 'C++'

}]

}, {

id: 2,

text: 'Addd',

children: [{

id: 21,

text: 'Fdd'

}, {

id: 22,

text: 'nn'

}]

}];

$(function() {

$('#cc').combotree({

valueField: 'id',

textField: 'text',

required: true,

editable: true,

onChange: treeChange,

keyHandler: {

up: upHandler,

down: downHandler,

enter: enterHandler,

query: queryHandler

}

});

$('#cc').combotree('loadData', treeData);

$('#bb').tree('loadData', treeData);

})

function treeChange(newValue, oldValue) {

(newValue + ":" + oldValue);

}

function upHandler(event) {

if (e == 38) {

();

}

}

function downHandler(event) {

if (e == 40) {

();

}

}

function enterHandler(event) {

if (e == 13) {

();

}

}

function queryHandler(searchText, event) {

searchText = $.trim(searchText);

// var rows = $('#cc').combotree('getData');

// $("#cc").tree("search", searchText);

// (data+":"+);

// queryComboTree(searchText, "bb");

$('#cc').combotree('tree').tree("search", searchText);

// if ($(this).val() == "" || null == $(this).val()) {

// $('#cc').combotree('tree').tree("collapseAll");

// }

}

//

/**

* 1）扩展jquery easyui tree的节点检索方法。使用方法如下：

* $("#treeId").tree("search", searchText);

* 其中，treeId为easyui tree的根UL元素的ID，searchText为检索的文本。

* 如果searchText为空或""，将恢复展示所有节点为正常状态

*/

(function($) {

$.extend($.s, {

/**

* 扩展easyui tree的搜索方法

* @param tree easyui tree的根DOM节点(UL节点)的jQuery对象

* @param searchText 检索的文本

* @param this-context easyui tree的tree对象

*/

search: function(jqTree, searchText) {

//easyui tree的tree对象。可以通过Name(jqTree)方式调用easyui

tree的方法

var tree = this;

//获取所有的树节点

var nodeList = getAllNodes(jqTree, tree);

//如果没有搜索条件，则展示所有树节点

searchText = $.trim(searchText);

if (searchText == "") {

for (var i=0; i<; i++) {

$(".tree-node-targeted",

nodeList[i].target).removeClass("tree-node-targeted");

$(nodeList[i].target).show();

}

//展开已选择的节点（如果之前选择了）

var selectedNode = ected(jqTree);

if (selectedNode) {

To(jqTree, );

}

return;

}

//搜索匹配的节点并高亮显示

var matchedNodeList = [];

if (nodeList && >0) {

var node = null;

for (var i=0; i<; i++) {

node = nodeList[i];

if (isMatch(searchText, )) {

(node);

}

}

//隐藏所有节点

for (var i=0; i<; i++) {

$(".tree-node-targeted",

nodeList[i].target).removeClass("tree-node-targeted");

$(nodeList[i].target).hide();

}

//折叠所有节点

seAll(jqTree);

//展示所有匹配的节点以及父节点

for (var i=0; i<; i++) {

showMatchedNode(jqTree, tree, matchedNodeList[i]);

}

}

},

/**

* 展示节点的子节点（子节点有可能在搜索的过程中被隐藏了）

* @param node easyui tree节点

*/

showChildren: function(jqTree, node) {

//easyui tree的tree对象。可以通过Name(jqTree)方式调用easyui

tree的方法

var tree = this;

//展示子节点

if (!(jqTree, )) {

var children = ldren(jqTree, );

if (children && >0) {

for (var i=0; i<; 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对象。可以通过Name(jqTree)方式调用easyui

tree的方法

var tree = this;

//如果node为空，则获取当前选中的node

var targetNode = param && Node ? Node :

ected(jqTree);

if (targetNode != null) {

//判断节点是否在可视区域

var root = t(jqTree);

var $targetNode = $();

var container = param && ntainer ? ntainer :

();

var containerH = ();

var nodeOffsetHeight = $().top - ().top;

if (nodeOffsetHeight > (containerH - 30)) {

var scrollHeight = Top() + nodeOffsetHeight - containerH

+ 30;

Top(scrollHeight);

}

}

}

});

/**

* 展示搜索匹配的节点

*/

function showMatchedNode(jqTree, tree, node) {

//展示所有父节点

$().show();

$(".tree-title", ).addClass("tree-node-targeted");

var pNode = node;

while ((pNode = ent(jqTree, ))) {

$().show();

}

//展开到该节点

To(jqTree, );

//如果是非叶子节点，需折叠该节点的所有子节点

if (!(jqTree, )) {

se(jqTree, );

}

}

/**

* 判断searchText是否与targetText匹配

* @param searchText 检索的文本

* @param targetText 目标文本

* @return true-检索的文本与目标文本匹配；否则为false.

*/

function isMatch(searchText, targetText) {

return $.trim(targetText)!="" && f(searchText)!=-1;

}

/**

* 获取easyui tree的所有node节点

*/

function getAllNodes(jqTree, tree) {

var allNodeList = ("allNodeList");

if (!allNodeList) {

var roots = ts(jqTree);

allNodeList = getChildNodeList(jqTree, tree, roots);

("allNodeList", allNodeList);

}

return allNodeList;

}

/**

* 定义获取easyui tree的子节点的递归算法

*/

function getChildNodeList(jqTree, tree, nodes) {

var childNodeList = [];

if (nodes && >0) {

var node = null;

for (var i=0; i<; i++) {

node = nodes[i];

(node);

if (!(jqTree, )) {

var children = ldren(jqTree, );

childNodeList = (getChildNodeList(jqTree,

children));

}

}

}

return childNodeList;

}

})(jQuery);

tree,