处理 mdl 表复选框答案

【问题标题】：handle mdl table check box处理 mdl 表复选框
【发布时间】：2015-09-18 21:27:41
【问题描述】：

我在我的网站中使用了 Material desigin lite 我已经实现了这个例子： 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 中使用它们的方法是什么（删除我正在尝试实现的行）

【问题讨论】：

Material Design Lite 是一个 Web 客户端库（如 Twitter Bootstrap 或 Angular.js），它与服务器端逻辑或数据库无关。
@Dai 是的。但我的问题更侧重于复选框以及如何处理它们，它们只是通过使用类“mdl-data-table--selectable”添加的，所以我无法通过 id 或标签名称控制它们

标签： javascript html css material-design-lite

【解决方案1】：

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

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

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

<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 方法我们可以实现很多，比如在我们的点击事件监听器中使用以下代码读取所有表数据的内容

 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>

【讨论】：

非常有用的 sn-p ，所以我需要扫描“mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center”类的“选中”框？或者这会返回所有复选框？（选中和未选中）？据我从 sn-p 了解到，被点击的复选框被删除，但不检查它的值（选中与否）这就是我正在寻找的......
它不会返回所有“复选框”，请注意我如何使用“this”作为 jquery 选择器。它将查看单击的元素，而不是具有已单击类的所有元素。也很难弄清楚你想在这里实现什么。如果我个人需要检查是否选中了复选框。我只会使用 jquery toggleclass 方法并切换一个自定义类，如“checked”之类的。如果您能更具体地说明您愿意如何使用复选框，我将不胜感激。
我想收集所有选中的复选框并使用 post 方法删除它们（我也从 sql server 中删除，但不重要）我相信你得到了“mdl-”类的正确答案checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center" 现在我可以检查复选框的 value="checked" 了。我正在使用 javascript，但我正在关注你的 jquery（我是初学者）

【解决方案2】：

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

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

更新：刚刚读到“mdl-data-table--selectable”类已被弃用...This is the article on github

【讨论】：

【解决方案3】：

您可以使用此 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()

第二步：设置Item OnClickListener

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

现在您的表格项监听器已全部设置完毕！

【讨论】：