easyui combotree组件添加搜索功能

截图

javascript代码

var $combotree = $('#combotree'); //input标签的jquery对象
$combotree.combotree({
            url : em.bp()+ "/org/loadAllOrgsByUser.do",
            panelWidth: 220,
            panelHeight: 240,
            panelAlign: 'right',
            loadFilter: function (data, parent) {
                if (parent) {
				    return data;
                }
			    return boxToTree(data, 'id', 'parcode', 'children');
		    },
			onBeforeExpand : function(node) {
				if ('children' in node) {
					return;
        		}
                var parcode = node.id;
                $combotree.combotree("tree").tree("options").url = em.bp() + "/org/loadorgs.do?orgcode="+parcode;
            },
            onLoadSuccess: function(node, data) {
			    if (node) {
			  	    return;
			    }
			    var $orgtree = $combotree;
			    var $tree = $orgtree.combotree('tree');
			    var $panel = $orgtree.combotree('panel');
			    $tree.tree('collapseAll');
			    if ($('.tree-panel-before input', $panel.parent()).length > 0) {
				    return;
				}
			    $panel.before('<div class="tree-panel-before" style="height: 22px;'
			    			+ 'background: #FFFFFF;border: 1px solid #95B8E7;border-bottom: 0 none;">'
					  	    + '<input type="text" placeholder="过滤条件"'
					  	    + ' style="width: 100%;height: 22px;line-height: 22px;'
					  	    + 'border: 0 none;outline: 0 none;text-indent: 4px;"></div>');
			    var $treeSearch = $('.tree-panel-before input', $panel.parent());
			    $treeSearch.validatebox({
					onBeforeValidate: function () {
						var searchVal = $.trim($treeSearch.val())
										.replace(/[0-9a-z]/gi, ''); // 规定哪些字符不参与搜索
						if (searchVal != $treeSearch.data('search')) {
							$treeSearch.data('search', searchVal);
							clearTimeout($treeSearch.data('doFilter'));
							$treeSearch.data('doFilter', setTimeout(function () {
								$tree.tree('doFilter', searchVal);
							}, 50));
						}
					}
	            });
            },
		    onShowPanel: function () {
				var $panel = $combotree.combotree('panel');
				var $treeSearch = $('.tree-panel-before input', $panel.parent());
				setTimeout(function () {
					$treeSearch.focus();
				}, 20);
			},
            onExpand: function (node) {
        	    var $orgtree = $combotree;
			    var $tree = $orgtree.combotree('tree');
			    var $panel = $orgtree.combotree('panel');
			    var $treeSearch = $('.tree-panel-before input', $panel.parent());
			    if ($tree.length && $treeSearch.length) {
				    var searchVal = $.trim($treeSearch.val())
				    				.replace(/[0-9a-z]/gi, ''); // 规定哪些字符不参与搜索
				    $treeSearch.data('search', searchVal);
				    clearTimeout($treeSearch.data('doFilter'));
				    $treeSearch.data('doFilter', setTimeout(function () {
				  	    $tree.tree('doFilter', searchVal);
				    }, 50));
			    }
            }
        });

boxToTree函数请移步 对象数组转树与对象树转数组
em.bp() 为项目根路径

java核心代码

public String loadAllOrgcodesByUser(Map<String,Object> params) {
		UsersBO user = (UsersBO) params.get("user");
		String orgLevel = (String) params.get("orgLevel");
		String sql = "";
		if ("01".equals(user.getLevelflg())) { // 由于其后代数量太多，超过1000，一次性渲染到页面上容易卡死，故只查询直接下级，剩下的后代由loadorgs接口查询
			sql = "SELECT s.ORGCODE id, s.PARCODE parcode, s.DEPARTNAME text, s.LEVELFLG levelflg,"
					+ " DECODE(s.LEVELFLG, '01', '1', CASE WHEN EXISTS(SELECT 1 FROM t_department t WHERE t.PARCODE = s.ORGCODE) THEN '0' ELSE '1' END) state"
					+ " FROM (SELECT d.ORGCODE, d.PARCODE, d.DEPARTNAME, d.LEVELFLG,"
					+ " NVL((select t.LEVELFLG FROM t_department t WHERE t.ORGCODE = d.PARCODE), '01') PARLEVEL"
					+ " FROM t_department d START WITH d.ORGCODE = #{user.branchNo} CONNECT BY PRIOR d.ORGCODE = d.PARCODE"
					+ " ) s WHERE s.PARLEVEL = '01'";
			if (StringUtil.isNotBlank(orgLevel)) {
				sql = sql + " AND s.LEVELFLG <= #{orgLevel}";
			}
		} else {// 由于其后代数量少，一次性全部查出
			sql = "SELECT ORGCODE id, PARCODE parcode, DEPARTNAME text, LEVELFLG levelflg, '1' as state"
					+ " FROM t_department";
			if (StringUtil.isNotBlank(orgLevel)) {
				sql = sql + " WHERE LEVELFLG <= #{orgLevel}";
			}
			sql = sql + " START WITH ORGCODE = #{user.branchNo} CONNECT BY PRIOR ORGCODE = PARCODE";
		}
		sql = sql + " ORDER BY state DESC, id";
		return sql;
	}

public String loadorgs(){
		String sql = "SELECT t.ORGCODE id, t.PARCODE parcode, t.DEPARTNAME text, t.LEVELFLG levelflg,"
				+ " CASE WHEN EXISTS (SELECT 1 FROM T_DEPARTMENT t1 WHERE t1.PARCODE = t.ORGCODE AND t1.LEVELFLG <= #{orglevel}) THEN '0' ELSE '1' END AS state"
				+ " FROM T_DEPARTMENT t WHERE t.PARCODE = #{parcode} AND t.levelflg <= #{orglevel} ORDER BY state DESC, id";
		return sql;
	}

BUG

当combotree 面板下边缘对齐input框时，会将input框挡住，挡住的高度正好为$treeSearch搜索框的高度