文档章节

jQuery EasyUI Combotree 实现ComboBox的内容过滤

Hacken_Hu
 Hacken_Hu
发布于 2015/01/13 22:22
字数 892
阅读 491
收藏 0

        相信大家都知道jQuery EasyUI 的ComboBox有个很方便很人性化的小功能,就是可以根据输入的值对combobox里面的值过滤,但是有些场景下(比如组织架构),需要用Combotree 来展示,但是当组织架构层级很多话,要用鼠标从下拉列表里面进行筛选,确实眼睛够累的,这时就想偷个懒,像ComboBox一样可以过滤就好了。

        但是,貌似官方却没有提供类似ComboBox一样的过滤功能,没办法了,翻看了API后发了新大陆,哈哈。。

        是的,就是图中的这个方法,可以达到我想要的功能,于是就开始对 up,down,enter,quey四个方法挨个试,最终确定还是选择quey来监听键盘输入的值,

        说明:query:function(q){}; 其中q的值就是输入文本框的值,在过滤时需要用到,后面会讲到;

        为了更好的讲解说明这个实现,还是通过一个小例子来简单的说一下;

        页面代码

<input id="demo" style="width: 200px;">


        JS代码:

//渲染easyui 控件
$(function() {
    $('#demo').combotree({
	url : 'tree.json',
	valueField : 'id',
	textField : 'text',
	editable : true,
	keyHandler : {
	    query : function(q) {
		    queryComboTree(q, "demo");
		}
	    }
	});
});

//组织机构combotree 过滤查询
function queryComboTree(q, comboid) {
	var datalist = [];//用平面的combobox来展示过滤的结果
	var childrenlist = [];
	var combotreeid = "#" + comboid;
	var roots = $(combotreeid).combotree('tree').tree('getRoots');//得到根节点数组
	var children;
	var entertext = $(combotreeid).combotree('getText');
	$(combotreeid).combotree('setText', q);
	if (entertext == null || entertext == "") {//如果文本框的值为空,或者将文本框的值删除了,重新reload数据
	    $(combotreeid).combotree('reload');
	    $(combotreeid).combotree('clear');
	    $(combotreeid).combotree('setText', q);
	    return;
	}
	//循环数组,找到与输入值相似的,加到前面定义的数组中,
	for (i = 0; i < roots.length; i++) {
	    if (q == roots[i].text) {
		$(combotreeid).combotree('tree')
			.tree('select', roots[i].target);
		    return;
	    } else {
		if (roots[i].text.indexOf(q) >= 0 && roots[i].text != "") {
		    var org = {
		        "id" : roots[i].id,
			"text" : roots[i].text
			    };
		    datalist.push(org);
		}
	    }
             //找子节点(递归)
	    childrensTree(combotreeid, roots[i].target, datalist, q);
        }
		//如果找到相似的结果,则加载过滤的结果
		if (datalist.length > 0) {
			$(combotreeid).combotree('loadData', datalist);
			$(combotreeid).combotree('setText', q);
			datalist = [];//这里重新赋值是避免再次过滤时,会有重复的记录
			return;
		} else {
			$(combotreeid).combotree('reload');
			$(combotreeid).combotree('clear');
			$(combotreeid).combotree('setText', q);
			return;
		}
	}

	function childrensTree(combotreeid, rootstarget, datalist, q) {
		children = $("#demo").combotree('tree').tree('getChildren', rootstarget);
		console.log(children);
		for (j = 0; j < children.length; j++) {
			if (q == children[j].text) {
				$(combotreeid).combotree('tree').tree('select',
						children[j].target);
				return;
			} else {
				if (children[j].text.indexOf(q) >= 0 && children[j].text != "") {
					var org = {
						"id" : children[j].id,
						"text" : children[j].text
					};
					datalist.push(org);
				}
			}
			//childrensTree(combotreeid,children[j].target,datalist,q);
		}
	}

        JSON:

[{"id":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa","text":"隔壁老王","iconCls":"icon-company","level":-1,"children":[{"id":"402881fc48a55dff0148aa41c62a0d57","text":"中心公司","iconCls":"icon-company","pid":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa","level":0,"children":[{"id":"4028816148b05f5c0148bb9adb1a66c9","text":"集中分配","iconCls":"icon-company","pid":"402881fc48a55dff0148aa41c62a0d57","level":1}]},{"id":"402881fc48a55dff0148aa42617f0d6e","text":"大酒店","iconCls":"icon-company","pid":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa","level":0},{"id":"402881fc48a55dff0148aa42eb270d8c","text":"私房菜馆","iconCls":"icon-company","pid":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa","level":0},{"id":"402881fc48a55dff0148aa433eb30d9e","text":"烤鸭店","iconCls":"icon-company","pid":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa","level":0},{"id":"402881fc48a55dff0148aa4396b10dab","text":"食府","iconCls":"icon-company","pid":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa","level":0},{"id":"402881fc48a55dff0148aa43d18f0db7","text":"光明路店","iconCls":"icon-company","pid":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa","level":0},{"id":"402881fc48a55dff0148aa440cf90dc3","text":"新华路店","iconCls":"icon-company","pid":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa","level":0},{"id":"402881614901fe93014903ffffce3f73","text":"七店","iconCls":"icon-company","pid":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa","level":0},{"id":"4028816148e48e2b0148e850967621a7","text":"火锅店","iconCls":"icon-company","pid":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa","level":0}]}]

        上面的核心代码就是JS代码部分,已写了相关注释,相信大家能看懂,下面展示下效果图:

        没有过滤之前

         过滤一:

            过滤二:

    

        结语:没有过多的废话啰嗦,上来就直接上代码,作为一名合格的码农就该有看懂别人代码的能力。相信OSCer都能看懂,关于这个demo的其他小细节,还请各位自行摸索!时候不早了,得结贴睡觉了。。


