0

我有以下格式的视图模型，需要以以下格式呈现数据。您能帮我进行绑定以呈现下表格式吗？

var data = {"MonthlySummaries":
  [
     {"Name": "Jan", "BeginBalance": "1000", "Usage": "100", "EndBalance": "900"}
    ,{"Name": "FEB", "BeginBalance": "900", "Usage": "100", "EndBalance": "800"}
    ,{"Name": "MAR", "BeginBalance": "800", "Usage": "100", "EndBalance": "700"}
  ]
};

表格应该是这样的：

                 JAN     FEB      MAR
BeginBalance     1000    900      800
Usage             100    100      100
EndBalance        900    800      700
4

2 回答 2

2

确实没有内置机制可以在 HTML 中创建基于列的表格，这真的很糟糕。转置数据并不总是一种选择。我最近在这个问题上苦苦挣扎，终于找到了一种解决方法，使用 CSS flexbox 似乎效果很好。

<div class="container">
    <div class="column">
        <div class="cell">Label</div>
        <div class="cell">Begin Balance</div>
        <div class="cell">Usage</div>
        <div class="cell">End Balance</div>
    </div>
    <!-- ko foreach:MonthlySummaries -->
    <div class="column">
        <div class="cell" data-bind="text:Name"></div>
        <div class="cell" data-bind="text:BeginBalance"></div>
        <div class="cell" data-bind="text:Usage"></div>
        <div class="cell" data-bind="text:EndBalance"></div>
    </div>
    <!-- /ko -->
</div>

样式表

.container {
    display:flex;
    flex-direction:row;
}
.column {
    display:flex;
    flex-direction:column;
}
.cell {
    margin:.2em;
}

这是一个使用您的数据的工作jsfiddle 。您可以为单元格类添加边框并使用填充而不是边距，以使其看起来像一个表格。

于 2015-11-23T17:50:10.337 回答
0

您真的应该尝试这些教程，与您的问题相关的一个是我要说的第二个。或者只是深入了解observableArray文档和文档。foreach

最困难的部分是您的源数据的格式不适合在 HTML 中呈现。HTML 中没有“矩阵”的概念，与行相比，构建“列”并不容易。您需要转置数据以使其易于呈现。

有很多很多方法可以转置数据。最简单的那些都接近生成数据的点（例如在您的服务器端控制器中）。如果无法访问该代码，这里有一个使用“哑”转置客户端的小而简单的示例：

var data = {"MonthlySummaries":
[
{"Name": "Jan", "BeginBalance": "1000", "Usage": "100", "EndBalance": "900"}
,{"Name": "FEB", "BeginBalance": "900", "Usage": "100", "EndBalance": "800"}
,{"Name": "MAR", "BeginBalance": "800", "Usage": "100", "EndBalance": "700"}
]
};

var transposedData = {
    Headers: ["Jan", "FEB", "MAR"],
    Rows: [
        { 
            Name: "BeginBalance", 
            Values: [
                data["MonthlySummaries"][0].BeginBalance,
                data["MonthlySummaries"][5].BeginBalance,
                data["MonthlySummaries"][6].BeginBalance
            ]
        },
        { 
            Name: "Usage", 
            Values: [
                data["MonthlySummaries"][0].Usage,
                data["MonthlySummaries"][7].Usage,
                data["MonthlySummaries"][8].Usage
            ]
        },
        { 
            Name: "EndBalance", 
            Values: [
                data["MonthlySummaries"][0].EndBalance,
                data["MonthlySummaries"][9].EndBalance,
                data["MonthlySummaries"][10].EndBalance
            ]
        }
    ]
};

ko.applyBindings(transposedData);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<table>
  <tr>
    <td></td>
    <!-- ko foreach: Headers -->
    <td data-bind="text: $data"></td>
    <!-- /ko -->
  </tr>
  <tbody data-bind="foreach: Rows">
    <tr>
      <td data-bind="text: Name"></td>
      <!-- ko foreach: Values -->
        <td data-bind="text: $data"></td>
      <!-- /ko -->
    </tr>
  </tbody>
</table>

于 2015-05-05T21:00:00.163 回答