創建具有摺疊（父/子）行的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

回答

相關問題