EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: roberto on May 16, 2019, 09:18:43 PM



Title: treegrid keyboard navigation
Post by: roberto on May 16, 2019, 09:18:43 PM
Hi,

How to use the keyboard to navigate?


Title: Re: treegrid keyboard navigation
Post by: battlezad on May 16, 2019, 10:39:39 PM
https://www.jeasyui.com/forum/index.php?topic=1381.0 (https://www.jeasyui.com/forum/index.php?topic=1381.0)


Title: Re: treegrid keyboard navigation
Post by: aiit on June 02, 2019, 06:34:13 PM
Code:
$.extend($.fn.treegrid.methods, {
    nav: function (jq) {
        return jq.each(function () {
            var t = $(this), o = t.treegrid('options'), a, l;
            var toArr = function (d) {
                $.each(d, function (i, x) {
                    a.push(x.id);
                    if (x.children) toArr(x.children);
                });
            }
            var skip = function (c, m) {
                var i = c + m;
                i = (i < 0) ? 0 : ((i > l) ? l : i);
                if (!isV(i))
                    skip(i, (i == l) ? -m : m);
                else
                    t.treegrid('select', a[i]);
            }
            var isV = function (x) {
                var c = t.treegrid("options").finder.getTr(t[0], a[x]);
                return $(c).is(':visible');
            }
            if (!o.hasSetEvents) {
                o.hasSetEvents = true;
                var u = o.onLoadSuccess;
                o.onLoadSuccess = function (row, data) {
                    a = [];
                    toArr(data);
                    l = a.length - 1;
                    u.call(this);
                };
            }
            t.treegrid('getPanel').panel('panel').attr('tabindex', 1).bind('keydown', function (e) {
                var k = e.keyCode;
                if (k == 38 || k == 40) {
                    var s = t.treegrid('getSelected');
                    var c = (s) ? $.inArray(s.id, a) : 0;
                    skip(c, (k == 38) ? -1 : 1);
                }
            });
        });
    }
});