如何创建嵌套行使用knockout js在具有相同列的表中折叠

Question

我想动态地使用knockout js创建如下图所示的表格，其中如果有子节点则崩溃

Answer 1

我建议使用TreeGrid jQuery插件。它使用起来相当简单。我们将数据放在HTML table中，然后为每一行分配一个treegrid id和一个treegrid父id。这是网站上的basic example ...

<script type="text/javascript">
    // Initialize the treegrid when the document is loaded
    $(function() {
        $('.tree').treegrid();
    });
</script>

<table class="tree">
    <tr class="treegrid-1">
        <td>Root node</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-2 treegrid-parent-1">
        <td>Node 1-1</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-3 treegrid-parent-1">
        <td>Node 1-2</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-4 treegrid-parent-3">
        <td>Node 1-2-1</td><td>Additional info</td>
    </tr>
</table>

我们需要做的就是模仿你的例子就是取代＆＃34;硬编码＆＃34;具有敲除绑定的数据。我构建了一个包含帐户对象数组的简单视图模型。我没有包含所有数据或列，但我已经包含足够的内容以帮助您开始正确的方向。

＆＃13;

＆＃13;

$(function() {
  var viewModel = {};

  viewModel.accounts = [
    {name: 'Travel', type: 'Expenses', glCode: '50000', treegrid: '1', treegridParent: null},
    {name: 'Airfare', type: 'Expenses', glCode: '50010', treegrid: '2', treegridParent: '1'},
    {name: 'Lodging', type: 'Expenses', glCode: '50011', treegrid: '3', treegridParent: '1'},
    {name: 'Meals & Entertainment', type: 'Expenses', glCode: '50030', treegrid: '4', treegridParent: '1'},
    {name: 'Account Receiveable', type: 'Income', glCode: '40910', treegrid: '5', treegridParent: null},
    {name: 'Sales of Items', type: 'Income', glCode: '40819', treegrid: '6', treegridParent: '5'},
    {name: 'Sales on Web', type: 'Income', glCode: '40111', treegrid: '7', treegridParent: '5'},
    {name: 'Website #1', type: 'Income', glCode: '40661', treegrid: '8', treegridParent: '7'},
    {name: 'Website #2', type: 'Income', glCode: '40151', treegrid: '9', treegridParent: '7'},
  ];

  viewModel.getTreegridClass = function(item) {
    var className = '';
    if (item.treegrid)
      className += 'treegrid-' + item.treegrid;
    if (item.treegridParent)
      className += ' treegrid-parent-' + item.treegridParent;
    return className;
  }

  ko.applyBindings(viewModel);
  $('.tree').treegrid();
});

＆＃13;

<link href="http://maxazan.github.io/jquery-treegrid/css/jquery.treegrid.css" rel="stylesheet" />
<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.2.0/knockout-min.js"></script>
<script src="http://maxazan.github.io/jquery-treegrid/js/jquery.treegrid.js"></script>

<table class="tree">
  <thead>
    <tr>
      <th>Account Name</th><th>Account Type</th><th>GL Code</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: accounts">
    <tr data-bind="attr: {class: $root.getTreegridClass($data)}">
      <td data-bind="text: $data.name"></td>
      <td data-bind="text: $data.type"></td>
      <td data-bind="text: $data.glCode"></td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;