1

重複の可能性:
asp.net の水平スクロールと垂直スクロールを使用して GridView ヘッダーを修正しました。

修正ヘッダーを使用して Scrollable Gridview を構築するように設計するタスクがあります。Divで開発してみました

    <div id="DataDiv" style="overflow: auto; border: 1px solid olive; 
        width: 600px; height: 300px;" />

  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
            ShowHeader="false" RowStyle-VerticalAlign="Bottom">
            <Columns>
                <asp:BoundField DataField="dbms_id" HeaderText="ID" ItemStyle Width="30px" />
                <asp:BoundField DataField="dbms" HeaderText="Dbms" ItemStyle-Width="50px" />
                <asp:BoundField DataField="version" HeaderText="Version" ItemStyle-Width="30px" />
            </Columns>
        </asp:GridView>
    </div>

しかし、ヘッダーが修正されていないため、機能しません。

次に、もう1つのコードを見つけます

<div style=" background-repeat: repeat-x; height: 30px;
        width: 200px; margin: 0; padding: 0">
        <table cellspacing="0" cellpadding="0" rules="all" border="1" id="tblHeader" style="font-family: Arial;
            font-size: 10pt; width: 200px; color: Black; border-collapse: collapse; height: 100%;">
            <tr>
                <td style="width: 30px; text-align: center">
                   ID
                </td>
                <td style="width: 50px; text-align: center">
                    Dbms
                </td>
                <td style="width: 30px; text-align: center">
                    Version
                </td>
            </tr>
        </table>
    </div>
    <div style ="height:100px; width:617px; overflow:auto;">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
            ShowHeader="false" RowStyle-VerticalAlign="Bottom">
            <Columns>
                <asp:BoundField DataField="dbms_id" HeaderText="ID" ItemStyle-Width="30px" />
                <asp:BoundField DataField="dbms" HeaderText="Dbms" ItemStyle-Width="50px" />
                <asp:BoundField DataField="version" HeaderText="Version" ItemStyle-Width="30px" />
            </Columns>
        </asp:GridView>
    </div>

この方法では、純粋な html を使用してヘッダーを設計しています。

問題は、この要件を実装するための最良の方法は何かということです。

4

2 に答える 2

2

あなたの問題とは別に、あなたが知っておくべきことがいくつかあります:

1) 設計上、表のセルは自動サイズ変更され、最も長いセルの内容に一致して、表が読みやすくなります。ヘッダーを固定してこの「ルール」を破ると、ヘッダーがテーブル ルールに拘束されなくなるため、ヘッダー セルのサイズ変更に注意する必要があります。

2) 純粋なHTML/CSS ソリューションは、すべてのセル (テーブルとヘッダーの両方) に静的な長さを設定した場合にのみ機能します。コンテンツが長すぎてセルに収まらず、改行が不可能な場合 (私は時々ドイツ語の名詞を扱うので、それが可能であることはわかっています)、すべてがバラバラになります。

3) 動的なソリューションが必要な場合は、コンテンツが変更されるたびに JS で表のセルを再計算する必要があります。

かなり簡単に説明されていると思います。いくつかの例が必要な場合はお知らせください。提供します。

楽しむ!

于 2012-12-26T11:05:02.307 に答える
0

私はこのようなことを数回しました。

http://www.codeproject.com/Tips/471756/Fixed-Table-Header-atop-scrollable-GridView-in-ASP

私ができる唯一のヒントは、グリッド上の垂直線に近づかないことです。グリッドビューの行とテーブルの行をブラウザ間で並べるのは難しいです。

于 2012-12-26T18:04:21.347 に答える