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

Question

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

请参阅this fiddle

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

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

Answer 1

从项目现场：

  

Material Design Lite将自动注册并呈现所有内容   页面加载时标记为MDL类的元素。但在这种情况下   在哪里动态创建DOM元素，需要注册   使用upgradeElement函数的新元素。

http://www.getmdl.io/started/index.html#dynamic

Answer 2

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

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

Answer 3

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

componentHandler.upgradeElement(tableelem);

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

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

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

componentHandler.upgradeElement(tableelem,'MaterialDataTable');

Answer 4

componentHandler.upgradeDom() 

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