javascript - 如何为 Kendo UI jQuery 的电子表格重新加载数据?
问题描述
我正在从远程源获取数据并将数据显示到 Kendo UI jQuery 的电子表格组件中。
第一次获取数据并显示在屏幕上时,一切都很好,但是,如果第二次获取数据,则会将新的电子表格附加到原始电子表格中。
刷新电子表格中数据的正确方法是什么?
请在此处查看此示例代码,其中包含我在上面描述的相同问题。继续单击搜索按钮,您将看到它在页面上附加了一个新的电子表格。
解决方案
如果您创建了一次电子表格,那么之后每次单击“搜索”按钮时,您都可以刷新电子表格的数据源。当然,您需要考虑这对用户在刷新数据源之前所做的任何更改有何影响。
更新道场: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
推荐阅读
- javascript - 赛普拉斯:网站端的一些请求得到空响应
- python - 在 vs 代码中的 python 测试文件中看不到调试/运行测试
- c# - Unity3d VS Code 配置问题
- android - Android:(谷歌地图)通过 Intent 禁用画中画模式
- c# - 如何将linq c#中日期之间的期间相加到特定期间
- macos - 如何在 macOS 中创建虚拟界面?
- go - 使用带有特定本地端口的 net.DialTimeout
- ruby-on-rails - Rspec 失败,因为救援错误时参数太少
- python - 如何使用 Tensorflow 找到值的立方根?
- javascript - 从html中的模型获取数据到文件js