jquery - 在表格中显示和隐藏列菜单

Question

我正在构建一个包含大量列的表格，我希望能够在用户菜单中显示和隐藏这些列。

kendoui网站的好例子在这里

我的问题是所有列的显示/隐藏菜单都是相同的，但它隐藏在每个列的列菜单深处。

我只想在一个地方拥有该菜单，可能在表格工具栏中或在页脚中显示，因此用户无需单击复杂的下拉菜单。

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;
}

这将遍历所有应用模板以生成工具栏的列。

复选框中更改的事件处理程序是：

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

我会尝试通过从网格的 columns 属性中获取可用列来将工具栏示例与multiselect结合起来。