对easyui combotree的改进,实现键盘导航的功能

对easyui combotree的一下改进,实现键盘导航的功能
function onCombotreeShowPanel() {
// 显示下拉框, 展开到当前节点
var t = KaTeX parse error: Expected 'EOF', got '}' at position 127: …get); } }̲ (function() {
// 实现下拉树的本地检索功能
var a;
$.fn.combotree.defaults.editable = true;
. e x t e n d ( .extend( .extend(.fn.combotree.methods, {
nav: function(jq, dir) {
return jq.each(function() {
var opts = $(this).combotree(‘options’);
var t = $(this).combotree(‘tree’);
var nodes = t.tree(‘getChildren’);
if(!nodes.length) {
return;
}

			var node = t.tree('getSelected');
			
			if(!node) {
				t.tree('select', dir > 0 ? nodes[0].target : nodes[nodes.length - 1].target);
			} else {
				var index = 0;
				for(var i = 0; i < nodes.length; i++) {
					if(nodes[i] == node) {
						index = i;
						break;
					}
				}
				if(dir > 0) {
					while(index < nodes.length - 1) {
						index++;

						if($(nodes[index].target).is(':visible')) {
							break;
						}
					}
				} else {
					while(index > 0) {
						index--;
						if($(nodes[index].target).is(':visible')) {
							break;
						}
					}
				}
				
				var a;
				for(var i = 0; i < nodes.length; i++) {
					if(nodes[i] == showNode[showNode.length - 1]) {
						a = i;
					}
				}
				if(index > a) {
					index = a;
				}


				t.tree('select', nodes[index].target);
				t.tree('scrollTo', nodes[index].target);
			}

			if(opts.selectOnNavigation) {
				var node = t.tree('getSelected');
				$(this).combotree("setValue", node.id);
				$(node.target).trigger('click');
				$(this).combotree('showPanel');
			}
		});
	}
});

// 检测当前能否编辑
function checkEditable(el) {
	var opt = el.combo("options");
	if(opt.readonly || opt.disabled) {
		return false;
	}
	return opt.editable;
}
$.extend($.fn.combotree.defaults.keyHandler, {
	up: function() {
		var el = $(this);
		var t = el.combotree('tree');
		if(!checkEditable(el)) return;
		// 当前 panel 已展开, 则处理nav, 否则先显示 panel
		var p = el.combotree('panel');
		if(p.is(':visible')) {
			el.combotree('nav', -1);
		} else {
			el.combotree('showPanel');
		}
	},
	down: function() {
		var el = $(this);
		var t = el.combotree('tree');
		if(!checkEditable(el)) return;

		// 当前 panel 已展开, 则处理nav, 否则先显示 panel
		var p = el.combotree('panel');
		if(p.is(':visible')) {
			el.combotree('nav', 1);
		} else {
			el.combotree('showPanel');
		}
	},
	right: function() {
		var el = $(this);
		if(!checkEditable(el)) return;

		var p = el.combotree('panel');
		if(!p.is(':visible')) {
			return;
		}

		// 展开当前节点的分支
		var t = el.combotree('tree');
		var node = t.tree('getSelected');
		if(node) {
			t.tree('expand', node.target);
		}
	},
	left: function() {
		var el = $(this);
		if(!checkEditable(el)) return;

		var p = el.combotree('panel');
		if(!p.is(':visible')) {
			return;
		}
		var t = el.combotree('tree');
		var node = t.tree('getSelected');
		if(node) {
			var isLeaf = t.tree('isLeaf', node.target);
			if(!isLeaf && node.state == "open") {
				// 如果不是叶子节点, 并且当前是展开状态, 则收缩当前分支
				t.tree('collapse', node.target);
			} else {
				// 如果有父节点, 则收缩父节点, 并且选中父节点
				var parent = t.tree('getParent', node.target);
				if(parent) {
					t.tree('collapse', parent.target);
					t.tree('select', parent.target);
					// 需要时, 更新textbox的值
					var opts = el.combo("options");
					if(opts.selectOnNavigation) {
						el.combotree("setValue", parent.id);
					}
				}
			}
		}
	},
	enter: function() {
		var t = $(this).combotree('tree');
		//获取全部的节点
		var nodes = t.tree('getChildren');
		//节点名称的数组
		var textarr = [];
		var a;
		
		for(var i = 0; i < nodes.length; i++) {
			textarr.push(nodes[i].text);
		}
		for(var i = 0; i < textarr.length; i++) {
			if(val!=undefined){
				if(textarr[i].toLowerCase() == val.toLowerCase()) {
   					a = i;
   					t.tree('select', nodes[a].target);
   				}
			}
		}
		
		
		var el = $(this);
		if(!checkEditable(el)) return;
		var p = el.combotree('panel');
		if(!p.is(':visible')) {
			return;
		}
		var node = t.tree("getSelected")
		if(node) {
			$(node.target).trigger('click');
		}
		$(this).combotree('hidePanel');
		
		console.log(node);
		if(showNode == "" && node==null) {
			alert("请输入正确的节点名称");
			$(this).combotree("setValue", "");
		}
		
		
		
		
	}
});
var showNode = [];
var nodes;
var val;
$.extend($.fn.combotree.defaults.keyHandler, {
	query: function(q) {

		val = q;
		showNode = [];
		var opts = $(this).combotree('options');
		var t = $(this).combotree('tree');
		var nodes = t.tree('getChildren');

		function getparentNode(node) {
			var pnode = t.tree("getParent", node.target);
			if(pnode != null) {
				parentNode.push(pnode);
				getparentNode(pnode);
			} else {
				return parentNode;
			}
		}

		if(q == "") {
			for(var i = 0; i < nodes.length; i++) {
				$(nodes[i].target).show();
			}
		}

		var targetNode = [];

		for(var i = 0; i < nodes.length; i++) {

			var node = nodes;
			if(opts.filter && opts.filter(q, node[i])) {

				if(targetNode.indexOf(node[i]) == -1) {
					targetNode.push(node[i]);
				}
			}
		}
		var t = $(this).combotree('tree');

		function getparentNode(node) {
			if(node.target) {
				var pnode = t.tree("getParent", node.target);
				if(pnode != null) {

					if(parentNode.indexOf(pnode) == -1) {
						parentNode.push(pnode);
						getparentNode(pnode);
					}

				} else {
					return parentNode;
				}
			}
		}
		var parentNode = []; //存放所有的父节点
		for(var i = 0; i < targetNode.length; i++) {
			getparentNode(targetNode[i]);
		}
		showNode = parentNode.concat(targetNode);
		//所有的节点全部隐藏
		for(var i = 0; i < nodes.length; i++) {
			$(nodes[i].target).hide();
		}
		//把需要显示的节点显示
		for(var i = 0; i < showNode.length; i++) {
			$(showNode[i].target).show();
		}
		if(showNode != null){
			console.log("aaa");
			t.tree("expandAll")
		}
		// 点击下拉, 则恢复显示
		if(!opts.hasSetEvents) {
			opts.hasSetEvents = true;
			var onShowPanel = opts.onShowPanel;
			opts.onShowPanel = function() {
				// 恢复显示
				var nodes = t.tree('getChildren');
				for(var i = 0; i < nodes.length; i++) {
					$(nodes.target).show();
				}
				onShowPanel.call(this);
			};
			$(this).combo('options').onShowPanel = opts.onShowPanel;
		}
	}
});

})(jQuery);
代码参考了http://www.jeasyui.com/forum/index.php?PHPSESSID=vr7i9f3dv7eg3868rb4gvbqg90&topic=3217.0

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值