jquery 剑道网格滚动到选定行

dpiehjr4  于 2023-05-06  发布在  jQuery
关注(0)|答案(6)|浏览(212)

我希望能够调用一个将剑道网格滚动到选定行的函数。我已经试过一些方法了,但都不管用,

例如,我尝试了这个:

var grid = $("#Grid").data("kendoGrid"),
    content = $(".k-grid-content");
content.scrollTop(grid.select());

我也试过这个:

var gr = $("#Grid").data("kendoGrid");
var dataItem = gr.dataSource.view()[gr.select().closest("tr").index()];
var material = dataItem.id;
var row = grid.tbody.find(">tr:not(.k-grouping-row)").filter(function (i) {
    return (this.dataset.id == material);
});
content.scrollTop(row);

谁能给我指个方向吗?:)

---已编辑---

由于其他原因,我不能绑定到更改事件,所以我必须能够调用一个函数,将列表滚动到选定的行。这就是我试图用@Antonis为我提供的答案。

var grid = $("#Grid").data("kendoGrid")
grid.element.find(".k-grid-content").animate({  
    scrollTop: this.select().offset().top  
 }, 400);

当我尝试这样做时,它向下滚动了一些列表,但没有滚动到选定的行。通过调用scrollTop,我是否以错误的方式使用了网格对象?

这也是:

var grid = $("#ItemGrid").data("kendoGrid");
grid.scrollToSelectedRow = function () {
    var selectedRow = this.select();
    if (!selectedRow) {    
        return false;    
    }
    this.element.find(".k-grid-content").animate({
        scrollTop: selectedRow.offset().top  
    }, 400);
    return true;
    };

grid.scrollToSelectedRow();
9jyewag0

9jyewag01#

所以这里的大多数答案都犯了两个错误,一个只是效率问题,另一个是实际的错误。
1.使用element.find(".k-grid-content")。这完全没有必要grid.content给你同样的东西更容易(更快)。
1.使用.offset()查找行的位置。**这是不正确的:**这将告诉你该行相对于文档本身的位置。如果您的页面允许您滚动整个页面(而不仅仅是网格),则此数字将不正确。
相反,使用.position()-这将给出相对于偏移父对象的位置。**为了让.position()给予你正确的数字,你的grid.content中的表必须有position: relative。**最好通过CSS样式表应用:

.k-grid-content table {
  position: relative;
}

无论如何,假设你已经有了一个对网格本身的引用,我称之为grid,并且你已经将你的内容窗格设置为relative位置,你所要做的就是:

grid.content.scrollTop(grid.select().position().top);

或者,为了动画,

grid.content.animate({ scrollTop: grid.select().position().top }, 400);

如前所述,grid.content会让您看到内容窗格,即您想要实际滚动的部分。它是一个jQuery对象。
jQuery对象有一个.scrollTop方法,所以这部分非常简单。.animate方法在使用其scrollTop属性时的工作方式类似。现在我们只需要知道滚动到哪里。
为此,grid.select()返回与所选行对应的jQuery对象。这就是您要滚动到的位置。为了获取它的位置,我们使用jQuery .position()方法。返回值是具有topleft字段的对象;我们想滚动到它的垂直位置,所以我们使用top
当然,这在change回调中最容易使用;grid就是this(因为回调是在网格本身上调用的),当选择改变时,change会被自动调用。但您可以在任何时候调用此代码,以便滚动到所选内容;你可以使用grid来得到:

grid = $('#theGridsId').data('kendoGrid');
rggaifut

rggaifut2#

您可以在选定行时自动执行此操作。将一个函数绑定到'change'事件,在那里,您可以滚动到选定的行。(假设您只能选择一行,由'this.select()'给出)
JSFiddle example
“更改”处理程序

//    bind to 'change' event
function onChangeSelection(e) {

    //    animate our scroll
    this.element.find(".k-grid-content").animate({  // use $('html, body') if you want to scroll the body and not the k-grid-content div
        scrollTop: this.select().offset().top  //  scroll to the selected row given by 'this.select()'
     }, 400);
}
3gtaxfhh

3gtaxfhh3#

下面是更新后的代码http://jsfiddle.net/27Phm/12/

//    bind to 'change' event
function onChangeSelection(e) {
    try {
        var $trSelect = this.select();
        var $kcontent = this.element.find(".k-grid-content");
        if ($trSelect && $trSelect.length == 1 && $kcontent) {
            var scrollContentOffset = this.element.find("tbody").offset().top;
            var selectContentOffset = $trSelect.offset().top;
            var IsMove = false;
            var distance = selectContentOffset - scrollContentOffset;
            distance += $kcontent.offset().top;
            if ($trSelect.prev().length == 1 && distance > $trSelect.prev().offset().top) {
                distance = (distance - $trSelect.prev().offset().top); //+ ($trSelect.height());
                //var toprows = $kcontent.scrollTop() / $trSelect.height(); //top rows above the scroll
                var selrowtotal = ($trSelect.offset().top - $kcontent.offset().top) + $trSelect.height();
                IsMove = selrowtotal > $kcontent.height() ? true : false;
                if (IsMove) $kcontent.scrollTop(distance);
            }
            if (!IsMove && $trSelect.offset().top < $kcontent.offset().top) {
                distance = selectContentOffset - scrollContentOffset;
                $kcontent.scrollTop(distance - 15);`enter code here`
            }
        }
    } catch (e) {

    }
}
zrfyljdw

zrfyljdw4#

我有问题的抵消,所以立场工程更好地为我:

grid.element.find(".k-grid-content").animate({  // use $('html, body') if you want to scroll the body and not the k-grid-content div
                    scrollTop: this.select().position().top  //  scroll to the selected row given by 'this.select()'
                 }, 400);
0sgqnhkj

0sgqnhkj5#

我在剑道移动的MVVM中找到了一个函数

parent.set('onShow', function (e) {
   e.view.scroller.reset();
}

app.xxx = kendo.observable({
   onShow: function() { e.view.scroller.reset(); }
});
yshpjwxd

yshpjwxd6#

除了已经说过的,如果你使用虚拟滚动,例如。JQuery:

$("#grid").kendoGrid({
scrollable: {
    virtual: true
}});

或在ASP.NETMVC中

.Scrollable(scrollable => scrollable.Virtual(true))

..在这种情况下,看起来剑道在右侧添加了一个特殊的div,只是为了滚动类.k-scrollbar,所以不是像提到的element.find(".k-grid-content").scrollTop(distance)grid.content.scrollTop(distance),我们可以使用这样的东西来滚动到选定的行:

const myGrid = $("#myGrid");
const scrollContentOffset = myGrid.find("tbody").offset().top;
const selectContentOffset = myGrid.select().offset().top;
const distance = selectContentOffset - scrollContentOffset;
myGrid.find(".k-scrollbar").scrollTop(distance);

我已经挣扎了一点,所以也许它可以帮助别人保存一些时间。

相关问题