我希望能够调用一个将剑道网格滚动到选定行的函数。我已经试过一些方法了,但都不管用,
例如,我尝试了这个:
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();
6条答案
按热度按时间9jyewag01#
所以这里的大多数答案都犯了两个错误,一个只是效率问题,另一个是实际的错误。
1.使用
element.find(".k-grid-content")
。这完全没有必要grid.content
给你同样的东西更容易(更快)。1.使用
.offset()
查找行的位置。**这是不正确的:**这将告诉你该行相对于文档本身的位置。如果您的页面允许您滚动整个页面(而不仅仅是网格),则此数字将不正确。相反,使用
.position()
-这将给出相对于偏移父对象的位置。**为了让.position()
给予你正确的数字,你的grid.content
中的表必须有position: relative
。**最好通过CSS样式表应用:无论如何,假设你已经有了一个对网格本身的引用,我称之为
grid
,并且你已经将你的内容窗格设置为relative
位置,你所要做的就是:或者,为了动画,
如前所述,
grid.content
会让您看到内容窗格,即您想要实际滚动的部分。它是一个jQuery对象。jQuery对象有一个
.scrollTop
方法,所以这部分非常简单。.animate
方法在使用其scrollTop
属性时的工作方式类似。现在我们只需要知道滚动到哪里。为此,
grid.select()
返回与所选行对应的jQuery对象。这就是您要滚动到的位置。为了获取它的位置,我们使用jQuery.position()
方法。返回值是具有top
和left
字段的对象;我们想滚动到它的垂直位置,所以我们使用top
。当然,这在
change
回调中最容易使用;grid
就是this
(因为回调是在网格本身上调用的),当选择改变时,change
会被自动调用。但您可以在任何时候调用此代码,以便滚动到所选内容;你可以使用grid
来得到:rggaifut2#
您可以在选定行时自动执行此操作。将一个函数绑定到'change'事件,在那里,您可以滚动到选定的行。(假设您只能选择一行,由'this.select()'给出)
JSFiddle example
“更改”处理程序
3gtaxfhh3#
下面是更新后的代码http://jsfiddle.net/27Phm/12/
zrfyljdw4#
我有问题的抵消,所以立场工程更好地为我:
0sgqnhkj5#
我在剑道移动的MVVM中找到了一个函数
或
yshpjwxd6#
除了已经说过的,如果你使用虚拟滚动,例如。JQuery:
或在ASP.NETMVC中
..在这种情况下,看起来剑道在右侧添加了一个特殊的
div
,只是为了滚动类.k-scrollbar
,所以不是像提到的element.find(".k-grid-content").scrollTop(distance)
或grid.content.scrollTop(distance)
,我们可以使用这样的东西来滚动到选定的行:我已经挣扎了一点,所以也许它可以帮助别人保存一些时间。