easyui-1.4.1 comboTree父子节点模糊搜索

本文介绍如何在easyui的comboTree组件中实现父子节点的模糊搜索功能。当搜索匹配到父节点时,显示其所有子节点;匹配到子节点时,显示该子节点及其父节点。文中提供相关代码示例并展示了最终效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求: 一个comboTree树,新增可以输入进行模糊匹配
如果模糊匹配到了父节点,那么展示该父节点下所有的子节点,如果模糊匹配到了某一个子节点,那么展示该子节点以及对应的父节点

话不多说,直接上代码(其实我也是找的一个大神的comboTree大神秀操作,稍作修改而已)如下:

  	(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);
  	                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值