Title: Complete tree keyboard navigation
Post by: hahamed on August 23, 2015, 04:42:15 AM
Hello, Use and reply. I think it has not bug. Improved:$.extend($.fn.tree.methods, { nav: function (jq, dir) { return jq.each(function () { var nodes = $(this).tree('getChildren'); if (!nodes.length) return; var node = $(this).tree('getSelected'); if (!node) { $(this).tree('select', dir == 'down' ? nodes[0].target : nodes[nodes.length - 1].target); } else { if (dir == 'left') { if (!$(this).tree('isLeaf', node.target) && node.state == "open") $(this).tree('collapse', node.target); else { var parent = $(this).tree('getParent', node.target); if (parent) $(this).tree('select', parent.target); } } else if (dir == 'right') { if (!$(this).tree('isLeaf', node.target)) $(this).tree('expand', node.target); } else { var index = 0; for (var i = 0; i < nodes.length; i++) if (nodes[i].target == node.target) { index = i; break; } if (dir == 'down') { if (index == nodes.length - 1) index = 0; else while (index < nodes.length - 1) { index++; if ($(nodes[index].target).is(':visible')) break; } } else if (dir == 'up') { if (index == 0) index = nodes.length - 1; else while (index > 0) { index--; if ($(nodes[index].target).is(':visible')) break; } } if ($(nodes[index].target).is(':visible')) $(this).tree('select', nodes[index].target); } } }); } });
and call nav: tree.attr('tabindex', 1).bind('keydown', function (e) { var selected = tree.tree('getSelected'); switch (e.keyCode) { case 13: // Enter if (selected) $(selected.target).trigger('click'); break; case 38: // up tree.tree('nav', 'up'); break; case 40: // down $(this).tree('nav', 'down'); break; case 37: // right $(this).tree('nav', 'right'); break; case 39: // left $(this).tree('nav', 'left'); break; } });
thanks from msg4344 (http://www.jeasyui.com/forum/index.php?topic=1972.msg4344#msg4344)
Title: Re: Complete tree keyboard navigation
Post by: xarn on February 21, 2017, 03:49:44 AM
Please note that the left/right keycodes were inverted. It should be: case 39: // right $(this).tree('nav', 'right'); break; case 37: // left $(this).tree('nav', 'left'); break;
|