【问题标题】:How to get the scroll position of a kendo grid如何获取剑道网格的滚动位置
【发布时间】:2018-09-27 05:56:05
【问题描述】:

我正在尝试从我的剑道网格中收集 scrollLeft/scrollTop 位置数据。到目前为止,我有这个:

var mainGrid = $("#mainGrid").data("kendoGrid");
var testgrid = $("#mainGrid div.k-grid-content");
topoffset = testgrid.offset();

//which gives me these numbers but they do not look correct...
//left  44.959999084472656  Number
//top   174.55999755859375  Number

然后我想通过强制我的网格滚动到顶部:0 和左侧:0 来演示自动定位。然后回到我用这个捕获的位置......

//send to top
testgrid.scrollTop(0);
testgrid.scrollLeft(0);

网格没有按预期滚动到顶部。

//send to previous position
testgrid.scrollTop(topScroll);
testgrid.scrollLeft(leftScroll);

网格不会滚动回之前的位置。

您似乎不允许强制滚动到剑道网格中的某个位置。

【问题讨论】:

  • 我只是在开发人员工具中完成的,您是想留在页面上并执行此操作,还是就像您单击一个按钮并获取当前滚动条的位置然后返回该位置一样
  • 好吧,主要问题是在我刷新网格之后。 kendo 自动转到 scrollTop(0) 和 scrollLeft(0)。所以我正在尝试将其发送回已编辑的记录。这是一个真正的痛苦。我什至不知道剑道为什么会这样做。

标签: javascript jquery kendo-grid


【解决方案1】:

首先,您需要在数据绑定事件中包含它。因此,如果您想预先设置它,您可以这样做:

databound: function(e){
  $('.k-grid-content').scrollTop('150');
    setTimeout(function () {
        $('.k-grid-content').animate({
            scrollTop: 0
        }, 1000);
    }, 2000);
    setTimeout(function () {
        $('.k-grid-content').animate({
            scrollTop: 200
        }, 1000);
    }, 5000);
});

只需将值切换到您想要的滚动距离的速度(我只使用了 scrollTop 但您可以使用变体)。如果你想先玩网格,然后捕捉它的位置:

然后使用 sessionStorage 变量将其保存,然后将其输入到数据绑定事件中。要在刷新之前捕获网格的位置,您可以执行以下操作:

$(document).on('keydown', function(){
   $('.k-grid-content').scrollTop(); // capture how far from top
   $('.k-grid-content').scrollLeft(); // capture how far from left
});

这不需要在您的数据绑定事件中。

【讨论】:

  • 你能提供一个道场吗?还是小提琴?
  • 我认为这可以帮助我最初的问题stackoverflow.com/questions/46920023/…。但它所做的只是在刷新后它会进入网格顶部,然后返回保存的行。剑道超级笨重!
  • 这是我问题的答案,但不是我整体问题的解决方案。因为我使用的是可滚动的:{ virtual: true } .k-grid-content 不存在。我可以使用 .k-virtual-scrollable-wrap 来移动网格。但它保存了不正确的左右定位。此外,当我收集左侧和顶部时,它仍然会到达网格的顶部,然后转到我以延迟跳跃运动收集的坐标。我只是不明白为什么每次保存后网格必须总是回到顶部。感谢您的帮助@Keith
【解决方案2】:

您可以使用以下解决方案来获取剑道网格的滚动位置:

$('html, body').animate({
 scrollTop: $("#unSubmittedGrid").offset().top-300
}, 'slow');

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-07-28
    • 2013-07-06
    • 2013-07-01
    • 1970-01-01
    • 2023-03-05
    • 2016-06-12
    • 1970-01-01
    • 2014-01-29
    相关资源
    最近更新 更多