Knockout + Bootstrap: Сделать сборные строки подробностей в таблице данных

Question

Сценарий: приложение, использующее Knockout и Bootstrap для создания таблицы данных. Каждая строка данных будет соответствовать двум строкам в таблице: сводная строка и подробная строка. Строка детали должна быть скрыта до тех пор, пока пользователь не нажмет или не закроет итоговую строку. Когда пользователь нажимает или нажимает на итоговую строку, покажите строку с деталями прямо под ней. При желании, если пользователь нажимает или нажимает на итоговую строку, а строка подробностей уже показана, сверните строку с деталями. Внесите это, не создавая наблюдаемых для каждой строки в таблице.

Answer 1

Используйте Bootstrap's collapse functionality, чтобы реализовать это, не создавая наблюдаемого. Дайте строке подробных данных атрибут id на основе уникального идентификатора из данных. Затем дайте суммарную строку a 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>