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

Question

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

我正在尝试使用此 link 中给出的代码来卡住 Gridview 的 header

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

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

Answer 1

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

链接到 GridViewScroll Demo这使得这项工作非常完美。

这是我在应用程序中使用它的方式，它运行完美。引用我的另一个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
        }
    });
}

屏幕打印显示卡住的网格标题在我的应用程序中的外观。如果您有较长的行数据，您可以事件卡住网格的某些列。从图像中，灰色的列是我的应用程序中被卡住的列。