成人用品,日韩性网,三级国产精品亚洲

Kendo UI for jQuery數據管理使用教程：Spreadsheet - 單元格格式

翻譯|使用教程|編輯：龔雪|2021-07-27 09:29:45.767|閱讀 371 次

概述：Kendo UI for jQuery中的Spreadsheet控件支持單元格格式選項，例如字符串、文本、數字、日期和時間的格式。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

Kendo UI for jQuery最新版工具下載

Spreadsheet控件支持單元格格式選項，例如字符串、文本、數字、日期和時間的格式。

字符串

雖然格式字符串與 Excel 數字格式兼容，但仍然存在一些值得注意的例外。格式字符串由一個或多個用分號分隔的部分組成，可選地、部分指定顏色和條件。

下面的示例演示如何顯示最多三位小數的數字。

#.###

下面的示例演示如何以綠色顯示正數或零，以紅色顯示負數。

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

下面的示例演示如何以綠色顯示正數，以紅色顯示負數，如果數字為零，則以藍色顯示“零”文本。

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

以下示例與前一個示例相同，不同之處在于以紅色顯示單元格中任何可能的文本。

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

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

<script src="http://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: "http://demos.telerik.com/kendo-ui/service/export"
},
pdf: {
proxyURL: "http://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%。