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.I没有更改脚本中的任何内容。但它没有帮助。 所以我试图通过为每列指定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
        }
    });
}

屏幕上显示冻结网格标题在我的应用程序中的显示方式。如果您有冗长的行数据，则可以冻结网格的某些列。从图像中，灰色的列是我的应用程序中冻结的列。