2

我想最初将数据呈现给 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
4

1 回答 1

2

就像@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();
于 2021-09-17T13:11:50.193 回答