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');