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

Question

我正在从远程源获取数据并将数据显示到 Kendo UI jQuery 的电子表格组件中。

第一次获取数据并将其显示在屏幕上时，一切都很好，但是，如果第二次获取数据，则会将新的电子表格附加到原始电子表格中。

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

请在此处查看此示例代码，其中包含我在上面描述的相同问题。继续点击搜索按钮，您将看到它在页面上附加了一个新的电子表格。

https://dojo.telerik.com/ewigOKam

Answer 1

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

更新道场：https://dojo.telerik.com/EGePecal

还有来自那个道场的代码（最好将代码包含在问题中，而不仅仅是在链接中）：

  <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>

更新：这是做同样事情的另一种方法，它更简洁 - 这是从 Telerik 网站示例中提取的，用于电子表格的 DataSource 绑定 - https://demos.telerik.com/aspnet-core/spreadsheet/datasource

<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>

以上道场代码：https://dojo.telerik.com/ILuxuTeG