【jQwidgets】Grid Cells Formatting

﹏ヽ暗。殇╰゛Y 2022-08-05 17:30 309阅读 0赞

[http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cellsformatting.htm][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 }
        ]
    });

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