如何使用引导程序4在移动设备上隐藏gridview列？

2024-09-08 • 问答

我有一个gridview，我想使用引导程序在移动/平板电脑视图中隐藏一列（例如BirthDate。请参见代码）。如何实现呢？我找到了解决方案，但使用了引导程序3。预先谢谢你。

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellSpacing="-1" HorizontalAlign="Center" Height="80px" Width="800px" AutoGenerateColumns="False" EnableModelValidation="True" OnPageIndexChanging="GridView1_PageIndexChanging">
    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" HorizontalAlign="Center" />
    <Columns>
        <asp:BoundField DataField="EmployeeID" HeaderText="Employee">
            <HeaderStyle BorderColor="#CC9966" />
        </asp:BoundField>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Surname" HeaderText="Surname" />
        <asp:BoundField DataField="BirthDate" HeaderText="Date of Birth">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
    </Columns>
</asp:GridView>

根据这个问题How to add a CSS class to a BoundField

<asp:BoundField ItemStyle-CssClass="Tag1"/>

或者与您的示例保持一致，您可以将CssClass添加到BoundField中的ItemStyle标记中

<asp:BoundField DataField="BirthDate" HeaderText="Date of Birth">
    <ItemStyle CssClass="d-none d-md-block d-lg-block d-xl-block" HorizontalAlign="Right"></ItemStyle>
</asp:BoundField>

您可能想要创建一个进行对齐的CSS类，而不是使用HorizontalAlign属性。 HorizontalAlign在不是CSS且可能发生冲突的表格单元格上创建此代码align="right"。

这将隐藏项目，以隐藏表格标题，您需要在HeaderStyle内添加一个BoundField元素（请参见下文）

然后，您想添加这些Bootstrap类以仅在中，大和超大屏幕尺寸上显示（这与在移动设备上隐藏相同-您可能也希望在中等尺寸上隐藏，只需取出其中一个即可））：

.d-none .d-md-block .d-lg-block .d-xl-block

查看其他内容： Hiding Elements with Bootstrap

因此，您的BoundField将如下所示：

<asp:BoundField DataField="BirthDate" HeaderText="Date of Birth">
    <HeaderStyle CssClass="d-none d-md-block d-lg-block d-xl-block"></HeaderStyle>
    <ItemStyle CssClass="d-none d-md-block d-lg-block d-xl-block" HorizontalAlign="Right"></ItemStyle>
</asp:BoundField>

在表单元格上设置显示类将给出奇怪的结果。最好在内容上使用它。您可以使用TemplateFields并将span元素与HeaderText和内容中的正确类一起使用。

<asp:GridView ID="GridView1" AutoGenerateColumns="false" CssClass="table table-striped" GridLines="None" runat="server" ItemType="NameSpace1.Book">
    <Columns>
        <asp:TemplateField HeaderText="Always Visible">
            <ItemTemplate>
                <%# Item.id %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="<span class='d-md-none'>Visible on Mobile</span>">
            <ItemTemplate>
                <span class="d-md-none"><%# Item.Name %></span>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="<span class='d-none d-md-block'>Visible on Desktop</span>">
            <ItemTemplate>
                <span class="d-none d-md-block"><%# Item.date.ToLongDateString() %></span>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

如何使用引导程序4在移动设备上隐藏gridview列？

rxdrd 回答：如何使用引导程序4在移动设备上隐藏gridview列？

大家都在问