创建具有折叠（父/子）行的tbody

-1

我有一个tbody表，其中父子结构由基础视图模型支持。亲子结构如下所示：创建具有折叠（父/子）行的tbody

<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来显示/隐藏子行（项目）。

来源

2016-03-14 Steve Rabbit

代码看起来不错。所有你需要的是注入一些引导扩展/崩溃到它。 –

@supercool不确定是否需要引入仅用于展开/展开的Bootstrap，手工制作的也可以。尽管同意底层的信息：这个帖子比一个问题更重要。 – Jeroen

@Jeroen是一个手工制作的#agreed。 –

我用bootstrap“collapse”功能自己解决了这个问题。

“数据目标”是对敲除计算值的绑定，我从当前父项的ITEM ID获得该数据。

以下是在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);

希望它可以帮助别人那里;-)

来源

2016-03-15 09:56:24

正如supper cool指出的那样，最好的解决方案是使用一些UI效果，使您可以以更时尚的方式进行扩展。然而，简单的解决方案是维护一个布尔值，表示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只是你modelyear对象的isExpanded财产真/假之间切换（这已被KO。观察到的）。有了这个，只要此属性为真/假，淘汰赛就会将元素添加/删除到DOM。您也可以使用可见而不是如果。区别在于可见呈现一次，然后在显示/显示之间切换：无，而如果重新呈现。注意：检查语法，因为我没有测试过这段代码。

来源

2016-03-15 09:31:39 jparaya

谢谢你的回答，另一个很酷和简单的（！）解决方案.. :) –

创建具有折叠（父/子）行的tbody

回答

相关问题