渲染后如何在 Grid.js 中添加（或替换）数据？

Question

我想最初将数据渲染到 Grid.JS，然后我的页面可能会获取其他数据并添加其他行或填充某些行中缺少的数据。我不确定渲染一次后写入 Grid.JS 的语法是什么。我的想法是，我必须重新渲染整个表格，这就是我在下面尝试的但出现错误的方法。

我试过这个：

    new gridjs.Grid({
      columns: ["Name", "Email", "Phone Number"],      
      data: [["Mark", "mark@gmail.com", "(01) 22 888 4444"],["Eoin", "eoin@gmail.com", "0097 22 654 00033"],["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"]]}).render(document.getElementById("gridjs"));

    new gridjs.Grid({
      columns: ["Test", "Email", "Phone Number"],
      data: [["test", "test@example.com", "(353) 01 222 3333"],["Mark", "mark@gmail.com", "(01) 22 888 4444"],["Eoin", "eoin@gmail.com", "0097 22 654 00033"],["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],["Afshin", "afshin@mail.com", "(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", "mark@gmail.com", "(01) 22 888 4444"],
        ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
        ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
        ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
    ]
}).render(document.getElementById("gridjs"));

// Update Datas
mygrid.updateConfig({
    data: [
        ["test", "test@example.com", "(353) 01 222 3333"],
        ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
        ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
        ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
        ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
    ]
}).forceRender();