研究 Ext.Net Demo 时,经常能看到将 GridPanel 的某列添加 <Renderer Format="UsMoney" />",改变列的呈现。本文演示 Ext.Net 提供的常用数据格式函数。
Ext.Net 的 RendererFormat 枚举类型将一些常用的数据格式转换函数,也就是改变数据呈现的格式,变成枚举类型,以便重用。如下表所示:
函数枚举 |
说明 |
None |
无 |
Capitalize |
Converts the first character only of a string to upper case |
Date |
Parse a value into a formatted date using the specified format pattern |
DateRenderer |
Returns a date rendering function that can be reused to apply a date format multiple times efficiently format : String (optional) Any valid date format string (defaults to 'm/d/Y') |
DefaultValue |
Checks a reference and converts it to the default value if it's empty |
Ellipsis |
Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length defaultValue : String The value to insert of it's undefined (defaults to "") |
FileSize |
Simple format for a file size (xxx bytes, xxx KB, xxx MB) length : Number The maximum length to allow before truncating word : Boolean True to try to find a common work break |
HtmlDecode |
Convert certain characters (&, <, >, and ') from their HTML character equivalents |
HtmlEncode |
Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages |
Nl2br |
Converts newline characters to the HTML tag <br/> |
Number |
Formats the number according to the format string. examples (123456.789): 0 - (123456) show only digits, no precision 0.00 - (123456.78) show only digits, 2 precision 0.0000 - (123456.7890) show only digits, 4 precision 0,000 - (123,456) show comma and digits, no precision 0,000.00 - (123,456.78) show comma and digits, 2 precision 0,0.00 - (123,456.78) shortcut method, show comma and digits, 2 precision To reverse the grouping (,) and decimal (.) for international numbers, add /i to the end. For example: 0.000,00/i |
NumberRenderer |
Returns a number rendering function that can be reused to apply a number format multiple times efficiently |
Lowercase |
Converts a string to all lower case letters |
Plural |
Selectively do a plural form of a word based on a numeric value. For example, in a template, {commentCount:plural("Comment")} would result in "1 Comment" if commentCount was 1 or would be "x Comments" if the value is 0 or greater than 1 |
Round |
Rounds the passed number to the required decimal precision. singular : String The singular form of the word plural : String (optional) The plural form of the word (defaults to the singular with an "s") |
StripScripts |
Strips all script tags precision : Number The number of decimal places to which to round the first parameter's value |
StripTags |
Strips all HTML tags |
Substr |
Returns a substring from within an original string |
Trim |
Trims any whitespace from either side of a string start : Number The start index of the substring length : Number The length of the substring |
Undef |
Checks a reference and converts it to empty string if it is undefined |
Uppercase |
Converts a string to all upper case letters |
UsMoney |
Format a number as US currency |
EuroMoney |
Format a number as Euro currency |
代码如下所示:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script runat="server">1:
2: protected void Page_Load(object sender, EventArgs e)3: {
4: if (!X.IsAjaxRequest)5: {
6: DataTable dt = ExtNetRendererFormatDemo.DataSource.CreateDataSource();
7: this.Store1.DataSource = dt;8: this.Store1.DataBind();9: }
10: }
11:
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" Title="员工信息">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader IDProperty="EMPNO">
<Fields>
<ext:RecordField Name="EMPNO" />
<ext:RecordField Name="ENAME" />
<ext:RecordField Name="JOB" />
<ext:RecordField Name="MGR" />
<ext:RecordField Name="HIREDATE" Type="Date" DateFormat="Y-m-d" />
<ext:RecordField Name="SAL" />
<ext:RecordField Name="DEPTNO" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="员工编号" DataIndex="EMPNO">
<Renderer Format="None" />
</ext:Column>
<ext:Column Header="员工姓名" DataIndex="ENAME" />
<ext:Column Header="员工姓名" DataIndex="ENAME">
<Renderer Format="Capitalize" />
</ext:Column>
<ext:Column Header="职位" DataIndex="JOB" />
<ext:Column Header="上级" DataIndex="MGR">
</ext:Column>
<ext:DateColumn Header="出生日期" DataIndex="HIREDATE" Format="Y-m-d">
</ext:DateColumn>
<ext:DateColumn Header="出生日期" DataIndex="HIREDATE">
<Renderer Format="Date" />
</ext:DateColumn>
<ext:Column Header="工资$" DataIndex="SAL">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column Header="工资€" DataIndex="SAL">
<Renderer Format="EuroMoney" />
</ext:Column>
<ext:Column Header="部门编号" DataIndex="DEPTNO" />
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
</form>
</body>
</html>
运行界面:
说明:
1,两列“员工姓名”的区别,分别为全部大写和头字母大写;
2,两列“出生日期”的区别,日期格式不同;
3,两列“工作”的区别,分别为美元和欧元表示。