我如何使用隐藏电话引导类隐藏特定的 asp.net WebGridColumn/s

Question

我正在开发一个 asp.net mvc-4 Web 应用程序。在我的视图中，我的 Razor 视图中有以下 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。所以我在 web 网格中定义了以下内容，如上面的代码所示：-

Style="hidden-phone",

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

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

Answer 1

最简单的解决方案是完全隐藏标题：

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');
    });
})

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

更新 #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 请求完成后需要调用哪个函数。