jqwidgets: Grid Cells Formatting

[url]http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cellsformatting.htm[/url]

jqxGrid

The cellsformat property can be used for applying a formatting to the cell values. In the code example below is illustrated how to apply a custom formatting to a column with Date values and to a column with Numeric values.
$("#jqxgrid").jqxGrid(
{
width: 670,
height: 450,
source: source,
theme: theme,
sortable: true,
columns: [
{ text: 'Ship Name', datafield: 'ShipName', width: 250 },
{ text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
{ text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
{ text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
{ text: 'Ship City', datafield: 'ShipCity', width: 100 },
{ text: 'Ship Country', datafield: 'ShipCountry', width: 100 }
]
});

Number format strings:
[b]"d" - decimal numbers.
"f" - floating-point numbers.
"n" - integer numbers.
"c" - currency numbers.
"p" - percentage numbers. [/b]

For adding decimal places to the numbers, add a number after the formatting string.
For example: "c3" displays a number in this format $25.256
Built-in Date formats:

[b]// short date pattern
"d" - "M/d/yyyy",
// long date pattern
"D" - "dddd, MMMM dd, yyyy",
// short time pattern
"t" - "h:mm tt",
// long time pattern
"T" - "h:mm:ss tt",
// long date, short time pattern
"f" - "dddd, MMMM dd, yyyy h:mm tt",
// long date, long time pattern
"F" - "dddd, MMMM dd, yyyy h:mm:ss tt",
// month/day pattern
"M" - "MMMM dd",
// month/year pattern
"Y" - "yyyy MMMM",
// S is a sortable format that does not vary by culture
"S" - "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss" [/b]

Date format strings:

[b]"d"-the day of the month;
"dd"-the day of the month;
"ddd"-the abbreviated name of the day of the week;
"dddd"- the full name of the day of the week;
"h"-the hour, using a 12-hour clock from 1 to 12;
"hh"-the hour, using a 12-hour clock from 01 to 12;
"H"-the hour, using a 24-hour clock from 0 to 23;
"HH"- the hour, using a 24-hour clock from 00 to 23;
"m"-the minute, from 0 through 59;
"mm"-the minutes,from 00 though59;
"M"- the month, from 1 through 12;
"MM"- the month, from 01 through 12;
"MMM"-the abbreviated name of the month;
"MMMM"-the full name of the month;
"s"-the second, from 0 through 59;
"ss"-the second, from 00 through 59;
"t"- the first character of the AM/PM designator;
"tt"-the AM/PM designator;
"y"- the year, from 0 to 99;
"yy"- the year, from 00 to 99;
"yyy"-the year, with a minimum of three digits;
"yyyy"-the year as a four-digit number;
"yyyyy"-the year as a four-digit number.[/b]
Grid Cells Formatting Sample

$("#jqxgrid").jqxGrid(
{
width: 670,
height: 450,
source: source,
theme: theme,
sortable: true,
columns: [
{ text: 'Ship Name', datafield: 'ShipName', width: 250, sortable: false },
{ text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
{ text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
{ text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
{ text: 'Ship City', datafield: 'ShipCity', width: 100 },
{ text: 'Ship Country', datafield: 'ShipCountry', width: 100 }
]
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值