Создайте труп с обрушенными (родительскими/дочерними) строками

Question

У меня есть таблица tbody с родительско-дочерней структурой, поддерживаемая модельми с нокаутом. Структура parent-child выглядит так:

<tbody> 
    <!-- ko foreach: modelyears --> 
     <tr> 
      <td > 
       <span data-bind="text: modelyear_name"></span> 
      </td> 
      <td> 
      </td> 
     </tr> 
     <!-- ko foreach: projects --> 
      <tr> 
       <td > 
       </td> 
       <td> 
        <span data-bind="text: project_name"></span> 
       </td> 
      </tr> 
     <!-- /ko --> 
    <!-- /ko --> 
</tbody> 

Как я могу сделать родительскую строку расширяемой/сжимаемой? Я хочу нажать на родителя tr, чтобы показать/скрыть дочерние строки (проекты).

Answer 1

Я решил это самостоятельно с помощью функции «обрушения» бутстрапа.

«Цель данных» является связующим звеном с вычисленным значением нокаута, которое я получаю от идентификатора ITEM текущего родителя.

Вот код в HTML (я использовал DIV для представления родитель-потомок и атрибут гиперссылки для переключения Чайлдс):

 '<!-- ko foreach: modelyears --> 
      <div> 
       <table> 
        <tr> 
         <td > 
       <a href="#" data-toggle="collapse" data-bind="attr: {'id': child_id, 'data-target' : data_target }"> 
    <span data-bind="text: modelyear_name" ></span> 
       </a> 
         </td> 
        </tr> 
       </table> 

      </div> 

      <!-- ko foreach: projects --> 
       <div data-bind="css: project_classname"> 
        <table> 
         <tr>  
          <td></td> 
          <td colspan="2"> 
           <div> 
     <span data-bind="text: project_name"></span> 
           </div> 
          </td> 
         </tr> 
        </table> 
       </div> 
      <!-- /ko --> 
     <!-- /ko --> 
    </div>' 

Нокаут переменные «child_id» и «данные-мишени» и " project_classname», где вычисляется в модели нокаута:

// compute "project_classname" 
    this.project_classname = ko.computed(function() { 
     return "collapse row" + self.project_modelyear_itemid(); 
    }, this); 

    // compute "child_id" 
    this.child_id = ko.computed(function() 
    { 
     return "row" + self.modelyear_itemid(); 
    }, this); 

    // compute "data_target" 
    this.data_target = ko.computed(function() 
    { 
    return ".row" + self.modelyear_itemid(); 
    }, this); 

Надеется, что это помогает кто-то там ;-)

Answer 2

В качестве ужина, отмеченного кругом, лучшим решением является использование некоторого эффекта пользовательского интерфейса, который позволяет вам расширить его более модным способом. Тем не менее, простое решение состоит в поддержании логическое значение, указывающее на то, расширялся ли modelyear или нет:

<tbody> 
    <!-- ko foreach: modelyears --> 
     <tr data-bind="click: expandClose"> 
      <td > 
       <span data-bind="text: modelyear_name"></span> 
      </td> 
      <td> 
      </td> 
     </tr> 
     <!-- ko foreach: projects --> 
      <tr data-bind="if: $parent.isExpanded"> 
       <td > 
       </td> 
       <td> 
        <span data-bind="text: project_name"></span> 
       </td> 
      </tr> 
     <!-- /ko --> 
    <!-- /ko --> 
</tbody> 

expandClose просто переключаться между истина/ложь на свойстве IsExpanded вашего объекта modelyear (это должно быть ко. наблюдаемый). При этом нокаут будет добавлять/удалять элементы в DOM, пока это свойство истинно/ложно. Вы также можете использовать вид вместо , если. Разница в том, что видна снимает один раз, а затем переключается между дисплеем/дисплеем: нет, а если повторно снимает. Примечание: проверьте синтаксис, так как я не тестировал этот код.