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

【问题标题】：How to hide a gridview column on mobile using bootstrap 4?如何使用引导程序 4 在移动设备上隐藏 gridview 列？
【发布时间】：2020-03-01 04:33:58
【问题描述】：

我有一个网格视图，我想使用引导程序在移动/平板电脑视图上隐藏一列（例如出生日期。请参阅代码）。如何实现？我找到了解决方案，但使用了 bootstrap 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>

【问题讨论】：

标签： javascript mobile bootstrap-4

【解决方案1】：

根据这个问题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" 并且可能发生冲突。

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

然后您想添加这些 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>

【讨论】：

你好，我的朋友。它按我的预期工作，谢谢。但该列的标题并未隐藏。
我已经更新了隐藏标题的答案，这应该可以满足您的需求。

【解决方案2】：

在表格单元格上设置显示类会产生奇怪的结果。最好在内容上使用它。您可以使用 TemplateFields 并在 HeaderText 和内容中使用具有正确类的 span 元素。

<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>

【讨论】：