easyui提供的ComboTree组件没有查找功能,如果结点多的话很不好找,想要的功能是在ComboTree中输入文字就显示出相应关键字的结点,有点像自动补全。本来的路是用ComboTreer的onChange事件来做,在值改变的时候把值取出来时进行树查找,在把搜索出来的结点显示出来,但是测试发现只有点树结点的时候才触法onChange事件,没办法百度了一个也没找到什么有用的资料。我就想怎样才能得到ComboTree文本框中的值改变事件,于是查看了一下ComboTree元素:
发现实际输入的input是easyui自动生成的,class样式为combo-text;是这个输入框我们就监听它的值改变事件代码如下:
//根据文本框中的值找到结点并显示出来
$(".combo-text").bind("input propertychange", function() {
$('#industry_tree').combotree('tree').tree("search",$(this).val());
if($(this).val()=="" || null==$(this).val()) {
$('#industry_tree').combotree('tree').tree("collapseAll");
}
});
把上面的代码加入页面就可以实现树查找了,上面树查找用了一个网上找的树查找扩展代码如下:
(function($) { $.extend($.fn.tree.methods, { 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]); } } }, 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(); } } } } }, 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); //如果是非叶子节点,需折叠该节点的所有子节点 if (!tree.isLeaf(jqTree, node.target)) { tree.collapse(jqTree, node.target); } } function isMatch(searchText, targetText) { return $.trim(targetText)!="" && targetText.indexOf(searchText)!=-1; } 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; } 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);转自 : http://blog.sina.com.cn/s/blog_6d0021460102vbyp.html