Knockout.js 将行显示为带删除标记的列

我有以下格式的视图模型，需要以以下格式渲染数据。你能帮我把下面的表格格式进行绑定吗

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

你真的应该试一下，我认为与你的问题有关的是。或者直接潜入水中

最困难的部分是源数据的格式不适合用HTML表示。HTML中没有“矩阵”的概念，而且与行相反，构建“列”并不容易。你需要转换你的数据，使它更容易呈现

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

var数据={“月度总结”：
[
{“Name”：“Jan”，“BeginBalance”：“1000”，“用法”：“100”，“EndBalance”：“900”}
，{“名称”：“二月”，“开始平衡”：“900”，“用法”：“100”，“结束平衡”：“800”}
，{“名称”：“三月”，“开始平衡”：“800”，“用法”：“100”，“结束平衡”：“700”}
]
};
var transposedData={
标题：[“一月”、“二月”、“三月”]，
行：[
{ 
名称：“BeginBalance”，
价值观：[
数据[“月总结”][0]。开始平衡，
数据[“月总结”][5]。开始平衡，
数据[“月总结”][6]。开始平衡
]
},
{ 
名称：“用法”，
价值观：[
数据[“MonthlySummaries”][0]。用法，
数据[“每月摘要”][7]。用法，
数据[“每月摘要”][8]。用法
]
},
{ 
名称：“EndBalance”，
价值观：[
数据[“月总结”][0]。期末余额，
数据[“月度总结”][9]。期末余额，
数据[“月度总结”][10]。期末余额
]
}
]
};
ko.应用绑定（transposedData）
的确，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>

这是一个使用你的数据的工作。您可以向cell类添加边框，并使用填充代替边距，使其看起来像一个表

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