顯示和隱藏列表菜單

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是：

​​

迭代通過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結合使用，方法是從網格的列屬性中獲取可用的列。