collection 使用淘汰赛的动态多表

Question

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

中

接下来在 collection 1 它可以包含 3 条记录的列表，每条记录可以包含 3 列 - 这必须显示在 table 2

这个collection是一个循环运行，我必须根据collection项

重复一遍

下面是敲代码

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>

问题是我无法将其显示为 table 行和列。不确定缺少什么以及如何让代码在行和列中显示。任何人都可以帮忙吗？请提前致谢

Answer 1

在您的代码中，ColumnList 是一个数组数组。所以，text: $data 将显示 [object Object],[object Object]。根据您的问题，您想在多个 table 中显示它们，但您正在创建一个 table。因此，将 foreach: ColumnList 移到 table 部分之外。

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.push(cList, aList)

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<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" data-bind="foreach: ColumnList">
      <span data-bind="text: 'table '+$index()"></span>
        <table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
          <tbody data-bind="foreach: $data">
            <tr>
              <td><span data-bind='text: Term'></span></td>
              <td><span data-bind='text: Mhstdat'></span></td>
              <td><span data-bind='text: Mhendat'></span></td>
            </tr>
          </tbody>
        </table>
        <br> <br>
      </div>
    </div>
  </div>
</div>

单击 "Run code snippet" 进行测试。这里还有一个fiddle。

更新:

如果您事先不确定列名并希望从对象中获取它们，那么您可以遍历每个对象的 keys，然后将该键的 value 绑定到td。像这样：

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 columnList = [];
  var cList = [];

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

  // Has five columns
  var aList = [{
      Term: ko.observable("eyes"),
      Diagnosis:ko.observable("surgery"),
      Type:ko.observable("Major"),
      Mhstdat: ko.observable("19NOV2018"),
      Mhendat: ko.observable("20NOV2018"),
    },
    {
      Term: ko.observable("hands"),
      Diagnosis:ko.observable("transplant"),
      Type:ko.observable("Critical"),
      Mhstdat: ko.observable("21NOV2018"),
      Mhendat: ko.observable("22NOV2018"),
    }
  ];

  columnList.push(cList, aList)

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<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" data-bind="foreach: ColumnList">
        <span data-bind="text: 'table '+$index()"></span>
        <table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
          <tbody data-bind="foreach: $data">
            <tr data-bind="foreach: { data: Object.keys($data), as: 'key' }">
              <td><span data-bind='text: $parent[key]'></span></td>
            </tr>
          </tbody>
        </table>
        <br> <br>
      </div>
    </div>
  </div>
</div>

collection 使用淘汰赛的动态多表

collection with dynamic multiple tables using knockout

knockout.js