Easyui如何实现combotree,输入文本及时筛选功能
来源:互联网 发布:python opencv hough 编辑:程序博客网 时间:2024/06/08 23:14
easyui提供的ComboTree组件没有查找功能,如果结点多的话很不好找,想要的功能是在ComboTree中输入文字就显示出相应关键字的结点,有点像自动补全。本来的路是用ComboTreer的onChange事件来做,在值改变的时候把值取出来时进行树查找,在把搜索出来的结点显示出来,但是测试发现只有点树结点的时候才触法onChange事件,没办法百度了一个也没找到什么有用的资料。我就想怎样才能得到ComboTree文本框中的值改变事件,于是查看了一下ComboTree元素:
发现实际输入的input是easyui自动生成的,class样式为combo-text;是这个输入框我们就监听它的值改变事件代码如下:
$('#bankSn').combotree({url : 'logicChannelController.do?queryBank',checkbox : false,multiple : true,editable:true,panelHeight : 250,onLoadSuccess : function(node, data) {var t = $(this);if (data) {$(data).each(function(index, d) {if (this.state == 'closed') {t.tree('expandAll');}});}}});$(".combo-text").bind("input propertychange", function() {$('#bankSn').combotree('tree').tree("search",$(this).val());if($(this).val()=="" || null==$(this).val()){$('#bankSn').combotree('tree').tree("expandAll");}});
把上面的代码加入页面就可以实现树查找了,上面树查找用了一个网上找的树查找扩展代码如下:
(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<nodeList.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为空,则获取当前选中的nodevar 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);
0 0
- Easyui如何实现combotree,输入文本及时筛选功能
- Easyui实现combotree,输入文本及时筛选功能
- EasyUI combotree实现模糊筛选功能
- easyUI comboTree的实现
- EasyUi combotree实现搜索
- 如何实现jquery easyui combotree 下拉加载默认选中
- UITextField 文本输入筛选
- easyui combotree如何只选择子项
- easyUI ComboTree
- EasyUI combotree
- Easyui combotree
- easyUi combotree 实现动态加载树节点
- easyUi combotree 实现动态加载树节点
- Python递归实现Easyui combotree树
- easyui 下拉选择树(ComboTree) 的实现
- 【easyui】combotree类似combobox模糊查询功能,动态加载数据
- 如何实现 对输入框的文本内容进行限制的功能
- 如何实现 对输入框的文本内容进行限制的功能
- 文件 数据的缓存
- apk获取资源文件及反编译方式
- Xcode和它的文档朋友们
- Swift学习笔记22——泛型(Generics)
- TCL脚本语言基础介绍
- Easyui如何实现combotree,输入文本及时筛选功能
- Android自定义正负双向SeekBar
- iOS调用系统发短信功能详解
- Mahout学习路线图
- 【IOS 开发学习总结-OC-45】★★ios开发之UI控件——UISegmentedControl与UIImageView
- 【C#高效编程50例】条目3:使用is 或 as 操作符而不是强制类型转换
- Jodd DB上手指南
- C语言数据的表现形式
- 从一个简单的WEB项目入手来简单地了解一下什么是Spring之持久层(Dao)