javascript - 材料设计表组件不会使动态行可选

Question

我在使用 Material Design Lite 的表格组件时遇到问题。我用mdl-data-table--selectable应该使它的行可选择的类来定义它。如果它是在 HTML 中静态定义的，它会这样做，但是当我动态创建我的节点并将其添加到表中时，它不会变得可选择。

我确实添加了一个componentHandler.upgradeElement(tr);，但它并没有解决问题，它甚至抛出了一个异常，所以我没有那个就继续了。

嗨，由于我找不到这个问题的答案，我愿意接受有关如何刷新表格的新建议。目前，我正在删除其所有内容并再次生成需要动态添加元素的表格。欢迎任何建议。

score 2 · Accepted Answer

从项目现场：

Material Design Lite 将在页面加载时自动注册和渲染所有标记有 MDL 类的元素。但是，在动态创建 DOM 元素的情况下，您需要使用 upgradeElement 函数注册新元素。

score 2 · Accepted Answer

类“mdl-data-table--selectable”将被删除。现在您可以自己控制复选框。

score 0 · Accepted Answer

componentHandler.upgradeDom()

通过使用 MDL 类更新文档中的任何组件来完成这项工作。在 MDL 1.1.3 中工作。

score 0 · Accepted Answer

我遇到了同样的问题并找到了解决方法。动态创建新的 MDL 表，包括要添加的行，使用以下命令升级表：

componentHandler.upgradeElement(tableelem);

升级后，您可以通过将行附加到原始表的 tbody 元素，将新表中的行移动到页面上的行。外观、感觉和行为与行一致。

我发现的唯一问题是复选框未实现 MaterialRipple 行为。这似乎是使用 componentHandler.upgradeElement(tableelem) 方法升级的任何表的问题。这很可能是 MDL 错误。

如果在运行 componentHandler.upgradeElement(tableelem) 时遇到错误，请尝试指定行为：

componentHandler.upgradeElement(tableelem,'MaterialDataTable');

4 回答 4