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

Question

我正在寻找动态创建复选框，选中时将显示/隐藏表中的列。我知道你可以在每个复选框中使用硬编码，但是如果有大量列，是否有动态构建它们的方法？我只是使用下面的示例数据。以下是我迄今为止：

复选框：

<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列，是否有办法为每列生成一个复选框而无需对其进行硬编码？

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数组初始化。 （请注意，复选框您不使用“值”属性）：

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