ASP.NET mvc webgrid 열을 숨기기

Question

내 cshtml 파일은 모델 내에서 일부 bool 값을받습니다 (+ 데이터는 webgrid를 작성합니다). bool 값에 따라 일부 webgrid 열이 표시되어야하고 일부는 숨겨져 있어야합니다. 예를 들어, Name, Surname, Job 열은 webgrid에 있지만 SurnameBool = 0입니다. 즉 Name 및 Job 열만 표시해야합니다. 다른 답변에서 코드를 사용하려고 시도했지만 불행히도 JavaScript의 초보자입니다. @if(ColumnNameBool) 결과를 바탕으로 webgrid 내의 열에 CSS display : none 속성을 추가하는 방법을 알려주십시오.

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") 
          ) 
        ) 
    } 

당신은 널 (null) 소스와 그리드를 만들어야합니다

Answer 1

:

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

소스 그리드는 바인딩 :

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.Bind(item2.ListOfWorkData, rowCount: <total row count>, autoSortAndPage: false); 

가 ColumnNameBool의 가치를 따라 열 당신의 세트 만들기

마지막으로 할당 그리드에 열 목록 :

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