0

ASP.NET でページネーション機能を使用していますが、テーブルを完全に削除したいと考えています。私がブラウジングしたところ、グリッドビューで訴訟を起こすカスタムのページネーションシステムを作成することは不可能であると言う人もいれば、それは可能だが高度であると言う人もいます。私はASP.NETを初めて使用するので、どちらの方法でもかまいませんが、CSSでテーブルのように見えないようにスタイルを設定できる場合が最善の方法です。

私のグリッドビューでのページネーションは次のようになります。削除したいものをマークしました。緑色のボックス内のコンテンツはページング テーブルであり、矢印が指している濃い灰色のボックスは削除したい部分です。

削除したいものをマークしました。 緑色のボックス内のコンテンツはページング テーブルであり、矢印が指している濃い灰色のボックスは、**削除**したい部分です。

これがグリッドビューです。

<asp:GridView ID="grdFAQ" runat="server" AllowPaging="True" 
    AutoGenerateColumns="False" CellPadding="4" DataKeyNames="FAQ_Id" 
    DataSourceID="oGetAllFAQs" ForeColor="#333333" GridLines="None" 
    PageSize="50" onrowdeleted="grdFAQ_RowDeleted" AllowSorting="True" 
        onpageindexchanged="grdFAQ_PageIndexChanged" 
        onpageindexchanging="grdFAQ_PageIndexChanging" onsorting="grdFAQ_Sorting">
    <RowStyle BackColor="#f2f2f2" ForeColor="#333333" />
    <Columns>

        <asp:TemplateField SortExpression="FAQ_Highlight">
            <ItemTemplate>
                <asp:Image ID="imgHighlighted" runat="server" AlternateText="Highlighted (Show on front page)" 
                    ImageUrl="~/Images/flag_yellow.png"
                    Visible='<%# Eval("FAQ_Highlight") %>' />
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField SortExpression="FAQ_Important">
            <ItemTemplate>
                <asp:Image ID="imgImportant" runat="server" AlternateText="Important" 
                    ImageUrl="~/Images/information.png"
                    Visible='<%# Eval("FAQ_Important") %>' />
            </ItemTemplate>
        </asp:TemplateField>

        <asp:HyperLinkField DataNavigateUrlFields="FAQ_Id" DataTextField="FAQ_FromDate"
            SortExpression="FAQ_FromDate" HeaderText="Date" DataTextFormatString="{0:d}"
            DataNavigateUrlFormatString="~/Administration/FAQEditor.aspx?FAQ_Id={0}" 
            Text=""  >
         <ControlStyle Width="75px" />
        <ItemStyle CssClass="UI_medium" />
        </asp:HyperLinkField>

        <asp:HyperLinkField DataNavigateUrlFields="FAQ_Id" DataTextField="FAD_Question"
            SortExpression="FAD_Question" HeaderText="Question"
            DataNavigateUrlFormatString="~/Administration/FAQEditor.aspx?FAQ_Id={0}" 
            Text="" >
        <ItemStyle CssClass="UI_medium" />
        </asp:HyperLinkField>

        <asp:HyperLinkField DataNavigateUrlFields="FAQ_Id" DataTextField="FAD_Question_Secondary"
            SortExpression="FAD_Question_Secondary" HeaderText="Secondary language"
            DataNavigateUrlFormatString="~/Administration/FAQEditor.aspx?FAQ_Id={0}" 
            Text="" >
        <ItemStyle CssClass="UI_medium" />
        </asp:HyperLinkField>

        <asp:CommandField ShowDeleteButton="True" ButtonType="Image" 
             DeleteImageUrl="~/Images/table_row_delete.png" Visible="false">
            <ItemStyle Font-Names="Segoe UI" Font-Size="X-Small" />
        </asp:CommandField>

        <asp:TemplateField>
            <ItemTemplate>
                <asp:ImageButton ID="btnDelete" runat="server" AlternateText="Delete"
                    ImageUrl="~/Images/table_row_delete.png" OnClick="btnDelete_Click"
                    CommandName="FAQ_Id" CommandArgument='<%# Eval("FAQ_Id") %>' ToolTip="Delete" />
            </ItemTemplate> 
        </asp:TemplateField>

    </Columns>
    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#dedede" ForeColor="#000000" HorizontalAlign="Center" CssClass="pager" />
    <EmptyDataTemplate>
        <asp:Label ID="lblEmpty" runat="server" 
            Text="Tomt! Välj ett språk.."></asp:Label>
    </EmptyDataTemplate>
    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" Font-Names="Segoe UI" 
        ForeColor="White" Font-Size="Small" />
    <EditRowStyle BackColor="#999999" />
    <AlternatingRowStyle BackColor="#f7f6f3" ForeColor="#000000" />
</asp:GridView>

クラスのページャーとすべてのテーブル関連の css のスタイルは次のとおりです。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, hr {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

table { border-collapse: separate; border-spacing: 0; }

table {
    border-collapse: collapse;
    text-align: left;
    margin-bottom: 20px;
    width:100%;
}

.pager table {
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
}

.pager th, td {
    /*border: none;*/
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
    padding-left: 2px;
    padding-right: 2px;
}


.pager:hover td {
    background-color: #f7f6f3;
}

ページを表示するときのページング テーブルの HTML ソースを次に示します。

<tr class="pager" align="center" style="color:Black;background-color:#DEDEDE;">
<td colspan="6">
    <table border="0">
    <tr>
        <td>
        <span>1</span>
        </td>
        <td>
        <a href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$grdFAQ&#39;,&#39;Page$2&#39;)" style="color:Black;">2</a>
        </td>
    </tr>
    </table>
</td>
</tr>

上記の HTML コードでわかるように、ページング テーブルは gridview-table 内にあります。お時間をいただき、ありがとうございます。

4

1 に答える 1