我希望能够调用一个将 Kendo 网格滚动到所选行的函数。我已经尝试过一些方法,但没有一个有效,
例如我尝试过这个:
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();
因此,这里的大多数答案都犯了两个错误,一个只是效率问题,另一个是实际的错误。
Using element.find(".k-grid-content")
。这是完全没有必要的。grid.content为您提供完全相同的事情更容易(而且更快)。
-
Using .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
财产。现在我们只需要知道滚动到哪里to.
为了那个原因,grid.select()返回与所选行对应的 jQuery 对象。这就是你想要滚动的地方to。为了获得它的位置,我们使用 jQuery.position()
方法。返回值是一个对象top
and left
领域;我们想要滚动到它的垂直位置,所以我们使用top
.
这是最容易使用的change
当然是回调;那里grid
简直就是this
(因为回调是在网格本身上调用的),并且change
当选择更改时会自动调用。但是您可以在任何时候想要滚动到所选内容时调用此代码;你可以得到grid
通过使用:
grid = $('#theGridsId').data('kendoGrid');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)