css - 我如何使用隐藏电话 Bootstrap 类隐藏特定的 asp.net WebGridColumn/s

Question

我正在开发一个 asp.net mvc-4 网络应用程序。在我的 View 中，我的 Razor View 中有以下 WebGrid:-

@{
var gridcolumns = new List<WebGridColumn>();

                gridcolumns.Add(new WebGridColumn()
               {
                  ColumnName="OrderID",
                   Header = "",
                   Style="hidden-phone",
                   CanSort = false,
                   Format =

                @<text>

             @Html.ActionLink("Edit","Edit", "Order",new { id = item.OrderID },null)

                </text>
               });

//other columns goes here..
var grid = new WebGrid(
                canPage: true,
                rowsPerPage: Model.PageSize,
                canSort: true,
                ajaxUpdateContainerId: "grid");

                grid.Bind(Model.Content, rowCount: Model.TotalRecords, autoSortAndPage: false);
                grid.Pager(WebGridPagerModes.All);

                @grid.GetHtml(htmlAttributes: new { id = "grid" },   // id for ajaxUpdateContainerId parameter
         fillEmptyRows: false,
         tableStyle: "table table-bordered table-hover",


         mode: WebGridPagerModes.All,
         columns: gridcolumns

         );


}

现在我想在小型设备上隐藏特定的 WebGridColumns。所以我在网络网格中定义了以下内容，如上面的代码所示:-

Style="hidden-phone",

现在这将隐藏小型设备(手机)中的列内容，但仍会显示列标题。当我在小屏幕(电话)上查看 WebGrid 时，与正文列相比，我最终拥有不同数量的标题。

所以任何人都可以告诉我如何强制 Style="hidden-phone" 应用于列内容和列标题。换句话说，当我在小屏幕上查看我的 WebGrid 时隐藏指定的列？ WebGrid 的 Style 属性似乎不会应用于指定的列标题？

Answer 1

最简单的解决方案是使用以下方法完全隐藏 header :

displayHeader:false

这是 WebGrid 对象的选项，但如果您需要它，那么唯一的解决方案是按单元格编号隐藏列标题:

$(function () {
    $('#grid thead tr th:eq(0)').addClass('hidden-phone');
})

更新

好的，假设您像示例中那样添加到列类 hidden-phone，然后您可以找到相应的标题:

$(function () {
    $('#grid tbody tr:first td.hidden-phone').each(function(index, td){  
       $('#grid thead tr th:eq(' + index + ')').addClass('hidden-phone');
    });
})

提供的函数将查看表格的第一行并搜索具有 hidden-phone 类的单元格。然后对于每个单元格，它将添加到其相应的标题相同的类。

更新#2

如果您使用 ajax 分页和排序，那么您需要稍微修改我的示例。首先将我的 js 代码移到单独的函数中:

function hideHeaders() {
    $('#grid tbody tr:first td.hidden-phone').each(function (index, td) {
        $('#grid thead tr th:eq(' + index + ')').addClass('hidden-phone');
    });
};

$(function () {
    hideHeaders();
})

然后将该函数名称作为回调传递给 ajax 请求:

var grid = new WebGrid(
    canPage: true,
    rowsPerPage: 1,
    canSort: true,
    ajaxUpdateContainerId: "grid",
    ajaxUpdateCallback: "hideHeaders");

注意 ajaxUpdateCallback: "hideHeaders" - 它现在让 WebGrid 在 ajax 请求完成后需要调用哪个函数。