如何为SpreadSheet of Kendo UI jQuery重新加载数据？
如何为SpreadSheet of Kendo UI jQuery重新加载数据？
提问于 2020-09-22 17:15:16
我从远程源获取数据，并将数据显示到Kendo的电子表格组件中。
但是，当数据第一次被抓取并显示在屏幕上时，如果数据第二次被抓取，那么新的电子表格就会被附加到原来的电子表格中。
在电子表格中刷新数据的正确方法是什么？
请在这里看到这个示例代码，它包含了我前面描述过的问题。继续单击“搜索”按钮，您将看到它向页面添加了一个新的电子表格。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-22 19:17:30
如果只创建一次电子表格，然后在每个搜索按钮上单击，就可以刷新电子表格的数据源。当然，您需要考虑这对用户在刷新数据源之前所做的任何更改所做的操作。
更新的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中
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64014641
复制相关文章
相似问题
腾讯云开发者
