如何为 Kendo UI jQuery 的 SpreadSheet 重新加载数据？

Question

我正在从远程源获取数据并将数据显示到 Kendo UI jQuery.

的电子表格组件中

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

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

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

https://dojo.telerik.com/ewigOKam

Answer 1

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

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

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

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

UPDATE：这是做同样事情的另一种方法，它更简洁一些 - 这个方法来自 Telerik 网站示例，用于电子表格的数据源绑定 - 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

如何为 Kendo UI jQuery 的 SpreadSheet 重新加载数据？

How to reload data for SpreadSheet of Kendo UI jQuery?

javascript

asp.net-mvc

jquery

kendo-ui

kendospreadsheet