Wie verschachtelte Zeilen Zusammenbruch in der Tabelle erstellen mit derselben Spalte js

Question

Ich mag mit Knockout-Tabelle erstellen, wie unten Bild dynamisch js, in dem mit Knockout, wenn Kindknoten ist dann

Answer 1

kollabiert Ich empfehle, mit TreeGrid jQuery-Plugin . Es ist ziemlich einfach zu benutzen. Wir stellen unsere Daten in ein HTML table und weisen dann jeder Zeile eine Treegrid-ID und optional eine Treegrid-Parent-ID zu. Hier ist ein basic example von der Website ...

<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> 

Alles, was wir tun müssen, um Ihr Beispiel zu imitieren ist „hart codiert“ Daten mit Knockout-Bindungen zu ersetzen. Ich habe ein einfaches View-Modell erstellt, das ein Array von Account-Objekten enthält. Ich habe nicht alle Daten oder Spalten angegeben, aber ich habe genug hinzugefügt, um Sie in die richtige Richtung zu bringen.

$(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(); 
 
});

<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>