Google Material design：data table action

Question

所以，我只是測試了Google的材質設計。在表格組件中，它可以選擇多行。

我也有以下功能，刪除單個行（或它所包含的數據）現在

<a onclick="return confirm('Are you sure?');" href="<?php echo wp_nonce_url(add_query_arg(array('action' => 'my-delete-product', 'product_id' => $post->ID), my_get_navigation_url('products')), 'my-delete-product'); ?>"><i class="material-icons">delete</i></a> 

，一旦多行被選中，我不知道怎樣應用這個刪除功能的選擇行。

這裏是我迄今爲止在設計方面：（http://www.getmdl.io/components/index.html#tables-section）

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp"> 
    <thead> 
    <tr> 
     <th class="mdl-data-table__cell--non-numeric">Material</th> 
     <th>Quantity</th> 
     <th>Unit price</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td> 
     <td>25</td> 
     <td>$2.90</td> 
    </tr> 
    <tr> 
     <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td> 
     <td>50</td> 
     <td>$1.25</td> 
    </tr> 
    <tr> 
     <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td> 
     <td>10</td> 
     <td>$2.35</td> 
    </tr> 
    </tbody> 
</table> 

我能有這個表之外的按鈕。但是我不確定如何將所選行「鏈接」到「刪除」功能本身。我猜我需要使用jQuery或其他東西。

無論如何，任何建議將不勝感激。

謝謝！

Answer 1

不，你沒有。您只需要跟蹤選定的行，然後在點擊刪除時執行操作。 有一個更簡單的方法，使用一個componenf，它支持你所需要的：https://github.com/iamisti/mdDataTable