easyui 键盘控制tree 上下
1 $.extend($.fn.tree.methods, { 2 highlight: function(jq, target){ 3 return jq.each(function(){ 4 $(this).find('.tree-node-hover').removeClass('tree-node-hover'); 5 $(target).addClass('tree-node-hover'); 6 }) 7 }, 8 nav: function(jq){ 9 return jq.each(function(){ 10 var t = $(this); 11 t.attr('tabindex',0); 12 t.unbind('.tree').bind('keydown.tree', function(e){ 13 var curr = getCurr(); 14 if (!curr.length){return} 15 if (e.keyCode == 40){ // down 16 var li = getNext(curr); 17 if (li.length){ 18 t.tree('highlight', li[0]); 19 } 20 } else if (e.keyCode == 38){ // up 21 var li = getPrev(curr); 22 if (li.length){ 23 t.tree('highlight', li[0]); 24 } 25 } else if (e.keyCode == 13){ 26 t.tree('select', curr[0]); 27 } else if (e.keyCode == 39){ // right 28 if (!t.tree('isLeaf', curr[0])){ 29 t.tree('expand', curr[0]); 30 } 31 } else if (e.keyCode == 37){ // left 32 if (!t.tree('isLeaf', curr[0])){ 33 t.tree('collapse', curr[0]); 34 } 35 } 36 e.preventDefault(); 37 }).bind('mouseover.tree', function(e){ 38 var node = $(e.target).closest('div.tree-node'); 39 if (node.length){ 40 t.find('.tree-node-hover').each(function(){ 41 if (this != node[0]){ 42 $(this).removeClass('tree-node-hover'); 43 } 44 }) 45 } 46 }); 47 function getCurr(){ 48 var n = t.find('.tree-node-hover'); 49 if (!n.length){ 50 n = t.find('.tree-node-selected'); 51 } 52 return n; 53 } 54 function getNext(curr){ 55 var n = $(); 56 var node = t.tree('getNode', curr[0]); 57 if (t.tree('isLeaf', node.target)){ 58 n = curr.parent().next().children('div.tree-node'); 59 if (!n.length){ 60 var p = t.tree('getParent', curr[0]); 61 if (p){ 62 n = $(p.target).parent().next().children('div.tree-node'); 63 } 64 } 65 } else { 66 if (node.state == 'closed'){ 67 n = curr.parent().next().children('div.tree-node'); 68 } else { 69 var cc = t.tree('getChildren', curr[0]); 70 if (cc.length){ 71 n = $(cc[0].target); 72 } 73 } 74 75 } 76 return n; 77 } 78 function getPrev(curr){ 79 var n = curr.parent().prev().children('div.tree-node'); 80 if (n.length){ 81 var node = t.tree('getNode', n[0]); 82 if (node.state == 'open'){ 83 var cc = t.tree('getChildren', node.target); 84 if (cc.length){ 85 n = $(cc[cc.length-1].target); 86 } 87 } 88 } else { 89 var p = t.tree('getParent', curr[0]); 90 if (p){ 91 n = $(p.target); 92 } 93 } 94 return n; 95 } 96 }) 97 } 98 })
$('#tt').tree('nav');