如何使用angular2+在Datatable中添加空数据行？

Question

我想添加空数据行。 我的要求就像列是动态的。 我曾尝试使用 dtInstance 添加行。 它抛出了一些错误。

链接在这里

https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-gvfose?file=app/app.component.ts

如果需要更多详细信息，请告诉我。

Answer 1

我认为开箱即用的 Angular-datatables 是不可能的，但是您可以使用 Angular-xeditable 来实现这一点，就像在这个问题中一样。 以我的拙见，一个更好的方法是，当用户单击“添加”按钮时，我们会显示一个弹出窗口，他们填充数据，我们更新后端或引用表并重新渲染表。

Answer 2

你给数据表错误的模型。 您正在代码中的不同模型之间进行混合。

我已经修复它以及添加两个空行，确保与由columnsDataObj定义的模型对齐

https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-zemuq2?file=app/app.component.ts

Answer 3

有一个简单的演示可以满足您的要求，它可以放置另一个按钮来保存您要访问数据的空列。

为了易于使用， add DATA按钮，该按钮将显示带有input的空白行，您希望设置 CSS 的样式，不要忘记Encapsulation的 CSS 范围。

演示

如果操作字段是多余的，请在输入逻辑条件后将其删除并放置三列的事件。

---

烦人的按钮

add DATA可以替换为下面的代码，设置life hook而不是在构造函数中插入方法。

ngAfterViewInit (){
  this.addData();
}