© 著作权归作者所有

Hacken_Hu

Hacken_Hu

粉丝 9
博文 10
码字总数 4284
作品 0
长沙
高级程序员
私信 提问
加载中

评论(2)

Hacken_Hu
Hacken_Hu

引用来自“OKalison”的评论

这个写得有点复杂了,还可以这样:
function queryHandler(q, event){
      var t = $(this).combotree('tree');
      var nodes = t.tree('getChildren');
      for(var i=0; i<nodes.length; i++){
   var node = nodes[i];
   if (node.text.indexOf(q) >= 0){
   $(node.target).show();
   } else {
   $(node.target).hide();
   }
   }
    };


大量减少了代码量
多谢提出另外一种简便的方法👍
byteRun
byteRun
这个写得有点复杂了,还可以这样:
function queryHandler(q, event){
      var t = $(this).combotree('tree');
      var nodes = t.tree('getChildren');
      for(var i=0; i<nodes.length; i++){
   var node = nodes[i];
   if (node.text.indexOf(q) >= 0){
   $(node.target).show();
   } else {
   $(node.target).hide();
   }
   }
    };


大量减少了代码量
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.1K
3
asp.net easyui 动态绑定下拉框

前台: 标题

李洛尘
03/20
0
0
EasyUI for jQuery 1.5.4.1 发布,bug 修复和改进

EasyUI for jQuery 1.5.4.1 已发布,更新如下: 更新日志 错误 combotreegrid:在输入框中键入值不触发“onChange”事件,已修复。 combobox:在Win10的IE11下单击下拉面板跳到页面底部,已修...

ejzhang
2018/02/15
908
6
JQuery EasyUI combobox动态添加option

JQuery EasyUI combobox动态添加option <input class="easyui-combobox" id="rwlb" name="rwlb" style="width:435px" data-options="valueField:'id', textField:'text', panelHeight:'auto'......

Amamatthew
2014/10/03
0
0
jQuery EasyUI 1.4.3 发布

jQuery EasyUI 1.4.3 发布,更新内容如下: 错误 textbox: “setText” 方法不接受 0 值,已修复。 timespinner: 在 IE11 下,单击空 textbox 出错,已修复。 tabs: “update” 方法不能只更...

ejzhang
2015/07/03
9.1K
26

没有更多内容

加载失败,请刷新页面

加载更多

如何远程调试部署在CloudFoundry平台上的nodejs应用

网络上关于如何本地调试nodejs应用的教程已经很多了,工具有Chrome开发者工具,Visual Studio Code,和nodejs周边的一些小工具等等。 在实际情况中,我们可能遇到本地运行良好,但是部署到C...

JerryWang_SAP
26分钟前
3
0
微信扫码访问网站调用默认浏览器打开如何实现?

我们在微信内分享链接或二维码的时候,我们会发现我们的网站是可以在浏览器里正常打开的,但就是不能在微信里打开,提示 “ 已停止访问该网页 ”,无论是聊天框也一样。说是系统检测到您的网...

明尼苏达哈士奇
34分钟前
3
0
一份Java程序员进阶架构师的秘籍,你离架构师还差多远

一、如何定义架构师 Java架构师,首先要是一个Java程序员,熟练使用各种框架,并知道它们实现的原理。jvm虚拟机原理、调优,懂得jvm能让你写出性能更好的代码;池技术,什么对象池,怎么解决并...

我最喜欢三大框架
42分钟前
2
0
想说再见不容易,win7最新市占率依然超36%

微软正在通过努力让Windows 7用户升级至Windows 10,不过从目前的市占率来看,他们还是要加把劲了。 据最新的市场份额看,Windows 10在本月的市场份额有所提升,从43.62%增长到44.10%。另一...

linuxCool
54分钟前
4
0
SQL的优化

对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引。 对查询进行优化,要尽量避免全表扫描,首先应考虑在进行条件判断的字段上创建了索引。 应尽量避...

咸鱼-李y
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部