Javascript 如何为Kendo UI jQuery的电子表格重新加载数据？

我从远程源获取数据，并将数据显示到KendoUIjQuery的电子表格组件中

第一次提取数据并在屏幕上显示时，一切正常，但是，如果第二次提取数据时，新的电子表格会附加到原始电子表格中

刷新电子表格中数据的正确方法是什么？

请在这里查看这个示例代码，它包含与我上面描述的相同的问题。继续单击“搜索”按钮，您将看到它在页面中添加了一个新的电子表格

---

如果只创建一次电子表格，然后在每次搜索按钮单击后，可以刷新电子表格的数据源。当然，在刷新数据源之前，您需要考虑这对用户所做的任何更改的影响

更新的dojo：

以及来自dojo的代码（最好将代码包含在问题中，而不仅仅是链接中）：

搜索
$（函数（）{
$（“#电子表格”）.kendoSpreadsheet（）；
});
函数搜索（）{
var dataSource=new kendo.data.dataSource({
运输：{
阅读：{
url://demos.telerik.com/kendo ui/service/Products“，
数据类型：“jsonp”
}
}
});
var电子表格=$（“#电子表格”）.数据（“kendoSpreadsheet”）；
var sheet=spreadsheet.activeSheet（）；
sheet.setDataSource（数据源）；
console.log（sheet.dataSource）；
}

更新：这里有另一种方法可以做同样的事情，它稍微干净一点-这个方法来自Telerik网站的样本，用于电子表格的数据源绑定-

搜寻
$（函数（）{
var dataSource=new kendo.data.dataSource({
运输：{
阅读：{
url://demos.telerik.com/kendo ui/service/Products“，
数据类型：“jsonp”
}
}
});
$（“#电子表格”）.kendoSpreadsheet({
栏目：20，
行数：100，
工具栏：false，
sheetsbar:错，
工作表：[{
名称：“产品”，
数据源：数据源，
行：[{
身高：40，
单元格：[
{
粗体：“正确”，
背景：“9c27b0”，
textAlign：“居中”，
颜色：“白色”
},{
粗体：“正确”，
背景：“9c27b0”，
textAlign：“居中”，
颜色：“白色”
},{
粗体：“正确”，
背景：“9c27b0”，
textAlign：“居中”，
颜色：“白色”
},{
粗体：“正确”，
背景：“9c27b0”，
textAlign：“居中”，
颜色：“白色”
},{
粗体：“正确”，
背景：“9c27b0”，
textAlign：“居中”，
颜色：“白色”
}]
}],
栏目：[
{宽度：100}，
{宽度：415}，
{宽度：145}，
{宽度：145}，
{宽度：145}
]
}]
});
});
函数搜索（）{
var电子表格=$（“#电子表格”）.数据（“kendoSpreadsheet”）；
spreadsheet.activeSheet（）.dataSource.read（）；
}

---

dojo中的上述代码：

G_p是正确的，在数据源上调用read（）是单击搜索时正确的操作。另一种选择是销毁电子表格小部件，并在单击“搜索”时使用新的数据源重新创建它。我没有把它作为一个答案，因为它在这种情况下是不必要的。注意在附加的代码下一次，真的很感谢这两个代码样本！

  <button class="k-button" onClick="search();">Search</button>
  <div id="spreadsheet"></div>

<script>

  $(function() {
    $("#spreadsheet").kendoSpreadsheet();
  });
  
  function search() {

    var dataSource = new kendo.data.DataSource({
      transport: {
        read:  {
          url: "//demos.telerik.com/kendo-ui/service/Products",
          dataType: "jsonp"
        }
      }
    });

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();
    sheet.setDataSource(dataSource);

    console.log(sheet.dataSource);
  }

</script>

<button class="k-button" onClick="search();">Search</button>
<div id="spreadsheet"></div>

<script>

  $(function() {
    
    var dataSource = new kendo.data.DataSource({
      transport: {
        read:  {
          url: "//demos.telerik.com/kendo-ui/service/Products",
          dataType: "jsonp"
        }
      }
    });
    
   
    $("#spreadsheet").kendoSpreadsheet({
      columns: 20,
      rows: 100,
      toolbar: false,
      sheetsbar: false,
      sheets: [{
        name: "Products",
        dataSource: dataSource,
        rows: [{
          height: 40,
          cells: [
            {
              bold: "true",
              background: "#9c27b0",
              textAlign: "center",
              color: "white"
            },{
              bold: "true",
              background: "#9c27b0",
              textAlign: "center",
              color: "white"
            },{
              bold: "true",
              background: "#9c27b0",
              textAlign: "center",
              color: "white"
            },{
              bold: "true",
              background: "#9c27b0",
              textAlign: "center",
              color: "white"
            },{
              bold: "true",
              background: "#9c27b0",
              textAlign: "center",
              color: "white"
            }]
        }],
        columns: [
          { width: 100 },
          { width: 415 },
          { width: 145 },
          { width: 145 },
          { width: 145 }
        ]
      }]
    });

    
    });
  
  function search() {
     var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
     spreadsheet.activeSheet().dataSource.read();
  }

</script>