首页 > 代码库 > jqwidgets: Grid Cells Formatting

jqwidgets: Grid Cells Formatting

2024-08-05 19:48:01   218人阅读

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

$("#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: 
"d" - decimal numbers. 
"f" - floating-point numbers. 
"n" - integer numbers. 
"c" - currency numbers. 
"p" - percentage numbers. 

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: 

// 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" 

Date format strings: 

"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. 
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 }
    ]
});


jqwidgets: Grid Cells Formatting


联系
我们