1

我在我的网站中使用材料设计精简版我已经实现了这个例子： 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>

我的问题是如何处理表格中的复选框，它们是由类添加的：.mdl-data-table--selectable

它们没有 ID 或类，那么在 javascript 或 sql server 中使用它们的方法是什么（删除我要实现的行）

4

3 回答 3

3

您可以检查是否使用 jquery on 方法单击了它们，为什么不使用正常的 .click 是因为event delegate。Jquery 文档很好地解释了这一点。

在我解释我是如何做到的之前，我将有一个片段，你可以在我的解释下立即玩。

我基本上使用检查元素来查看表格结构，它看起来像这样

<tr>
    <td>
        <label>clickable checkbox code</label>
    </td>
    <td>Acrylic</td>
    <td>25</td>
    <td>$2.90</td>

有了这些信息，我们可以做很多事情。我个人用它来听点击。

$(document).on("click",".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() {  /* Code here*/ });

并且使用 jquery parents & children方法我们可以实现很多，比如在我们的 click 事件监听器中使用以下代码读取所有表数据的内容

 foo = $(this).parents().eq(2).children().text();

或者我们也许可以删除一整行？

$(this).parents().eq(2).fadeOut();

这样做是，使用“this”作为参考查看单击的复选框。然后去关卡并删除一整行。

<tr><!-- eq 2 -->
   <td> <!-- eq 1 -->
        <label>clickable checkbox code</label>
   </td>

   <td>Acrylic</td>
   <td>25</td>
   <td>$2.90</td>

或者我们可以像这样检查特定孩子的内容

 var secondChildContent = $(this).parents().eq(2).children().eq(2).text();

secondChildContent 将返回内容。您可以随时将 eq（子后的那个）值更改为所需的子编号。在以下情况下，secondChildContent 将返回“Acrylic”

<tr>
<td> <!-- eq 1 -->
    <label>clickable checkbox code</label>
</td>

<td>Acrylic</td> <!-- eq 2 -->
<td>25</td> <!-- eq 3 -->
<td>$2.90</td> <!-- eq 4 -->


$(document).ready(function() {

  $(document).on("click", ".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() {

    //Removing row
    $(this).parents().eq(2).delay(500).fadeOut(300);

    var secondChildContent = $(this).parents().eq(2/*child number*/).children().eq(2).text();
    var allChildrenContent = $(this).parents().eq(2).children().text();
    var parentID = $(this).parents().eq(2).attr('id');

    //Removing table on click of first checkbox
    if (parentID == "header") {
      $("#mdlTable").fadeOut(1000);
      $("#log").html("<b>Table removed!</b>");
    } else {
      //Don't pay attention to this
      $("#log").html(
        "<b>Second child content is: </b>" + secondChildContent +
        "<br><b>All children content is: </b>" + allChildrenContent
      )
    }

  });

});
#log,
#mdlTable {
  margin: 1% 1% 1% 1%;
}
<!DOCTYPE html>
<html>

<head>
  <title>Table</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">
  <script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <table id="mdlTable" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
    <thead>
      <tr id="header">
        <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>
  <div id="log"></div>
</body>

于 2015-09-21T20:30:35.310 回答
1

当一个复选框被选中时，tr 会使用 Material Design Lite 获取“已检查”类。所以你的jquery可以是这样的：

$("table").find("tr.is-checked").each(function(){
        // Do some stuff!
    });

更新：刚刚读到“mdl-data-table--selectable”类正在被弃用......这是github上的文章

于 2016-11-29T12:08:58.920 回答
1

您可以使用此 OnClick API 函数。它像 Android 的 onClickListener 一样使用，但它是用于 JavaScript 的。

TablesOnClickListener = function() {
var fun;
this.setOnClickListener = function(listener) {
    fun = listener;
    $(document).on("click", ".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() {
        //$(this).parents().eq(2).delay(500).fadeOut(300);
        var secondChildContent = $(this).parents().eq(2 /*child number*/ ).children().eq(2).text();
        var allChildrenContent = $(this).parents().eq(2).children().text();
        var parentID = $(this).parents().eq(2).attr('id');
        fun({
            sen: secondChildContent,
            text: allChildrenContent,
            id: parentID
        });
    });
}

如何使用：

第 1 步：创建新的 TablesOnClickListener

var tocl = new TablesOnClickListener()

第 2 步：设置项目 OnClickListener

tocl.setOnClickListener(function(data){
      console.log(data);
    });

现在您的 Tables Item Listener 已全部设置完毕！

于 2016-12-10T03:33:43.737 回答