基于表中的列动态创建复选框

Dynamically creating checkboxes based on the columns in a table

本文关键字：创建 复选框 动态 于表中      更新时间：2023-09-26

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

复选框：

<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 显示/隐藏列：

$('#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");
        }
    });

下面是用于生成表的代码。我正在使用剑道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
    });

谢谢。基本上，如果一个表中恰好有 20 列，有没有办法为每一列生成一个复选框而不必对其进行硬编码？

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

$("#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 数组初始化后使用它。（请注意，对于复选框，您不使用"值"属性）：

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