(function ($) {
//combotree可编辑,自定义模糊查询
$.fn.combotree.defaults.editable = true;
$.extend($.fn.combotree.defaults.keyHandler, {
query: function (q) {
var t = $(this).combotree('tree');
t.tree("search", q);
}
});
$.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节点的父节点。 
* argetNode:  将要滚动到的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);
//如果是非叶子节点,需折叠该节点的所有子节点      
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;
}
/**   
     * 获取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.combotree.search.js的更多相关文章

  1. easyui combotree 异步树 前端写法js

    简要说下使用场景: combotree下拉框第一次加载时,请求一个接口,页面上展示顶层节点们(可以理解为最顶层的节点,比如所有的一级公司): 当点击其中一个节点前面的小三角展开时,再次请求服务器接口( ...

  2. easyui Combotree 怎么加载数据 支持多选

    1.开发环境vs2012 mvc4  c# 2.HTML前端代码 <%@ Page Language="C#" AutoEventWireup="true" ...

  3. EasyUI ComboTree无限层级异步加载示例

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasuUIDemoTree.a ...

  4. 表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

    EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...

  5. Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式

    Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式 >>>>>>>>>>>>>> ...

  6. EasyUI 如何结合JS导出Excel文件

    出处:http://blog.csdn.net/jumtre/article/details/41119991 EasyUI 如何结合JS导出Excel文件 分类: 技术 Javascript jQu ...

  7. Jquery EasyUI Combotree和 EasyUI tree展开所有父节点和获取完整路径

    Jquery EasyUI Combotree展开所有父节点 Jquery EasyUI Combotree获取树完整路径 Jquery EasyUI tree展开所有父节点 Jquery EasyU ...

  8. Jquery EasyUI Combotree根据选中的值展开所有父节点

    Jquery EasyUI Combotree根据选中的值展开所有父节点  Jquery EasyUI Combotree 展开父节点, Jquery EasyUI Combotree根据子节点选中的 ...

  9. Jquery EasyUI Combotree 初始化赋值

    Jquery EasyUI Combotree 初始化赋值 ================================ ©Copyright 蕃薯耀 2018年5月7日 https://www. ...

随机推荐

  1. csuoj 1112: 机器人的指令

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1112 1112: 机器人的指令 Time Limit: 1 Sec  Memory Limit:  ...

  2. C#: MessageBox

    系统学习下Form里用到最多的MessageBox MessageBox有21个重载的Show函数...都是返回DialogResult public enum DialogResult { None ...

  3. android 测试(转)

    个人接触android的时间也不是很长,稍微总结下在做Android测试的过程中,初次接触的同学需要些什么准备,以及需要些什么知识?下面讲到的东西可能很多人会觉得很简单,但我确实碰到过有新同学对这些点 ...

  4. $.getJSON异步请求和同步请求

    先说一下我遇到的问题吧,我之前的一个函数想调用上一个函数的返回值,但是它的返回值一直为空,后来翻了一些资料才明白是异步请求在作怪,不多说,看例子,这是我之前有返回值函数的代码: function ge ...

  5. struts2校验の实现

    1.JSP <%@ page contentType="text/html; charset=utf-8" language="java" errorPa ...

  6. 夺命雷公狗---DEDECMS----29dedecms热门大片的完成

    我们要完成的是热门大片的显示,如下所示: 热门大片,这一般都是按照浏览量高的放前面的而已,我们先来查查手册,如下所示: 这里发现我们的arclist标签里面的orderby和orderway完全可以实 ...

  7. RAID、软RAID和硬RAID

    RAID(redundant array of inexpensive disks):独立的硬盘冗余阵列,基本思想是把多个小硬盘组合在一起成为一个磁盘组,通过软件或硬件的管理达到性能提升或容量增大或增 ...

  8. android 应用架构随笔五(ActionBar与侧滑菜单DrawerLayout)

    ActionBar(V7)的添加非常简单,只需要在AndroidManifest.xml中指定Application或Activity的theme是Theme.Holo或其子类就可以了,在Androi ...

  9. 【python cookbook】【数据结构与算法】18.将名称映射到序列的元素中

    问题:希望通过名称来访问元素,减少结构中对位置的依赖性 解决方案:使用命名元组collections.namedtuple().它是一个工厂方法,返回的是python中标准元组类型的子类,提供给它一个 ...

  10. 颜色表及html代码

    颜色名称及色样表(HTML版)   颜色名 中文名称 Hex RGB 十进制 Decimal     LightPink 浅粉红 #FFB6C1 255,182,193     Pink 粉红 #FF ...