根据 table 中的列动态创建复选框

Question

我希望动态创建复选框，选中这些复选框后将 table 中的 show/hide 列。我知道您可以在每个复选框中进行硬编码，但是如果有大量列，是否有办法动态构建它们？我只是使用下面的示例数据。这是我目前所拥有的：

复选框：

<div id="ProfColList">
    <ul style="float:right;text-align:right; list-style-type:none;">
        <li>Label  <input type="checkbox" name="C1" id="C1" value="true" /></li>
        <li>2014  <input type="checkbox" name="C2" id="C2" value="true" /></li>
        <li>2013  <input type="checkbox" name="C3" id="C3" value="true" /></li>
        <li>2012  <input type="checkbox" name="C4" id="C4" value="true" /></li>
        <li>2011  <input type="checkbox" name="C5" id="C5" value="true" /></li>
    </ul>
</div>

Jquery 至 show/hide 列：

$('#C1').change(function () {
        var grid = $("#ProfGrid").data("kendoGrid");
        if (this.checked) {
            grid.showColumn("C1");
        }
        else {
            grid.hideColumn("C1");
        }
    });
    $('#C2').change(function () {
        var grid = $("#ProfGrid").data("kendoGrid");
        if (this.checked) {
            grid.showColumn("C2");
        }
        else {
            grid.hideColumn("C2");
        }
    });
    $('#C3').change(function () {
        var grid = $("#ProfGrid").data("kendoGrid");
        if (this.checked) {
            grid.showColumn("C3");
        }
        else {
            grid.hideColumn("C3");
        }
    });
    $('#C4').change(function () {
        var grid = $("#ProfGrid").data("kendoGrid");
        if (this.checked) {
            grid.showColumn("C4");
        }
        else {
            grid.hideColumn("C4");
        }
    });
    $('#C5').change(function () {
        var grid = $("#ProfGrid").data("kendoGrid");
        if (this.checked) {
            grid.showColumn("C5");
        }
        else {
            grid.hideColumn("C5");
        }
    });

这是构建 table 的代码。我正在使用 Kendo UI，所以如果它有执行此过程的功能，请告诉我：

    var gridColumns = [
        { "field": "C1", "title": "Label", "width": "15%" },
        { "field": "C2", "title": "2014", "width": "15%" },
        { "field": "C3", "title": "2013", "width": "15%" },
        { "field": "C4", "title": "2012", "width": "15%" },
        { "field": "C5", "title": "2011", "width": "15%" }
    ];


    $("#ProfGrid").kendoGrid({
        dataSource: {
            data: GridData.Data,
            pageSize: 20
        },
        height: ProfGridHeight,
        scrollable: { virtual: true },
        groupable: true,
        sortable: true,
        reorderable: true,
        resizable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: gridColumns

    });

谢谢。基本上，如果 table 中恰好有 20 列，有没有一种方法可以为每一列生成一个复选框而无需对其进行硬编码？

Answer 1

假设复选框名称与列名称匹配，您可以尝试：

$("#ProfColList input[type=checkbox]").change(function() {
    var grid = $("#ProfGrid").data("kendoGrid");
    var columnName = this.name;

    if (this.checked) {
        grid.showColumn(columnName);
    }
    else {
        grid.hideColumn(columnName);
    }
});

要生成列，请在 gridColumns 数组初始化后使用它。（请注意，对于复选框，您不使用 "value" 属性）：

for (var i = 0; i < gridColumns.length; i++) {
    $("#ProfColList ul").append("<li>" + gridColumns[i].title + " <input type='checkbox' name='" + gridColumns[i].field + "' checked /></li>");
}

根据 table 中的列动态创建复选框

Dynamically creating checkboxes based on the columns in a table

javascript

jquery

tabular

kendo-grid