具有固定页眉和全页宽度网格的 Gridview [英] Gridview with fixed header and full page width grid

问题描述

我之前问过问题 在gridview中冻结标题时正确设置标题宽度和列通过使用这些解决方案，我发现了一些分辨率问题所以我在设计本身中添加了所有列.但是当列有大长度文本时我仍然面临问题.

I had previously asked question Set header width and column properly during freeze the header in gridview By using those solution I found some problem with resolution So I added all columns in design itself.But still I am facing problem when columns have large length text.

我正在尝试使用此 链接

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

It works but the problem is fixing the Gridview to full page size width. That is Gridview should appear full screen in the browser. It works properly if a content of column are small. But if a column has large length value then the data require about 2 or 3 lines inside a cell . In this case grid header width and columns width not being set equally and looks odd. I tried using HeaderStyle-Width and ItemStyle-Width with % vales.I didn't change anything in script. But it didn't help. So i tried to fix this by specifying HeaderStyle-Width and ItemStyle-Width for each column. Then it works fine. But here I face another problem . That is due to fixed width the grid will not display full screen. For a high resolution display grid shows only about 75% width of screen.

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

So how can it be fixed. I want grid to be appear full screen and columns and header should be aligned properly.

推荐答案

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

If you don't mind using a little jquery plugin then it might save your time. I know I used to try out all the recommendations out there in internet using css expression and javascript solutions for one of my earlier projects but it always breaks in one or the other browsers and the header column width and row column width may not align for dynamic data length.

链接到 GridViewScroll Demo 完美地完成了这项工作.

Link to GridViewScroll Demo that does this job perfect.

这是我在我的应用程序中使用它的方式，它完美地工作.请参阅我在 SO 上的另一个 answer 以解决类似问题.

Here is how I used it in my application and it works flawlessly. Refer my another answer on SO for the similar problem.

<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
        }
    });
}

以及有关冻结网格标题在我的应用程序中的外观的屏幕打印.如果您有很长的行数据，您可以事件冻结网格的某些列.从图像中，变灰的列是在我的应用程序中被冻结的列.

And the screen print on how the frozen grid header looks in my application. You can event freeze certain columns of the grid if you have a lengthy row data. From the image the columns that are grayed out are the ones being frozen in my application.

这篇关于具有固定页眉和全页宽度网格的 Gridview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！