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

Question

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

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

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

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

https://dojo.telerik.com/ewigOKam

Answer 1

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

更新dojo：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网站上为电子表格的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>

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