1

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

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

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

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

https://dojo.telerik.com/ewigOKam

4

1 回答 1

2

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

更新道场: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 网站示例中提取的,用于电子表格的数据源绑定 - 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>

dojo中的上述代码:https ://dojo.telerik.com/ILuxuTeG

于 2020-09-22T19:17:30.530 回答