如何在多个 GridView 中对齐列答案

【问题标题】：How to align columns in multiple GridViews如何在多个 GridView 中对齐列
【发布时间】：2010-03-10 20:57:15
【问题描述】：

如何让单个页面上的多个 GridView 共享相同的列宽？

我有四个 GridView，每个中都有（基本上）相同的列。它们具有唯一的标头并表示来自不同查询的数据。我想通过允许根据数据动态调整列的大小来最大限度地提高可读性，但我不希望每个 GridView 都独立完成。具有不同宽度的同名列一个在另一个之上看起来非常草率。而是希望所有四个 GridView 为第 1 列选择相同的大小，为第 2 列选择相同的大小等。

在 Windows 应用程序中，我相信有一个名为 SharedSizeGroup 的属性，它允许您设置来自不同控件的列以在决定最佳大小时进行协作。

这完全可以在 ASP.NET 中实现吗？因为动态列宽取决于浏览器，所以问太多了吗？

谢谢

【问题讨论】：

标签： asp.net gridview browser web-controls

【解决方案1】：

我很确定您只能为自己设置宽度。我不认为他们可以让你做你想做的事。

如果您使用 asp:TemplateFields、asp:BoundFields 等来形成您的字段，您可以使用 ItemStyle-Width=" 100px" 设置每列的宽度

【讨论】：

【解决方案2】：

因为动态列宽取决于浏览器，所以问太多了吗？

差不多。除非您明确设置列宽，否则浏览器会选择 - 所以 ASP.NET 对此一无所知。不过，您可能可以使用一些 jQuery 来弥补：

$(function() {
   var maxWidth = 0;
   $('TBODY TR:first TD.col1').each(function() {
       maxWidth = $(this).width > maxWidth ? $(this).width : maxWidth;
   });

   $('TBODY TR:first TD.col1').width(maxWidth);
});

【讨论】：

感谢您的信息。我不认为我会自己重新调整列宽。在我重新创建在浏览器中找到的整个动态列大小调整逻辑之前，我可能会继续修改并且不会对此感到满意。 :) 因为我的项目不是太大，所以我只是将这四个更改为一个 gridView。在绑定之前，我将查询数据聚合到单个 dataTable 服务器端，然后我使用一些 JavaScript 来美化表格，其中包含摘要行、重复的标题等，将不同的数据块分开。
@Owen - FWIW，我的代码 sn-p（未经测试）只会将宽度设置为浏览器布局的最大值。这基本上就是将所有内容填充到一个表中的作用。
是的，这就是为什么我可以看到自己无休止地修补。这种行为意味着如果表 A 认为第 3 列需要很多空间，表 B 认为第 1 列需要很多空间，表 C 认为第 7 列需要很多空间，我最终将第 1、3 和 7 列设置得都很大表。要么变宽并且需要滚动条（如果我使用像素），要么如果我标准化为百分比，它会比平时更多地挤压不太大的列。