4

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

问题是您没有直接指定复选框控件，它们是在 MDL 升级整个表格时插入的。对于其他 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>

我没有指定这些标记，因此我不能简单地将 onclick 属性添加到标签。

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

4

3 回答 3

4

它不是最好的代码，但话说回来，MDL 也不是最好的库。实际上，它非常丑陋。

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

第一个问题：事件触发两次。为此，我使用了来自 Underscore.js / David Walsh 的一段代码，它将在单击时消除函数调用（如果函数在 250 毫秒间隔内执行多次，则只会调用一次）。

第二个问题：点击事件发生在 MDL 更新is-checked选择框的类之前，但我们可以假设点击自上次以来改变了复选框的状态，因此否定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));

希望能帮助到你 ;）

于 2016-01-12T13:56:48.460 回答
1

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

破解它的一种方法是将事件绑定到表本身，以监听任何“更改”事件。然后，您可以从事件目标的链向上获取表格行，然后从那里获取您需要的数据。

于 2015-08-01T12:18:16.133 回答
1

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

例如

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);
});
于 2017-01-27T00:09:11.920 回答