0

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

kendoui网站的好例子在这里

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

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

4

2 回答 2

2

这会有点棘手,需要一些编程。

该解决方案基于:

  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/

于 2013-10-11T21:19:21.693 回答
1

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

于 2013-10-11T18:08:14.367 回答