Question

当我浏览extjs时，我遇到了这种行为http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/array-grid.html

当您单击一行并开始向上或向下移动光标时，滚动条会一直移动，当您到达最后一条记录时，滚动条会随您一起向下移动。

该示例使用了一些键盘事件，但在我的示例中，我正在尝试只是该行的一个突出显示，希望我能理解这是如何完成的。

这是我的例子http://jsfiddle.net/thiswolf/phEax/

这就是我的滚动条的方式

.tableholder{border:2px solid red; overflow-y:auto;height:300px}

当你向上或向下移动时，滚动条的移动是什么？

Answer 1

Checkout this fiddle。除了您的代码之外，它还使用以下代码来模仿您正在瞄准的基本版本的表控件

        var cntnr = $('.tableholder');
        var cntnr_height = cntnr.height();
        var cntnr_top = cntnr.offset().top;
        var cntnr_scrolltop = cntnr.scrollTop();
        var all_rows = $('tr', cntnr)
        var row_height = $(all_rows.get(0)).height();

        $('.tableholder').click(function (ev) {
           var t = ev.target;
           if (t.tagName != 'TD' && t.tagName != 'TR')
              return;

           var the_row = t.tagName == 'TR' ? $(t) : $(t.parentNode)
           all_rows.removeClass('current')
           the_row.addClass('current');
        })

        $('#deselect').click(function () {
           all_rows.removeClass('current');
        })

        $(document).click(function (ev) {
           /*if ($(ev.target) != cntnr && $(ev.target).parents().filter(cntnr).length == 0 && $(ev.target).hasClass('container'))
            all_rows.removeClass('current');*/
        }).keydown(function (ev) {

              //don't scroll if no rows are selected
              if (all_rows.filter('.current').length == 0) {
                 return;
              }

              var keycode = ev.which;

              if ([38, 40].indexOf(keycode) !== -1) {
                 ev.preventDefault();
              }
              else {
                 //we only scroll on up/down arrow
                 return;
              }

              var the_row = all_rows.filter('.current');
              var next = the_row.next();
              var prev = the_row.prev();

              //check if reached extremes of table
              if (
                 keycode == 40 && !next.length
                    || keycode == 38 && !prev.length
                 )
                 return false;

              the_row.removeClass('current');

              if (keycode == 40) {
                 if (next.offset().top + row_height + 10 - cntnr_top > cntnr_height + cntnr.scrollTop()) {
                    cntnr.scrollTop(cntnr.scrollTop() + row_height);
                 }
                 next.addClass('current');
                 setDataFromRow(next)
              }
              else {
                 if (prev.offset().top < cntnr.scrollTop()) {
                    cntnr.scrollTop(cntnr.scrollTop() - row_height);
                 }
                 prev.addClass('current');
                 setDataFromRow(prev)
              }
           });

        function setDataFromRow(row) {
           if (!row instanceof jQuery)
              row = $(row)

           ip_id.val($('td:nth-child(1)', row).html());
           ip_firstname.val($('td:nth-child(2)', row).html());
           ip_lastname.val($('td:nth-child(3)', row).html());
           ip_country.val($('td:nth-child(4)', row).html());
           ip_city.val($('td:nth-child(5)', row).html());
           ip_town.val($('td:nth-child(6)', row).html());
           ip_gender.val($('td:nth-child(7)', row).html());

        }

        var curr = $("tr").eq(1);
        curr.addClass("current");

        /*$('#id').val('0');
         $('#firstname').val('firstname');
         $('#lastname').val('lastname');
         $('#country').val('country');
         $('#city').val('city');
         $('#town').val('town');
         $('#gender').val('gender');*/

        var ip_id = $('#id'),
           ip_firstname = $('#firstname'),
           ip_lastname = $('#lastname'),
           ip_country = $('#country'),
           ip_city = $('#city'),
           ip_town = $('#town'),
           ip_gender = $('#gender');


        setDataFromRow(curr);

        /* your event handlers for buttons here  */

请注意，此代码在各方面可能都不完美。我没有触及你在某些方面出错的事件处理代码：D我希望你从这段代码中得到一个起点和方向

Answer 2

看看这个http://jsfiddle.net/Memolition/DcaG4/

$('table tr').click(function() {
    var now_index = $(this).index();
    $('table tr').removeClass('back_change');
    $(this).addClass('back_change');
});
$(document).keydown(function(event){
    var keycode=(event.keyCode?event.keyCode:event.which);
     if(keycode == '40') {
        event.preventDefault();
        $('table tr.back_change').removeClass('back_change').next().addClass('back_change');
        $('div').animate({
         scrollTop: $('table tr.back_change').offset().top
     }, 2000);
    }
});
$(document).keydown(function(event){
    var keycode=(event.keyCode?event.keyCode:event.which);
    if(keycode == '38') {
        event.preventDefault();
        $('table tr.back_change').removeClass('back_change').prev().addClass('back_change');
        $('div').animate({
         scrollTop: $('table tr.back_change').offset().top
     }, 100);
   }
});

向上或向下移动滚动条

2 个答案: