knockout中foreach双重嵌套

lysunnyrain

于 2017-03-30 17:26:21 发布

阅读量4.4k

点赞数 1

分类专栏： html JavaScript 文章标签： knockout foreach嵌套

本文链接：https://blog.csdn.net/lysunnyrain/article/details/68490232

版权

html 同时被 2 个专栏收录

1 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

本文介绍了一种使用Knockout.js实现动态表格数据加载的方法。该方法可以处理不确定数量的表头和行数据，并通过初始化item数组的方式将数据插入到表格中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发过程中，一个需求是后台传输table数据，分为header和data两部分，header代表表头，data是json对象，代表每个字段的具体值。table是个json数组。

问题是：header代表的表头列数不定，data代表的行数也不定，要实现向表格添加数据。

解决方案：

html代码：

<table>
     <thead> 
            <tr data-bind="foreach:Header">
             	<th data-bind="text:header"></th>
           </tr>
    </thead>
    <tbody data-bind="foreach:{data:Order, as:'order'}">
         <tr data-bind="foreach:{data:order.items,as:'item'}">
              <td data-bind="text:item.it"></td>
         </tr>
    </tbody>
</table>

js代码：

var viewModel={
  Header:ko.observableArray([]),
  Order:ko.observableArray([])
};
ko.applyBindings(viewModel);
//Header正常push就好
$.each(Order, function(k,v){
    var value =v;
    var items=[];
    $.each(value, function(key, val){
        items.push({
             it:val
        });
     });
     viewModel.Order.push({
        item:items,
        //textColor等其他参数
     });
});

主要思想就是，讲item初始化为数组，然后再放入Order中，而不是一开始就在Order中。