1

ASP.NET GridViewヘッダー行内のすべての列にまたがる角丸長方形のグラフィックを取得するにはどうすればよいですか？

私は現在、丸みを帯びた長方形のグラフィックを作成し、CSSを使用してそれをグリッドビューヘッダーの背景に追加しました：-

.datagrid th
{
    background-image: url('../images/rounded_graphic.jpg');
}

...しかし、これはヘッダー行全体にまたがるのではなく、ヘッダーの各列に表示するだけです。

何か案は ？

4

3 に答える 3

1

生成されたデータグリッドには、列の間に間隔を空ける必要はありません。

  • 最初の列には、丸みを帯びた画像の左側が必要です
  • 間にある列には、画像の中央部分が必要です
  • 最後の列は画像の右側になります

それは少なくとも大まかな考えです:)

于 2009-07-10T12:19:08.420 に答える
0

ヘッダーテンプレートで templatefield を使用する 

<asp:GridView ID="gvPrograms" runat="server"
        ...    
        >
        ...
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                     your header formatted as you like here...
                    <table>
                    </table>
                </HeaderTemplate>
                <ItemTemplate>
                </ItemTemplate>
                    your existing layout here...
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>            
</asp:GridView>
于 2009-07-10T12:22:18.453 に答える
0

私は前にこれをやったことがあります。これが私が思いついた大まかなコードです：

CSS

table th.first-column {
    background: url(images/layout/tb_left.png) 0 0 no-repeat;
}

table th {
    height: 26px;
    background: url(images/layout/tb_bg.png) 0 0 repeat-x;
}

/* Had some issues across browsers just putting the image in the <th>, had to use a span */
table th.last-column span {
    display: block;
    height: 26px;
    background: url(images/layout/tb_right.png) 100% 0 no-repeat;
}

HTML

<table width="100%" cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th class="first-column"><span>Column 1</span></th>
            <th><span>Column 2</span></th>
            <th><span>Column 3</span></th>
            <th class="last-column"><span>Column 4</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
        ...
        </tr>                           
    </tbody>
    <tfoot>
        <tr>
        ...
        </tr>
    </tfoot>
</table>

次に、それに応じて画像を作成するだけで、すべて問題ありません。私の最初と最後の列の画像は、幅が数百ピクセルで、最初の左側のエッジが丸く、最後の列の右側のエッジが丸くなっています。中央の背景画像はちょうど 1x26 ピクセルで、x 軸に沿って繰り返されます。

于 2009-07-10T12:35:27.443 に答える