Показать или скрыть столбец MVC WebGrid с JQuery

У меня есть веб-сайт MVC со столбцами, которые я хочу скрыть или показать динамически на основе функции javascript после рендеринга сетки.Показать или скрыть столбец MVC WebGrid с JQuery

Итак, после отображения WebGrid я хочу вызвать функцию javascript и передать в ColumnName для отображения или скрытия. Это возможно?

Спасибо,

Это как моя сетка установки:

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

     gridColumns.Add(grid.Column("Id", "Test ID")); 
     gridColumns.Add(grid.Column("Description", "Test Description")); 
     gridColumns.Add(grid.Column("ProjectDate", "Test Date", format: @<text> <span>@item.ProjectDate.ToString("d/M/yyyy")</span></text>)); 

    } 
<div id="divWebGrid" class="row"> 
       @grid.GetHtml(
        fillEmptyRows: false, 
        tableStyle: "webgrid", 
        alternatingRowStyle: "webgrid-alternating-row", 
        headerStyle: "webgrid-header", 
        footerStyle: "webgrid-footer", 
        selectedRowStyle: "webgrid-selected-row", 
        rowStyle: "webgrid-row-style", 
        mode: WebGridPagerModes.All, 
        columns: grid.Columns(gridColumns.ToArray()) 
        ) 
      </div>

И это будет мой код JavaScript:

function ToggleColumn(columnName) 
    { 
     //Some Code to Show or Hide the Column in the WebGrid based on the columnName parameter. 
    }

Возможно ли это?

Вот тонированный код моей сетки:

<table class="webgrid" data-swhgajax="true" data-swhgcontainer="divWebGrid" data-swhgcallback=""> 
    <thead> 
     <tr class="webgrid-header"> 
      <th scope="col"> 
<a data-swhglnk="true" href="/Home/Index?gridItemsort=Id&amp;gridItemsortdir=ASC">Test ID</a>   </th> 
      <th scope="col"> 
<a data-swhglnk="true" href="/Home/Index?gridItemsort=Description&amp;gridItemsortdir=ASC">Test Description</a>   </th> 
      <th scope="col"> 
<a data-swhglnk="true" href="/Home/Index?gridItemsort=ProjectDate&amp;gridItemsortdir=ASC">Test Date</a>   </th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr class="webgrid-footer"> 
      <td colspan="3">1 <a data-swhglnk="true" href="/Home/Index?gridItempage=2">2</a> <a data-swhglnk="true" href="/Home/Index?gridItempage=3">3</a> <a data-swhglnk="true" href="/Home/Index?gridItempage=2">&gt;</a> <a data-swhglnk="true" href="/Home/Index?gridItempage=3">&gt;&gt;</a></td> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr class="webgrid-row-style"> 
      <td>1</td> 
      <td>test 1</td> 
      <td> <span>22/7/2016</span></td> 
     </tr> 
     <tr class="webgrid-alternating-row"> 
      <td>2</td> 
      <td>test 2</td> 
      <td> <span>22/7/2016</span></td> 
     </tr> 
     <tr class="webgrid-row-style"> 
      <td>3</td> 
      <td>test 3</td> 
      <td> <span>22/7/2016</span></td> 
     </tr> 
    </tbody> 
    </table>

источник

2016-07-22 Ben

** Каждый флажок имеет идентификатор, который совпадает с столбцом в сетке. **. Не сохраняйте повторяющиеся идентификаторы. Существуют и другие способы связывания ваших checkbox'es с столбцами сетки, такими как атрибуты данных html 5. – Shyju

Идентификатор элементов управления не совпадает. Извините за недопонимание. Флажок привязан к объекту из модели и имеет атрибут Id, который совпадает с идентификатором атрибута для столбца в WebGrid. – Ben

В принципе, я хочу, чтобы иметь возможность передавать Id в функцию и иметь функцию скрыть или показать столбец webgrid, который имеет этот идентификатор в качестве имени столбца. – Ben

я столкнулся с подобной проблемой в моей сетке. И я решил это с помощью класса css, добавленного в столбцы WebGrid.

Во-первых, я добавляю класс ко всем столбцам, которые необходимо скрыть.

gridColumns.Add(grid.Column("ID", "Test ID", null, "hidden-column"));

Добавлено скрыть свойство на классе «скрытой колонке»

<style> 
    .hidden-column { 
     display:none; 
    } 
</style>

Он скроет все столбцы (TD-элементы), имеющие этот класс набор (в данном случае, это будет скрыть столбец «ID»).

Чтобы скрыть заголовки сетки, я позвонил IIFE функция на документе готова.

 (function() { 
      $('#divWebGrid tbody tr:first').find('td.hidden-column').each(function (i, td) { 
       var indexOfHiddenColumn = $(td).index(); 
       $('#divWebGrid thead th').eq(indexOfHiddenColumn).addClass('hidden-column'); 
      }); 
     }());

Надеюсь, что это сообщение поможет вам решить вашу проблему.

источник

2016-07-23 08:24:52

Показать или скрыть столбец MVC WebGrid с JQuery

ответ

Смежные вопросы