/ / knockout multiple arrays wiąże się z table with rowspan - javascript, html, knockout.js, knockout-2.0

nokaut wiele tablic wiąże się z table z rowspan - javascript, html, knockout.js, nokaut-2.0

Proszę odnieść się do tego html, używam knockoutjs do wygenerowania raportu.
Zobacz ** (1) i ** (2) lokalizacje
Jeśli usunę ** (1) i zatrzymam ** (2) lokalizację tr działa to dobrze, ale moje formatowanie raportu nie jest zgodne z oczekiwaniami.
Jeśli usunę ** (2) i zatrzymam ** (1), otrzymuję komunikat o błędzie "Nie można znaleźć tagu komentarza zamykającego do dopasowania: ko foreach: ProvinceArrayDTO" ale potrzebuję drugiej opcji i wypełnienia tablic.

Czy jest jakiś sposób, aby to osiągnąć?

W JSFiddle Dobry format danych statystycznych

Bad Format Dynamic z JSON

<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>CEB Province</th>
<th>CEB Area Office</th>
<th>Primary Substation</th>
<th>Meter</th>
<th>Time Of Use</th>
<th>Energy Initial Reading</th>
<th>Energy Final Reading</th>
<th>Total Energy in Time interval</th>
<th>Total Energy</th>
<th>Coincident Peak</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: ProvinceArrayDTO -->
<tr>
<td data-bind="text: ProvinceName, attr: {rowspan: RowCount }"></td>
<!-- ko foreach: AreaArrayDTO -->
<td data-bind="text: AreaName, attr: {rowspan: RowCount }"></td>
<!-- ko foreach: SubStationArrayDTO -->
<td data-bind="text: SubStaionName, attr: {rowspan: RowCount }"></td>
<!-- ko foreach: MetersArrayDTO -->
<td data-bind="text: MeterName, attr: {rowspan: RowCount }"></td>
<!-- ko foreach: MetersReadingArrayDTO -->
<td class="auto-style5">Day</td>
<td class="auto-style7">LastMnValue</td>
<td class="auto-style2" data-bind="text: DayValue"></td>
<td class="auto-style2">difference</td>


<td class="auto-style4" rowspan="3">total</td>
<td rowspan="3" data-bind="text: CoincidentPeak"></td>
<td rowspan="3" data-bind="text: Remarks"></td>

</tr>**(1)

<td class="auto-style5">Peek</td>
<td class="auto-style7">9804328</td>
<td class="auto-style2">9523478</td>
<td class="auto-style2">280,850</td>





<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</tr>**(2)
<!-- /ko -->


</tbody>
</table>

Odpowiedzi:

0 dla odpowiedzi № 1

Dzięki za opinie!

Wygenerowałem całkowity układ tabeli za pośrednictwem javascript i użyłem wiązania html z knockout.

W Knockout

self.DetailedReport = ko.observable();

function GenerateHtmlTableFronJson(){
//JSON parse here ang generate HTML
return ("<table> ..... </table>");
}

self.DetailedReport (GenerateHtmlTableFronJson());

W HTML

<div data-bind="html: DetailedReport"></div>