html - ASP.NET Gridview 固定 header 可滚动不起作用

Question

有很多关于这个问题的主题，我已经研究过它们，但在为我的应用程序实现它们时遇到了麻烦。

我有一个绑定(bind)到 SqlDataSource 的 GridView。列宽根据内容变化(我让浏览器处理)。 GridView 是可排序的(可以单击标题)并且包含带有编辑和删除按钮的列，这些按钮取决于每行中的数据键。

据我所知，GridView 在 HTML 中呈现为:

<div><table><tbody>
  <tr><th></th></tr>
  <tr><td></td></tr>
</tbody></table></div>

所以没有线程部分。

我在 StackOverflow 上尝试过许多使用 CSS、JavaScript 或 jQuery 的解决方案。脚本解决方案似乎依赖于线程的存在，一些人建议将其添加到我的代码隐藏中以在 gridview_PreRender 处创建线程...

MyGridview.UseAccessibleHeader = true;
MyGridview.HeaderRow.TableSection = TableRowSection.TableHeader;

但是我得到一个错误，因为 MyGridview.HeaderRow 不存在，我不能设置为一个对象(标题)的实例，因为它是空的。

我还尝试了一些 CSS 解决方案，例如此处推荐的解决方案:HTML fixed header table scrollbar它实际上非常接近我所需要的，除了标题行最终会有一条奇怪的白线穿过它。我对此进行了调查，发现它与 border-collapse 属性有关。我可以 F12 进入网络浏览器的开发者工具并修复它，但无论我在 CSS 中设置什么，它都不会在运行时最初加载。

此外，虽然这对我来说在 IE 中有效，但在 Chrome 或 Safari 中无法正常工作。标题栏会向左挤压，而不是拉伸(stretch)以匹配表格其余部分列的宽度。这很奇怪，因为示例页面在 Chrome 和 Safari 中呈现得很好(所以我的其他 CSS 或代码可能会与此混淆)。

我是否遗漏了一些非常明显的东西？或者我没有提供足够的信息来解决这个问题？理想情况下，这将是一个模块化的解决方案，我可以跨我的一堆网页(所有网页都使用相同的 CSS 来呈现 GridView)并且将跨浏览器。我不反对 JavaScript 解决方案，只要 Sortable header 和 DataKey 按钮持续存在即可。

Answer 1

我最终使用的解决方案是手动创建一个带有 LinkBut​​tons 的表作为标题行，并使用这些按钮的 _Click 对 Gridview 进行排序。然后，我使用 JavaScript 隐藏了 Gridview 呈现的表格上的标题栏，并将其放在可滚动的 div 中。它最终运行良好。