加載固定列中的複選框

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

我使用inline-block的，但犯規幫助試過。我讀了一些關於控制組的內容，但不知道如何實現它。

有人請指點我正確的方向。

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的活例子。