Question

我正在从knockout observable数组中动态加载复选框。但它每行只加载1个复选框。我想加载每行4列的复选框。

<table border = "1">
<tbody data-bind="foreach: dataOne">
    <tr>
        <td ><input style="display: inline-block;white-space: nowrap;overflow: hidden;" type="checkbox" data-bind="checked: name1" /></td>
    </tr>
</tbody>

以下是fiddle

的链接

我尝试使用内联块但没有帮助。我读了一些关于控制组的内容，但不知道如何实现它。

有人请指出我正确的方向。

Answer 1

您可以按如下方式对数据进行分组：

var groups = [];
var groupSize = 4
var group = [];
// create full groups 
for (var index = 0; index < data.length; index++) {
     group.push(data[index])
     if (group.length == groupSize) {
         groups.push(group);
         group = [];
     }
}
// adds the rest
if (group.length) {
     groups.push(group);
}

并使用此视图：

<table border="1">
    <tbody data-bind="foreach: dataOne">
        <tr>
            <td data-bind="foreach: $data">
                <input type="checkbox" data-bind="checked: name1" />
            </td>
        </tr>
    </tbody>
</table>

See fiddle

您还可以创建一个计算器，将数据自动分组为here。

Answer 2

试试这个：

<tbody data-bind="foreach: dataOne">
    <tr>
        <td data-bind="foreach: row">
            <input type="checkbox" data-bind="checked: name1" />
        </td>
    </tr>
</tbody>

并在 js 脚本中：

 var data1 = [{
     row: [{
         name1: "one"
     }, {
         name1: "two"
     }, {
         name1: "three"
     }, {
         name1: "three"
     }]
 }, {
     row: [{
         name1: false
     }, {
         name1: true
     }, {
         name1: true
     }, {
         name1: false
     }]
 }];

Here是实例。

加载固定列中的复选框

2 个答案: