具有固定标题和全页宽度网格的 Gridview

Question

我之前问过问题Set header width and column properly during freeze the header in gridview 通过使用这些解决方案，我发现了一些分辨率问题，所以我在设计本身中添加了所有列。但是当列有大长度文本时，我仍然面临问题。

我正在尝试使用link 中给出的代码来冻结 Gridview 的标题

它可以工作，但问题是将 Gridview 修复为整个页面大小的宽度。也就是说 Gridview 应该在浏览器中全屏显示。如果列的内容很小，它可以正常工作。但是如果一列的长度值很大，那么数据在一个单元格内需要大约 2 或 3 行。在这种情况下，网格标题宽度和列宽度设置不相等，看起来很奇怪。 我尝试将 HeaderStyle-Width 和 ItemStyle-Width 与 % vales 一起使用。我没有更改脚本中的任何内容。但这没有帮助。 所以我试图通过为每列指定 HeaderStyle-Width 和 ItemStyle-Width 来解决这个问题。 然后它工作正常。但在这里我面临另一个问题。那是由于固定宽度，网格不会全屏显示。对于高分辨率显示，网格仅显示大约 75% 的屏幕宽度。

那么如何解决。我希望网格全屏显示，列和标题应该正确对齐。

Answer 1

如果您不介意使用一个小的 jquery 插件，那么它可能会节省您的时间。我知道我曾经为我早期的一个项目使用 css 表达式和 javascript 解决方案在互联网上尝试所有建议，但它总是在一个或其他浏览器中中断，并且标题列宽和行列宽可能无法对齐动态数据长度。

链接到 GridViewScroll Demo 可以完美地完成这项工作。

这是我在我的应用程序中使用它的方式，它完美无缺。对于类似的问题，请在 SO 上参考我的另一个 answer。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="gridviewScroll.min.js"></script>
<link href="GridviewScroll.css" rel="stylesheet" />

function pageLoad(sender, args) {
   gridviewScroll ();
}

function gridviewScroll() {
   gridView1 = $('#GridView1').gridviewScroll({
        width: 915,
        height: 449,
        railcolor: "#F0F0F0",
        barcolor: "#CDCDCD",
        barhovercolor: "#606060",
        bgcolor: "#F0F0F0",
        freezesize: 5,
        arrowsize: 30,
        varrowtopimg: "../../../images/arrowvt.png",
        varrowbottomimg: "../../../images/arrowvb.png",
        harrowleftimg: "../../../images/arrowhl.png",
        harrowrightimg: "../../../images/arrowhr.png",
        headerrowcount: 1,
        onScrollVertical: function (delta) {
         // store the scroll offset outside of this function in a hidden field and restore if you want to maintain vertical scroll position
        },
        onScrollHorizontal: function (delta) {
          //store the scroll offset outside of this function in a hidden field and restore if you want to maintain horizontal scroll position
        }
    });
}

还有关于冻结网格标题在我的应用程序中的外观的屏幕打印。如果您有一个冗长的行数据，您可以事件冻结网格的某些列。从图像中，灰色的列是在我的应用程序中被冻结的列。