Можно ли показывать заголовки при прокрутке вида сетки? - PullRequest
Новая
       20

Можно ли показывать заголовки при прокрутке вида сетки?

0 голосов
/ 03 сентября 2011

Я использую Gridview в своем приложении. Вид сетки связан с данными из базы данных с некоторым текстом заголовка. Теперь, что я хотел бы иметь, когда я прокручиваю вид сетки, я хотел бы показать заголовки при перемещении вида сетки, как я могу сделать это

Это то, что я написал McArthey

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <link href="StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Panel ID="pnlWrapper" runat="server" Height="300px" ScrollBars="Vertical" BorderWidth="1px">                
    <asp:GridView ID="gvTheGrid" runat="server" GridLines="Both" CellPadding="3" CssClass="gvTable" AutoGenerateColumns="false" AllowSorting="true">                    
        <columns>
            <asp:BoundField DataField="id" HeaderText="id" HeaderStyle-Width="60" ItemStyle-Width="60" />
        </columns>
    </asp:GridView>
</asp:Panel>
    </div>
    </form>
</body>
</html>

stylesheet выглядит следующим образом 

TABLE.gvTable
{
    table-layout:fixed;
}
TABLE.gvTable TH
{    
    position:relative;
    border-top-width:0px;
    border-bottom-color:Black;
    background-color:#F5DEB3;
}

Это мой пример источника, когда я запускаю и нажимаю на источник просмотра 

  <div id="pnlWrapper" style="border-width:1px;border-style:solid;height:300px;overflow-y:scroll;">
 <div>
 <table class="gvTable" cellspacing="0" cellpadding="3" rules="all" border="1" id="gvTheGrid" style="border-collapse:collapse;">
 <tr>
<th scope="col" style="width:60px;">id</th>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>

Заголовок отображается при загрузке страницы

enter image description here

Нет заголовка при прокрутке вниз

enter image description here

Ответы [ 3 ]

1 голос
/ 05 сентября 2011

Существует пример здесь , который работает на IE8.

Это было очень полезно для меня, так как мы переходим на IE8 здесь, на работе, и мне нужно, чтобы это заработало.

Есть несколько хитростей с использованием этого решения. Предполагается использовать теги <thead> и <tbody>, которые не отображаются по умолчанию в GridView. Чтобы отобразить их, вам нужно добавить что-то вроде следующего, что было предложено ранее другим. 

// will add <thead> and <tbody>
gvTheGrid.HeaderRow.TableSection = TableRowSection.TableHeader;

У меня есть пример решения, работающего здесь на основе той ссылки, которую я отправил по электронной почте.

1 голос
/ 03 сентября 2011

Простое решение - обернуть содержимое ItemTemplate (вы можете использовать столбец шаблона), используя. 

<ItemTemplate>
 <div style="height:100px; overflow:scroll">
   .....
 </div>
</ItemTemplate>

Взгляните на статью CodeProject: Прокручиваемый GridView.

0 голосов
/ 03 сентября 2011

Вот как мы это сделали.

  1. создайте панель asp с заданной высотой и укажите вертикальные полосы прокрутки
  2. поместите вид сетки внутри панели и присвойте ему классmyGridView

  3. в CSS создает следующие стили

    TABLE.myGridView {table-layout: fixed;}
    TABLE.myGridView TH {position :lative;}

  4. Укажите ширину каждого asp: BoundField следующим образом:

    HeaderStyle-Width = "85" ItemStyle-Width = "85"

Вот пример кода: 

<asp:Panel ID="pnlWrapper" runat="server" Height="300px" ScrollBars="Vertical" BorderWidth="1px">                
    <asp:GridView ID="gvTheGrid" runat="server" GridLines="Both" CellPadding="3" CssClass="gvTable" AutoGenerateColumns="false" AllowSorting="true">                    
        <columns>
            <asp:BoundField DataField="C" HeaderText="C" HeaderStyle-Width="60" ItemStyle-Width="60" />
        </columns>
    </asp:GridView>
</asp:Panel>

Вот CSS: 

TABLE.gvTable
{
    table-layout:fixed;
}
TABLE.gvTable TH
{    
    position:relative;
    border-top-width:0px;
    border-bottom-color:Black;
    background-color:#F5DEB3;
}

Вот сгенерированный HTML: 

<div id="ctl00_MainContent_pnlWrapper" style="border-width:1px;border-style:solid;height:300px;overflow-y:scroll;">
<div>
<table class="gvTable" cellspacing="0" cellpadding="3" rules="all" border="1" id="ctl00_MainContent_gvTheGrid" style="background-color:WhiteSmoke;border-collapse:collapse;">
<tr style="font-size:Medium;">
<th scope="col" style="width:60px;">Select One</th>
<th scope="col" style="width:60px;">Number</a></th>
<th scope="col" style="width:60px;">Address</a></th>
<th scope="col" style="width:200px;">Phone</a></th>
</tr>
</table>
</div>               
</div>

Вы можете увидеть классы для соответствия CSS между кодом / сгенерированным источником.

HTH

...