0

需要帮助根据 observableArray 长度创建表。

observableArray - Pages - 是一个带有数字的数组。现在我想创建一个表格行，每行有 10 个数字。对于第 11 个元素，我必须从新行插入。所以必须在 10 个元素之后创建一个新行。

所以我的桌子应该是这样的：

1   2   3   4   5   6   7   8   9   10

11  12  13  14  15  16  17  18  19  20

21  22  23

视图模型代码是：

function Pagination() {

    var self = this;
    self.TotalPageCount = ko.observable("23");
    self.Pages = ko.observableArray(['1','2','3','4','5','6','7','8','9','10',
                    '11','12','13','14','15','16','17','18','19','20',
                                    '21','22','23' ]);

};

视图代码：

<table id="pagerTable">
    <tbody data-bind="foreach: Pages.length / 10"> 
        <tr>  <!-- have to create table row for every 10 elements  -->
           <td>
                <a data-bind="attr:{ 'id': $index }, text: $data " ></a> 
           </td>
        </tr>
    </tbody>
</table>

任何人都可以帮我解决问题吗？JSfiddle：http: //jsfiddle.net/ondacinaynakalkur/w928F/1/

小提琴链接只打印整个数组内容。我希望数组内容显示在表格中，每行有 10 个元素：

1   2   3   4   5   6   7   8   9   10

11  12  13  14  15  16  17  18  19  20

21  22  23

提前致谢。

4

1 回答 1

1

看看FIDDLE

我目前为您提供的解决方案是将其分解为 Chunk of Arrays 并显示它。

首先将其分解成块，查看split-array-into-chunks。谢谢@dentaku

//Convert your table to Chunk of Arrays
function TableModel(pages) {

    var longArray = pages;
    var smallerArrays = []; // will contain the sub-arrays of 10 elements each
    var arraySize = 10;
    for (var i = 0; i < Math.ceil(longArray.length / arraySize); i++) {
        smallerArrays.push(longArray.slice(i * arraySize, i * arraySize + arraySize));
    }
    return smallerArrays;
}

然后让我们将您的 HTML 代码更改为以下内容：-

<table id="pagerTable" data-bind="foreach: Tables">
    <tbody>
        <tr>
            <!-- have to create table row for every 10 elements -->
            <td> <a data-bind="attr:{ 'id': $index }, text: $data "></a> 
            </td>
        </tr>
    </tbody>
</table>

您的视图模型看起来像：-

function AppViewModel() {
    this.TotalPageCount = ko.observable("23");
    this.Pages = ko.observableArray(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
        '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
        '21', '22', '23']);
    this.Tables = TableModel(this.Pages());
    console.log(this);
}

您可以在此处找到工作版本

于 2013-09-13T06:04:19.723 回答