41

ASP.NETアプリケーションからTwitterBootstrapを使用する際に問題が発生しました。コントロールにtable table-stripedcssクラスを使用すると、テーブルのヘッダーが行として扱われます。asp:GridView

私のGridView

ASP.NETマークアップ

<asp:GridView ID="dgvUsers" runat="server" 
    CssClass="table table-hover table-striped" GridLines="None" 
    AutoGenerateColumns="False">
    <Columns>
        <asp:BoundField DataField="UserID" HeaderText="ID" Visible="false" />
        <asp:BoundField DataField="Username" HeaderText="Username" />
        <asp:BoundField DataField="FirstName" HeaderText="First Name" />
        <asp:BoundField DataField="LastName" HeaderText="Last Name" />
    </Columns>
    <RowStyle CssClass="cursor-pointer" />
</asp:GridView>

結果

行として扱われるヘッダー

<table id="cphMainContent_dgvUsers" class="table table-hover table-striped" 
       cellspacing="0" style="border-collapse:collapse;">
    <tbody>
        <tr>
            <th scope="col">Username</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
        </tr>
        <tr class="cursor-pointer">
            <td>user1</td>
            <td>Test</td>
            <td>User 1</td>
        </tr>
        <tr class="cursor-pointer">
            <td>user2</td>
            <td>Test</td>
            <td>User 2</td>
        </tr>
        <tr class="cursor-pointer">
            <td>user3</td>
            <td>Test</td>
            <td>User 3</td>
        </tr>
    </tbody>
</table>

こんな感じになります

こんな感じになります

<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>


asp:GridViewTwitter Bootstrapでヘッダーをヘッダーとして扱う にはどうすればよいですか？私のコードはC＃、フレームワーク4、VS2010Proでビルドされています。

4

4 に答える 4

50

useaccessibleheadergridviewの属性をに設定する必要があります。また、GridViewオブジェクトのメソッドを呼び出した後、ヘッダーとしてをtrue指定する必要があります。したがって、グリッドビューがTableSectionDataBind()mygv

mygv.UseAccessibleHeader = True
mygv.HeaderRow.TableSection = TableRowSection.TableHeader

theadこれにより、tbodyタグ付きの適切なフォーマットのグリッドが作成されます。

于 2012-09-11T03:59:54.317 に答える
7

これを解決するには、次の2つの手順があります。

  1. UseAccessibleHeader="true"Gridviewタグに追加：

    <asp:GridView ID="MyGridView" runat="server" UseAccessibleHeader="true">

  2. PreRender次のコードをイベントに追加します。


Protected Sub MyGridView_PreRender(sender As Object, e As EventArgs) Handles MyGridView.PreRender
    Try
        MyGridView.HeaderRow.TableSection = TableRowSection.TableHeader
    Catch ex As Exception
    End Try
End Sub

ヘッダー行の設定DataBound()は、オブジェクトがデータバインドされている場合にのみ機能することに注意してください。グリッドビューをデータバインドしない他のポストバックでは、グリッドビューヘッダー行のスタイルが再び標準行に戻ります。PreRenderは常に機能しますが、グリッドビューが空の場合にエラーキャッチがあることを確認してください。

于 2015-05-14T01:19:28.630 に答える
4

念のため、テーブルに境界線を設定しました。これを取り除くには、GridViewで次のプロパティを設定する必要がありました。

GridLines="None"
CellSpacing="-1"
于 2016-02-25T20:18:34.233 に答える
0

gridviewにshowheaderのプロパティを追加します 

 <asp:GridView ID="dgvUsers" runat="server" **showHeader="True"** CssClass="table table-hover table-striped" GridLines="None" 
AutoGenerateColumns="False">

列にヘッダーテンプレートを追加します

<HeaderTemplate>
                   //header column names
</HeaderTemplate>
于 2018-04-20T15:07:34.513 に答える