对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