Kendo UI for jQuery数据管理使用教程：Spreadsheet – 单元格格式

Kendo UI for jQuery中的Spreadsheet控件支持单元格格式选项，例如字符串、文本、数字、日期和时间的格式。

Spreadsheet控件支持单元格格式选项，例如字符串、文本、数字、日期和时间的格式。

字符串

虽然格式字符串与 Excel 数字格式兼容，但仍然存在一些值得注意的例外。 格式字符串由一个或多个用分 分隔的部分组成，可选地、部分指定颜色和条件。

下面的示例演示如何显示最多三位小数的数字。

#.###

下面的示例演示如何以绿色显示正数或零，以红色显示负数。

[Green]#.###;[Red]#.###

下面的示例演示如何以绿色显示正数，以红色显示负数，如果数字为零，则以蓝色显示“零”文本。

[Green]#.###;[Red]#.###;[Blue]”Zero”

以下示例与前一个示例相同，不同之处在于以红色显示单元格中任何可能的文本。

[Green]#.###;[Red]#.###;[Blue]”Zero”;[Magenta]@

下面的示例演示如何有条件地设置Spreadsheet的格式。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script><div id="example"><div id="spreadsheet" style="width: 100%;"></div><script>$(function() {$("#spreadsheet").kendoSpreadsheet({excel: {// Required to enable saving files in older browsers.proxyURL: "//demos.telerik.com/kendo-ui/service/export"},pdf: {proxyURL: "//demos.telerik.com/kendo-ui/service/export"},sheets: [{name: "Food Order",mergedCells: ["A1:G1","C15:E15"],rows: [{height: 70,cells: [{index: 0, value: "Invoice #52 - 06/23/2015", fontSize: 32, background: "rgb(96,181,255)",textAlign: "center", color: "white"}]},{height: 25,cells: [{value: "ID", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"},{value: "Product", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"},{value: "Quantity", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"},{value: "Price", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"},{value: "Tax", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"},{value: "Amount", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"},{background: "rgb(167,214,255)", color: "rgb(0,62,117)"}]},{cells: [{value: 216321, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: "Calzone", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: 1, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: 12.39, format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{formula: "C3*D3*0.2", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{formula: "C3*D3+E3", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{background: "rgb(255,255,255)", color: "rgb(0,62,117)"}]},{cells: [{value: 546897, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{value: "Margarita", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{value: 2, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{value: 8.79, format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{formula: "C4*D4*0.2", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{formula: "C4*D4+E4", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{background: "rgb(229,243,255)", color: "rgb(0,62,117)"}]},{cells: [{value: 456231, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: "Pollo Formaggio", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: 1, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: 13.99, format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{formula: "C5*D5*0.2", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{formula: "C5*D5+E5", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{background: "rgb(255,255,255)", color: "rgb(0,62,117)"}]},{cells: [{value: 455873, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{value: "Greek Salad", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{value: 1, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{value: 9.49, format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{formula: "C6*D6*0.2", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{formula: "C6*D6+E6", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{background: "rgb(229,243,255)", color: "rgb(0,62,117)"}]},{cells: [{value: 456892, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: "Spinach and Blue Cheese", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: 3, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: 11.49, format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{formula: "C7*D7*0.2", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{formula: "C7*D7+E7", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{background: "rgb(255,255,255)", color: "rgb(0,62,117)"}]},{cells: [{value: 546564, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{value: "Rigoletto", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{value: 1, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{value: 10.99, format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{formula: "C8*D8*0.2", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{formula: "C8*D8+E8", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{background: "rgb(229,243,255)", color: "rgb(0,62,117)"}]},{cells: [{value: 789455, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: "Creme Brulee", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: 5, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: 6.99, format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{formula: "C9*D9*0.2", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{formula: "C9*D9+E9", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{background: "rgb(255,255,255)", color: "rgb(0,62,117)"}]},{cells: [{value: 123002, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{value: "Radeberger Beer", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{value: 4, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{value: 4.99, format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{formula: "C10*D10*0.2", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{formula: "C10*D10+E10", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{background: "rgb(229,243,255)", color: "rgb(0,62,117)"}]},{cells: [{value: 564896, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: "Budweiser Beer", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: 3, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{value: 4.49, format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{formula: "C11*D11*0.2", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{formula: "C11*D11+E11", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{background: "rgb(255,255,255)", color: "rgb(0,62,117)"}]},{index: 11,cells: [{background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{background: "rgb(229,243,255)", color: "rgb(0,62,117)"},{background: "rgb(229,243,255)", color: "rgb(0,62,117)"}]},{index: 12,cells: [{background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{background: "rgb(255,255,255)", color: "rgb(0,62,117)"},{background: "rgb(255,255,255)", color: "rgb(0,62,117)"}]},{height: 25,index: 13,cells: [{background: "rgb(193,226,255)", color: "rgb(0,62,117)"},{background: "rgb(193,226,255)", color: "rgb(0,62,117)"},{background: "rgb(193,226,255)", color: "rgb(0,62,117)"},{background: "rgb(193,226,255)", color: "rgb(0,62,117)"},{value: "Tip:", background: "rgb(193,226,255)", color: "rgb(0,62,117)", textAlign: "right", verticalAlign: "bottom"},{formula: "SUM(F3:F11)*0.1", background: "rgb(193,226,255)", color: "rgb(0,62,117)", format: "$#,##0.00", bold: "true", verticalAlign: "bottom"},{background: "rgb(193,226,255)", color: "rgb(0,62,117)"}]},{height: 50,index: 14,cells: [{index: 0, background: "rgb(193,226,255)", color: "rgb(0,62,117)",},{index: 1, background: "rgb(193,226,255)", color: "rgb(0,62,117)",},{index: 2, fontSize: 20, value: "Total Amount:",background: "rgb(193,226,255)", color: "rgb(0,62,117)", textAlign: "right"},{index: 5, fontSize: 20, formula: "SUM(F3:F14)", background: "rgb(193,226,255)", color: "rgb(0,62,117)",format: "$#,##0.00", bold: "true"},{index: 6, background: "rgb(193,226,255)", color: "rgb(0,62,117)"}]}],columns: [{width: 100},{width: 215},{width: 115},{width: 115},{width: 115},{width: 155}]}]}).data('kendoSpreadsheet').sheets()[0].range("C3:C11").format('[=1][GREEN]#,##0;[=2][YELLOW]#,##0;[=3][CYAN]#,##0;[RED]#,###');});</script></div>

根据 Excel 文档，Excel 最多支持四个部分。 如果所有这些都存在，Excel 将按以下顺序解释它们：

• 正数格式
• 负数格式
• 格式为零
• 文本格式

Excel 还支持更灵活的条件格式。

以下示例演示了如何以绿色显示大于 100 的数字、以黄色显示小于负 100 的数字以及以青色显示其他数字。

[>100][GREEN]#,##0;[<=-100][YELLOW]#,##0;[CYAN]#,##0

在这种情况下，不清楚是否只允许最多四个部分，其中最后一个必须是文本，而Spreadsheet格式化程序允许任意数量的条件部分。

Kendo UI for jQuery | 下载试用

Kendo UI for jQuery是完整的jQuery UI组件库，可快速构建出色的高性能响应式Web应用程序。Kendo UI for jQuery提供在短时间内构建现在Web应用程序所需要的一切，从多个UI组件中选择，并轻松地将它们组合起来，创建出酷炫响应式的应用程序，同时将开发时间加快了50%。