Knockout.js 使用knockout的动态多表集合

我有一个集合，需要一个一个地显示为表。 例如，在集合0中，它可以包含2条记录的列表，每条记录可以包含3列。-这必须显示在表1中

接下来在集合1中，它可以包含一个包含3条记录的列表，每条记录可以包含3列-这必须显示在表2中

此集合在循环中运行，我必须根据集合项重复它

下面是敲门代码

function TestPageModel() {

    var self = this;
    self.MHxReport = ko.observableArray([]);

    function addMHxReport(columnList ) {
        return {
            ColumnList: ko.observableArray(columnList)            
        }
    }

    function add(term, mhstdat,mhendat) {
        return {            
            Term: ko.observable(term),
            Mhstdat: ko.observable(mhstdat),            
            Mhendat: ko.observable(mhendat)
        }
    }

    var cList = [];
    var columnList = [];
    var aList = [];

    cList.push(new add("cough", "13MAR2018", "10SEP2018"));
    cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));

    aList.push(new add("blood", "13MAR2018", "10SEP2018"));
    aList.push(new add("ear", "13MAR2018", "10SEP2018"));
    aList.push(new add("head", "13MAR2018", "10SEP2018"));

    columnList[0] = cList;
    columnList[1] = aList;

    var newobj = new addMHxReport(columnList )
    self.MHxReport.push(newobj);
}

$(document).ready(function () {
    var testPageModel = new TestPageModel();    
    ko.applyBindings(TestPageModel);
});

下面是html代码

<div class="row" data-bind="foreach: MHxReport">
        <div style="margin:12px 0 12px 0;">
            <div class="col-sm-12 col-md-12 col-lg-12">             
                <div class="table-responsive dsg-btm-shadow" style="border: 1px solid #ccc;margin: 0 0 15px 0px;" >
                    <table class="dsg-setup dsg-aligntop" border="0" >
                        <tbody data-bind="foreach: ColumnList" >
                            <tr>
                                <td><span data-bind='text: $data'></span></td>
                            </tr>
                        </tbody>
                    </table>

                </div>           
            </div>
        </div>
    </div>  

问题是我无法将其显示为一个包含行和列的表。不确定 缺少什么以及如何使代码以行和列的形式显示。

---

有人能帮忙吗。请提前感谢

在您的代码中，

列列表

是一个数组数组。因此，

text:$data

将显示

[object object]，[object object]

。根据您的问题，您希望在多个表中显示它们，但您正在创建一个表。因此，将

foreach:ColumnList

移动到

表

部分之外

函数TestPageModel（）{
var self=这个；
self.MHxReport=ko.observearray（[]）；
函数addMHxReport（列列表）{
返回{
专栏列表：ko.observearray（专栏列表）
}
}
功能添加（术语、mhstdat、mhendat）{
返回{
术语：可观察到的ko（术语），
Mhstdat:ko.可观测（Mhstdat），
Mhendat:ko.可观测（Mhendat）
}
}
var-cList=[]；
var columnList=[]；
var=[]；
客户推送（新增“咳嗽”、“2018年3月13日”、“2018年9月10日”）；
客户推送（新增（“ashtma”、“2018年3月13日”、“2018年11月6日”）；
列表推送（新增（“血液”、“2018年3月13日”、“2018年9月10日”）；
列表推送（新增（“ear”、“2018年3月13日”、“2018年9月10日”）；
列表推送（新增（“head”、“2018年3月13日”、“2018年9月10日”）；
columnList.push（cList，lister）
var newobj=newaddmhxreport（列列表）
self.MHxReport.push（newobj）；
}
$（文档）.ready（函数（）{
var testPageModel=新的testPageModel（）；
应用绑定（TestPageModel）；
})

对于示例，我给出了函数“add”，以便于理解。然而，在实际场景中，假设第一个表只能包含2列，第二个表可以包含3列，第三个表可以包含5列。因此，使用循环，我需要始终显示表中列的数据。请建议和帮助。谢谢你advance@jaiganesh这就是为什么你应该在提问时创建一个。因为从问题来看，你只有3列。无论如何，我已经更新了答案以动态处理不同数量的列。此更新对于获得所需的功能非常有用。对于理解的动摇，我一直保持着它的简单。然而，我还需要两样东西表应该显示表集合中的标题，并且应该能够在表中执行排序功能。请建议和帮助。谢谢你advance@jaiganesh表格标题应该很简单。请仔细阅读更新后的答案并理解它。我已经演示了如何循环键。现在，您只需循环键并将它们绑定到

th

s。真的吗？我已经回答了您的问题以及您在评论中添加的附加功能。对不起，我不能再做那两件事了。stackoverflow上的人自愿抽出时间来帮助你，当你陷入困境时。请尊重这一点。这是问答网站。不是免费的代码编写服务。为了调试html部分，请对“$data”使用console.log，我只能看到数组。然而，要理解“Object.Keys”中发生的事情以及如何使用它们来获取列名，我并不理解。如果有更好的调试和理解流程的方法，请提供建议和帮助。