javascript - ASP.NET mvc 隐藏 webgrid 列

Question

我的 cshtml 文件接收模型中的一些 bool 值(+用于构建网络网格的数据)。根据 bool 值，一些 webgrid 列必须显示，一些隐藏，例如我有:webgrid 中的 Name、Surname、Job 列，但我有 SurnameBool = 0 这意味着只有 Name必须显示 和 Job 列。我尝试使用其他答案中的代码，但不幸的是我是 JavaScript 新手，所以请您建议我如何基于 @if 将 css display : none 属性添加到 webgrid 中的列(ColumnNameBool) 结果。

WebGrid grid = new WebGrid(item2.ListOfWorkData, canSort: false, rowsPerPage: 15);

<div id="divWebGrid" class="row">
    @if (item2.ListOfWorkData.Any())
    {
        @grid.GetHtml(
                             tableStyle: "table",
                             headerStyle: "table_HeaderStyle",
                             footerStyle: "table_PagerStyle",
                             rowStyle: "table_RowStyle",
                             alternatingRowStyle: "table_AlternatingRowStyle",
                             selectedRowStyle: "table_SelectedRowStyle",
                             columns: grid.Columns(
                                 grid.Column("ProjectName", @Resources.Localization.project, format: @<text>
                                    @if (Model.ColumnsNeeded.ProjectNameBool)
                                    {
                                        <span class="display-mode"><label id="ProjectNameLabel">@item.ProjectName</label></span>
                                    }
                                </text>,style : "hidden-column"),
                                 grid.Column("Activity", @Resources.Localization.activity, format: @<text>
                                    @if (Model.ColumnsNeeded.ActivityBool)
                                    {
                                        <span class="display-mode"><label id="ActivityLabel">@item.Activity</label></span>
                                    }
                                </text>, style: "p60"),
                                 grid.Column("ProjectEndDate", @Resources.Localization.start_date, format: @<text>
                                    @if (Model.ColumnsNeeded.ProjectStartDateBool)
                                    {
                                        <span class="display-mode"><label id="ProjectStartDate">@item.ProjectStartDate</label></span>
                                    }
                                </text>, style: "p60"),
                                 grid.Column("ProjectEndDate", @Resources.Localization.end_date, format: @<text>
                                    @if (Model.ColumnsNeeded.ProjectEndDateBool)
                                    {
                                        <span class="display-mode"><label id="ProjectEndDate">@item.ProjectEndDate</label></span>
                                    }
                                </text>, style: "p60")
                             )
                     )
    }

Answer 1

您应该创建具有空源的网格:

WebGrid grid = new WebGrid<Your item type>(null, canSort: false, rowsPerPage: 15);

将网格与源绑定(bind):

grid.Bind(item2.ListOfWorkData, rowCount: <total row count>, autoSortAndPage: false);

根据 ColumnNameBool 值创建列集:

var gridColumns = new List<WebGridColumn>();
@if(ColumnNameBool)
{          
      gridColumns.Add(grid.Column("ProjectName", 
                       @Resources.Localization.project, format: @<text>
                                @if (Model.ColumnsNeeded.ProjectNameBool)
                                {
                                    <span class="display-mode">
                                    <label id="ProjectNameLabel">
                                    @item.ProjectName</label>
                                    </span>
                                }
                            </text>,style : "hidden-column"));
               )
             //... add other required columns here
}
else
{
      //create here another list of columns that required
      gridColumns.Add(...);   

}

最后将列列表分配给网格:

@grid.GetHtml(<styles>, columns: gridColumns.ToArray());