为jQuery EasyUI tree增加搜索功能(二)
来源:互联网 发布:深圳佳为软件 编辑:程序博客网 时间:2024/05/16 00:41
效果如下:
实现代码如下:
/** * 树形菜单搜索方法 * * @author bin.zhang */function searchTree(treeObj, parentNode, searchCon) { $(treeObj).tree('collapseAll'); //折叠所有 var children; for (var i = 0; i < parentNode.length; i++) { //循环顶级 node children = $(treeObj).tree('getChildren', parentNode[i].target); //获取顶级node下所有子节点 if (children) { //如果有子节点 for (var j = 0; j < children.length; j++) { //循环所有子节点 if ($(treeObj).tree('isLeaf', children[j].target)) { //判断子级是否为叶子节点,即不是父节点 if (children[j].text.indexOf(searchCon) >= 0) { //判断节点text是否包含搜索文本 selectNode(treeObj, children[j]); //设置此节点为选择状态 expandParent(treeObj, children[j]); //设置此节点所有父级展开 break; } } } } else { if (parentNode[i].text.indexOf(searchCon) >= 0) { selectNode(treeObj, parentNode[i]); expandParent(treeObj, parentNode[i]); break; } } }}/** * 标记为选择状态 * * @author bin.zhang */function selectNode(treeObj, node) { $(treeObj).tree('select', node.target);}/** * 展开所有父级节点 * * @author bin.zhang */function expandParent(treeObj, node) { var parent = node; var t = true; do { parent = $(treeObj).tree('getParent', parent.target); //获取此节点父节点 if (parent) { //如果存在 t = true; $(treeObj).tree('expand', parent.target); } else { t = false; } } while (t);}/** * 调用搜索方法 * * @author bin.zhang */function sysTextSearch(inputID, treeID) { var search_content = $('#' + inputID).val(); //得到搜索的文件 if (search_content == '') { $('#' + treeID).tree('expandAll'); //展开所有 } else { var roots = $('#' + treeID).tree('getRoots'); //得到tree顶级node searchTree($('#' + treeID), roots, search_content); }}
使用如下:
/** * @author bin.zhang * * 根据输入框中的关键字,搜索对应的接口并展开 */function searchAndSpread(that) { var curTreeId = getCurrentTreeId()//目录树的id var keyInputId = curTreeId.replace("tree", "keyword")//搜索框的id sysTextSearch(keyInputId,curTreeId);}
1 0
- 为jQuery EasyUI tree增加搜索功能(二)
- 为jQuery EasyUI tree增加搜索功能(一)
- easyui tree 增加参数
- EasyUI为Tree节点增加额外的属性
- EasyUI为Tree节点增加额外的属性
- 扩展jquery easyui tree的搜索树节点方法
- 扩展jquery easyui tree的搜索树节点方法
- easyui tree 模糊搜索
- EasyUI-tree 增加title显示
- jquery easyui Tree API
- jquery easyui tree实战
- JQuery EasyUI Tree
- jQuery EasyUI-Tree使用
- jQuery easyUI tree
- JQuery EasyUI Tree
- Jquery easyui tree
- jquery easyui tree使用
- jquery easyui tree
- jquery中如何实现按回车触发按钮事件
- 1052: 【回文数(二)】
- CRUD Operations Using the Generic Repository Pattern and Dependency Injection in MVC
- xUtils封装一个网络工具类
- C# 特性(Attribute)
- 为jQuery EasyUI tree增加搜索功能(二)
- Spark Scheduler 原理剖析
- ijkpalyer详细使用
- C# 反射(Reflection)
- SpringBoot-log4j
- List vs IEnumerable vs IQueryable vs ICollection vs IDictionary
- 为自己烧钱!!!
- 51nod 1033骨牌覆盖 V2
- 火眼金睛