Question

我已将此代码用于我的项目https://getmdl.io。它简单而精美的前端设计。并且它会在页面加载后为每一行加载一些复选标记。

但是，在使用ajax向tbody动态添加更多行之后，我无法更新表视图。我通过获取tbody元素添加它们，然后使用document.createElement（“td”）

<table id="test-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">Predmet</th>
            <th>Vreme</th>
            <th>Datum</th>
        </tr>
    </thead>
    <tbody>
        <data-mdl-data-table-selectable-name="materials[]" data-mdl-data-table-selectable-value="acrylic">
    <tr>
        <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
        <td>10</td>
        <td>$2.35</td>
    </tr>
</tbody>
</table>

用于添加新行的代码：

$.ajax({
    url: "api2.php",
    success: function(result) {
        result = $.parseJSON(result);
        $tabela = $("#test-table").find("tbody");
        for (var i = 0; i < result.length; i++) {
            var newTrow = document.createElement("tr");
            var newTdata = document.createElement("td");
            newTdata.className="mdl-data-table__cell--non-numeric";
            newTdata.innerHTML = result[i];
            newTrow.appendChild(newTdata);
            newTrow.innerHTML+="<td>asdf</td><td>asdf</td>";

            $($tabela).append(newTrow);

        };
        componentHandler.upgradeElement($tabela, "mdl-data-table--selectable"); // I have tried many options for both parameters nothing works

        if (chosen_browser_is_supported()) {
            $("#subjects").chosen({
                width: "450px"
            });
        } else {
            $("#subjects").show();
        }
    }
});

根据用于此目的的这个来源https://github.com/jasonmayes/mdl-component-design-pattern，我应该做

componentHandler.upgradeElement(document.getElementById("test-table"))

但这根本不起作用。

在Web控制台中也可以看到MaterialDataTable，但我不知道如何使用它。

Answer 1

我认为你的问题可能是upgradeElement在这种情况下需要复数。试试

componentHandler.upgradeElements(document.getElementById("test-table"));

如果这不起作用（过去这些方法中存在错误）请尝试升级整个页面：

componentHandler.upgradeDom();

Answer 2

似乎删除了对mdl表的这种支持。开发人员现在希望创建复选框而不依赖于mdk。这与getmdl网站（13。2016年6月）上的当前可用信息形成对比，但在github上的问题中对此进行了讨论。

解决方案可在github wiki页面上找到：

https://github.com/google/material-design-lite/wiki/Deprecations#automatic-selection-checkboxes

如何在html中更新表视图？

2 个答案: