Google Material设计：数据表操作

Question

So, I am just testing out the Google material design. In the table component, it can select multiple rows.

I also have following function which deletes individual row (or the data that it contains)

 <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>

Now, once the multiple rows are selected, I am not sure how to apply this delete function to the selected rows.

Here is what I have so far in terms of the design: (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>

I can have a button outside of this table. However I am not sure how to "link" the selected rows to the "delete" function itself. I am guessing I need to use jQuery or something.

Anyway, any suggestions will be appreciated.

Thanks!

Answer 1

No you dont. You just need to keep track the selected rows and then do the action when clicki g on delete. There is an easier way, use a componenf which has a support for exactly what you need: https://github.com/iamisti/mdDataTable