dojo datagrid 将在更改排序时使页面“跳转”

Posted 2023-02-22

【中文标题】dojo datagrid 将在更改排序时使页面“跳转”

【英文标题】：dojo datagrid will make the page "jump" when sorting is changed

【发布时间】：2011-01-29 09:59:40

【问题描述】：

我的一个页面中有一个 Dojo 数据网格（其中包含更多内容）并且出现以下问题：当我单击列标题以更改排序时，页面会跳起来，好像我单击了一些html 锚。

有趣的是，页面跳转将使网格在跳转后仅显示前两行，而不是（例如）在跳转后让网格从页面顶部开始，这是锚点时的预期行为被使用了。

这个问题出现在不同的浏览器中（测试：Firefox 3.6、Opera 10、IE6），所以我猜这可能是一个Dojo-problem/-bug。

有什么办法可以制止这种恼人的行为吗？

您好， 选择0r

PS：this 似乎描述了一个类似的问题，仅适用于 JQuery（不幸的是也没有解决方案）

【问题讨论】：

您能否提供一些代码/详细信息以供您使用网格？您是否已附加到网格上的任何事件？是否对网格中的数据应用了任何特殊格式？我已广泛使用网格，但从未见过这种行为，因此了解您在做什么不同会很有帮助。

加载页面，并确保 URL 末尾没有“#”。单击标题后，是否添加了“#”？如果是这样，听起来标题链接并没有阻止默认操作。你有示例页面吗？

@Donal：我已经连接到“onStyleRow”，但仅此而已，其余的看起来像var grid = new dojox.grid.DataGrid( 'store' : store, 'structure' : structure, 'autoHeight' : true, 'autoWidth' : true (...)，那里没有特色。 @Nick：单击标题将使 URL 保持不变（没有“#”）添加。不幸的是，我无法为您提供示例页面，因为网格是一个相当复杂的内部项目的一部分。

从代码中删除“autoHeight”似乎摆脱了“跳跃”，但我唯一看到的是标题，所以这是没有选择的。固定高度也没用因为所需的高度变化很大。

【参考方案1】：

在 DataGrid 和底层 _Grid 中存在一些作用力，它们可能导致网格在两次提取之间缩小到其标题行的高度，然后重新增长。如果您在滚动到页面底部时遇到您专门描述的行为，则您的浏览器可能会“向上滚动”（以便其视口底部与页面的新底部对齐），但是当表格加载新数据并再次调整大小，您的浏览器仍然“向上滚动”。

我花了一些时间研究 DataGrid 和 _Grid。我发现确实有两个原因：

DataGrid 的 _clearData 函数，它调用 updateRowCount(0)（即在新结果出现之前将网格减少到 0 行）

_Grid 的 _resize 函数，如果 _autoHeight 为 true（如果 autoHeight 为 true，或者是一个数字 >= rowCount，则似乎是这种情况）

李>

如果您不反对弄乱源代码，您可以简单地从 DataGrid._clearData 中删除一行代码，从 _Grid._resize 中删除另一行代码并完成它；但是，假设您想要一种更简洁的方法，我尝试使用几种变通方法将 DataGrid 子类化。看看这对您来说如何。

dojo.provide('my.DataGrid');

dojo.declare('my.DataGrid', dojox.grid.DataGrid, 
  updateRowCount: function(inRowCount) 
    if (inRowCount > 0)  //ignore requests to set rowCount to 0
      this.inherited(arguments);
    
  ,
  _resize: function(changeSize, resultSize) 
    if (this._autoHeight) 
      //sizeblink workaround
      var _viewsNode = this.viewsNode;
      this.viewsNode = style: height: ''; //_Grid._resize crash dummy
      this.inherited(arguments);
      this.viewsNode = _viewsNode;
      //call post-functions again with node properly hooked
      this.adaptWidth();
      this.adaptHeight();
      this.postresize();
     else 
      this.inherited(arguments);
    
  
);
//carry over DataGrid's custom markupFactory, otherwise declarative won't work
my.DataGrid.markupFactory = dojox.grid.DataGrid.markupFactory;

希望它有所帮助，或者至少提供洞察力。我想知道这个问题是否应该作为dojo的trac中的错误输入......

【讨论】：

我们发现重置 DataGrid 是需要关注的问题，同时找到了解决方法（请参阅我的回答），但您的解决方案绝对受到青睐（即使我没有尝试过它还没有，但很快就会）。非常感谢！

我认为这是因为您设置了赏金，但在您标记它之前它就过期了。我承认我已经接近赏金的最后期限，所以我并没有真正期望得到它；）如果它最终对你有用，那么我很高兴它有所帮助。

【参考方案2】：

这是一个快速而简单的解决方法：正如 CnEY 评估的那样，问题是 DataGrid 将自身重置为 0 行，然后再次用数据填充自身。

如果您使用具有网格高度最小高度的 DIV 将 DataGrid 括起来，则重置不会影响页面的高度，因此“跳跃”将停止。

当然，这只是一个基本的解决方法，因为即使使用 javascript 设置/更改，周围的 DIV 的高度也有些静态，所以我宁愿使用动态的东西（如 CnEY 发布的解决方案）。