在Grid.js中渲染数据后，如何添加(或替换)数据

Question

我想将数据呈现到网格。JS最初和我的页面可能会获取额外的数据并添加额外的行，或者填充某些行中缺少的数据。我不确定写入网格的语法是什么。JS，一旦你已经渲染了一次。我的想法是，我必须重读整张表，这就是我在下面尝试的，但却出现了错误。

我试过这个：

new gridjs.Grid({
columns: ["Name", "Email", "Phone Number"],      
data: [["Mark", "[e-mail]", "(01) 22 888 4444"],["Eoin", "[e-mail]", "0097 22 654 00033"],["Sarah", "[e-mail]", "[phone]"],["Afshin", "[e-mail]", "(353) 22 87 8356"]]}).render(document.getElementById("gridjs"));
new gridjs.Grid({
columns: ["Test", "Email", "Phone Number"],
data: [["test", "[e-mail]", "(353) 01 222 3333"],["Mark", "[e-mail]", "(01) 22 888 4444"],["Eoin", "[e-mail]", "0097 22 654 00033"],["Sarah", "[e-mail]", "[phone]"],["Afshin", "[e-mail]", "(353) 22 87 8356"]]}).render(document.getElementById("gridjs"));

当我尝试这样做时，我在控制台中得到以下错误：

[Grid.js] [ERROR]: The container element [object HTMLDivElement] is not empty. Make sure the container is empty and call render() again

Answer 1

正如@Ouroborus在评论中所说，您正在寻找forceRender()。

在你的例子中，你可以像这样更新网格的数据：

// Set the grid
const mygrid = new gridjs.Grid({
columns: ["Name", "Email", "Phone Number"],      
data: [
["Mark", "[e-mail]", "(01) 22 888 4444"],
["Eoin", "[e-mail]", "0097 22 654 00033"],
["Sarah", "[e-mail]", "[phone]"],
["Afshin", "[e-mail]", "(353) 22 87 8356"]
]
}).render(document.getElementById("gridjs"));
// Update Datas
mygrid.updateConfig({
data: [
["test", "[e-mail]", "(353) 01 222 3333"],
["Mark", "[e-mail]", "(01) 22 888 4444"],
["Eoin", "[e-mail]", "0097 22 654 00033"],
["Sarah", "[e-mail]", "[phone]"],
["Afshin", "[e-mail]", "(353) 22 87 8356"]
]
}).forceRender();