我在Dojo中有一个网格,
var myGrid = new (declare([Grid, DijitRegistry]))({
store: myStore, // this is a Observable(Memory())
columns:[
{field: "field1", label: "A", sortable: false},
{field: "field2", label: "B", sortable: false},
{field: "field3", label: "C", sortable: false},
{field: "field4", label: "D", sortable: false},
{field: "field5", label: "E", sortable: false}
],
selectionMode: "single",
cellNavigation: true,
queryOptions: {
sort:[{attribute: "field1", descending: true}]
}
},
myDomRef
);
有时需要刷新网格
myGrid.refresh();
此网格的右侧有一个滚动条,我想保留滚动条的位置。但是,当我刷新时,它会滚动回到顶部。
如何保留滚动位置?
[如果使用OnDemandGrid
,它支持keepScrollPosition
属性,您可以在网格实例上定义该属性以影响所有refresh
调用,也可以在调用refresh
时明确传递(例如grid.refresh({ keepScrollPosition: true })
) 。
尝试获取包含网格的<div>
对象并获取当前滚动位置:
var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
保存位置,然后刷新网格。刷新完成后,恢复滚动位置:
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = x;
elmnt.scrollTop = y;
我认为在这种情况下,滚动值将在<div>
对象上。如果不是,请在Web浏览器中使用inspect element
,同时将鼠标指针悬停在所需的滚动条上。这应该使您能够找到需要滚动保存和还原的元素。
如果在CGI类型的环境中刷新了整个页面,则可以将这些值作为URL参数传递以完成相同的操作。
如上所述,keepScrollPosition
是使用OnDemandGrid
的解决方案。
如果使用dgrid/Grid
,则不支持keepScrollPosition
。
这是我通过滚动滚动条解决的问题(这适用于水平和垂直滚动条):Grid
具有方法getScrollPosition()
。通过在refresh()
之前调用此方法,可以保存两个滚动条的位置,并在刷新完成后跳回到它们。代码应如下所示:
var scrollpos = myGrid.getScrollPosition();
myGrid.refresh();
myGrid.scrollTo(scrollpos);
此解决方案的一个局限性是旧的IE浏览器,存在明显的来回跳转。