Kendo UI for jQuery管理数据有妙招!轻松将数据存储为JSON
Spreadsheet允许您以原生JSON格式存储和加载数据。
入门指南
格式遵循与小部件配置相同的结构,它旨在用于直接存储和作为中间格式。
注意:一旦Spreadsheet退出 Beta 版本,将发布官方JSON模式。
持久化的信息包括:
- 单元格公式、值、格式和样式。
- 行高和列宽。
- 排序和过滤选项。
- 活动工作表和选择。
使用序列化 API
Spreadsheet客户端API包括用于加载和存储其状态的fromJSON和toJSON方法,要加载包含数据的Spreadsheet,请将与所需架构匹配的对象传递给fromJSON,这将重置小部件并清除所有现有数据。
以下示例演示如何使用fromJSON加载数据。
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet();
var spreadsheet = $("#spreadsheet").getKendoSpreadsheet();
spreadsheet.fromJSON({
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}]
}]
});
</script>
您还可以选择仅加载特定工作表中的数据,除了引用它的公式之外,这不会影响位于其他工作表中的数据。
以下示例演示如何使用fromJSON加载工作表数据。
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
name: "Inventory"
}, {
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}]
}]
});
var spreadsheet = $("#spreadsheet").getKendoSpreadsheet();
spreadsheet.sheetByName("Inventory").fromJSON({
rows: [{
cells: [{
value: "Chai", textAlign: "center"
}, {
value: 12
}]
}]
});
</script>
Kendo UI for jQuery是完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。Kendo UI for jQuery提供在短时间内构建现在Web应用程序所需要的一切,从多个UI组件中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%。
浙公网安备 33010602011771号