如何在 Material Design Lite 中将事件附加到 Table 复选框

Question

创建 MDL table 时，其中一个选项是应用 class 'mdl-data-table--selectable'。当 MDL 呈现 table 时，会在指定列的左侧插入一个额外的列，其中包含允许您 select 特定行进行操作的复选框。对于我的应用程序，当有人选中或取消选中一个框时，我需要能够处理一些 JavaScript。到目前为止，我一直无法做到这一点。

问题是你没有直接指定复选框控件，它们是在 MDL 升级整个 table 时插入的。对于其他 MDL 组件，例如按钮，我可以在按钮本身上放置一个 onclick 事件，因为我使用 HTML 按钮标记指定它。

尝试将 onclick 置于为呈现复选框而创建的各种容器对象和跨度上未成功。我附加的事件似乎没有触发。我最接近的是将事件附加到 TR，然后遍历复选框以评估它们的状态。

这是 MDL 为单个复选框单元格生成的标记：

<td>
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select mdl-js-ripple-effect--ignore-events is-upgraded" data-upgraded=",MaterialCheckbox">
        <input type="checkbox" class="mdl-checkbox__input">
            <span class="mdl-checkbox__focus-helper"></span>
            <span class="mdl-checkbox__box-outline">
                <span class="mdl-checkbox__tick-outline"></span>
            </span>
            <span class="mdl-checkbox__ripple-container mdl-js-ripple-effect mdl-ripple--center">
                <span class="mdl-ripple"></span>
            </span>
    </label>
</td>

None 这个标记是我指定的，因此我不能简单地向标签添加一个 onclick 属性。

是否有我可以挂钩的事件链？我想按照编码员的意图去做。

Answer 1

我们目前没有办法直接解决这个问题。我们正在考虑使用 V1.1 添加事件，可以在 Issue 1210 订阅这些事件。请记住，只需使用右侧栏中的按钮订阅该问题。我们不需要一堆 +1 和其他无用的评论。

破解它的一种方法是将事件绑定到 table 本身，监听任何 "change" 事件。然后，您可以从事件的目标沿链向上移动以获取 table 行，然后从那里获取您需要的数据。

Answer 2

这不是最好的代码片段，但话又说回来，MDL 也不是最好的库。其实还挺丑的。

除此之外，现在关于我的代码：代码将绑定到文档根上的单击事件，该单击事件源自具有 class mdl-checkbox.

的元素

第一个问题：事件触发了两次。为此，我使用了 a piece of code from Underscore.js / David Walsh 来消除点击时函数调用的抖动（如果该函数在 250 毫秒的间隔内执行多次，它只会被调用一次）。

第二个问题：点击事件发生在 MDL 更新 select 框的 is-checked class 之前，但是我们可以假设点击改变了复选框的状态，因为上一次，所以在大多数情况下，在点击时取消 hasClass 是确定选中状态的一个非常安全的选择。

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

$(document).on("click", ".mdl-checkbox", debounce(function (e) {
    var isChecked = !$(this).hasClass("is-checked");
    console.log(isChecked);
}, 250, true));

希望对您有所帮助 ;)

Answer 3

您可以从包含表单委托更改事件。

例如

var form = document.querySelector('form');
form.addEventListener('change', function(e) { 
    if (!e.target.tagName === 'input' || 
         e.target.getAttribute('type') !== 'checkbox') { 
       return;
    }
    console.log("checked?" + e.target.checked);
});

如何在 Material Design Lite 中将事件附加到 Table 复选框

How to Attach Events to Table Checkboxes in Material Design Lite

material-design-lite