Question

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

来自kendoui网站here的好例子

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

我希望只在一个地方放置该菜单，可能在表格工具栏中或在页脚中显示，这样用户就无需点击复杂的下拉列表。

Answer 1

这将有点棘手，需要一些编程。

解决方案基于：

在工具栏中为每个列定义一个复选框，为此我将使用模板。
对于每个复选框，我们定义一个处理程序，根据当前状态显示/隐藏列。

模板定义

<!-- 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

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

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

2 个答案: