挖空 + 引导:在数据表中创建可折叠的详细信息行

Question

场景：使用 Knockout 和 Bootstrap 创建数据表的应用程序。每行数据将对应于表中的两行：摘要行和详细信息行。详细信息行应隐藏，直到用户单击或点击摘要行。当用户单击或点击摘要行时，在其正下方显示详细信息行。（可选）如果用户单击或点击摘要行并且详细信息行已显示，请折叠详细信息行。实现此目的，而无需为表中的每一行创建可观察量。

Answer 1

使用 Bootstrap 的折叠功能来实现这一点，而无需创建可观察量。根据数据中的唯一标识符为详细信息行指定id属性。然后为摘要行指定一个data-toggle="collapse"属性和一个指向详细信息行的挖空创建的data-target属性。

下面的代码显示了标记的模式。

<table class="table table-hover">
    <tbody data-bind="foreach: Enumeration">
        <tr data-toggle="collapse" data-bind="attr: { 'data-target': '#details'+ID }">
            <td>Summarize</td>
            <td>Some</td>
            <td>Info</td>
            <td>Here</td>
        </tr>
        <tr class="collapse" data-bind="attr: { id: 'details'+ID }">
            <td colspan="4"><span data-bind="text: Details"></span></td>
        </tr>
    </tbody>
</table>