Показать и скрыть меню столбцов в таблице

Question

Я строю таблицу с большим количеством столбцов, которые я хочу показать и скрыть из меню пользователя.

хороший пример с kendoui сайта here

Моя проблема заключается в том, что меню показать/скрыть одно и то же для всех столбцов, но оно зарыто глубоко в меню колонки каждого отдельного столбца.

Я хочу иметь это меню только в одном месте, возможно, в панели инструментов стола или в нижнем колонтитуле, поэтому пользователю не нужно щелкнуть через сложные выпадающие списки.

Answer 1

Это будет немного сложнее и потребует некоторого программирования.

Решение основано на:

1. Определить в панели инструментов флажок для каждого из столбцов, для этого я буду использовать шаблон.
2. Для каждого из флажков мы определяем обработчик, который будет отображать/скрывать столбец в зависимости от текущего состояния.

определение шаблона

<!-- language: lang-html --> 
<script type="text/kendoui" id="template"> 
    <div> 
     <label for='field-#= item.field #'> 
      #= item.title ? item.title : item.field # 
      <input type='checkbox' id='field-#= item.field #' checked onclick='hideColumn("#=idx#")'> 
     </label> 
    </div> 
</script> 

Теперь, в определении сетки мы определим, что панель инструментов является результатом выполнения функции:

<!-- language: lang-json --> 
toolbar : toolbarGenerator, 

и tootbarGeneration является:

function toolbarGenerator() { 
    var template = kendo.template($("#template").html()); 
    var toolbar = ""; 
    var grid = $("#grid").data("kendoGrid"); 
    $.each(grid.columns, function (idx, item) { 
     toolbar += template({ idx : idx, item : item }); 
    }); 
    return toolbar; 
} 

Это итерация h все столбцы, применяющие шаблон для создания панели инструментов.

обработчик событий для изменений в чекбокс:

function hideColumn(col) { 
    var grid = $("#grid").data("kendoGrid"); 
    if (grid.columns[col].hidden) { 
     grid.showColumn(+col); 
    } else { 
     grid.hideColumn(+col); 
    } 
} 

И JSFiddle здесь http://jsfiddle.net/OnaBai/GerEN/1/

Answer 2

Я попытался объединить пример панели инструментов с multiselect, получив доступные столбцы из свойства столбцов сетки.