Question

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

Answer 1

使用Bootstrap的collapse functionality实现此目的，而不创建可观察对象。根据数据中的唯一标识符为详细信息行提供id属性。然后为摘要行指定一个data-toggle="collapse"属性和一个指向详细信息行的Knockout创建的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>

Knockout + Bootstrap：在数据表中创建可折叠的详细信息行

1 个答案: