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

Posted 2023-05-08

【中文标题】如何为 Kendo UI jQuery 的电子表格重新加载数据？

【英文标题】：How to reload data for SpreadSheet of Kendo UI jQuery?

【发布时间】：2021-01-08 20:51:17

【问题描述】：

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

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

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

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

https://dojo.telerik.com/ewigOKam

【问题讨论】：

G_P 是对的，在数据​​源上调用 read() 是点击搜索时正确的做法。另一种选择是销毁电子表格小部件并在单击搜索时使用新数据源重新创建它。我没有将其发布为答案，因为在这种情况下没有必要。

【参考方案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

【讨论】：

下次附上代码注意了，非常感谢这两个代码示例！