Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
wiki:custom_formatter [2009/08/10 13:24] tony |
wiki:custom_formatter [2017/12/12 17:13] (current) admin |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Custom Formatter ====== | ||
+ | You can define your own formatter for a particular column. Usually this is a function. When set in the formatter option this should not be enclosed in quotes and not entered with () - show just the name of the function.For example, | ||
+ | |||
+ | <code javascript> | ||
+ | <script> | ||
+ | jQuery("#grid_id").jqGrid({ | ||
+ | ... | ||
+ | colModel: [ | ||
+ | ... | ||
+ | {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter}, | ||
+ | ... | ||
+ | ] | ||
+ | ... | ||
+ | }); | ||
+ | function currencyFmatter (cellvalue, options, rowObject) | ||
+ | { | ||
+ | // do something here | ||
+ | return new_format_value | ||
+ | } | ||
+ | </script> | ||
+ | </code> | ||
+ | |||
+ | ===== Definition and parameters ===== | ||
+ | |||
+ | To the custom formatter are passed the following parameters: | ||
+ | |||
+ | <code javascript> | ||
+ | function myformatter ( cellvalue, options, rowObject ) | ||
+ | { | ||
+ | // format the cellvalue to new format | ||
+ | return new_formated_cellvalue; | ||
+ | } | ||
+ | </code> | ||
+ | |||
+ | <note>Note the return in the function. This function should always return a value in order to work correctly. </note> | ||
+ | |||
+ | * cellvalue - is the value to be formatted | ||
+ | * options - is an object containing the following element | ||
+ | * options : { rowId: rid, colModel: cm} where rowId - is the id of the row colModel is the object of the properties for this column getted from colModel array of jqGrid | ||
+ | * rowObject - is a row data represented in the format determined from datatype option. If we have datatype: xml/xmlstring - the rowObject is xml node,provided according to the rules from xmlReader If we have datatype: json/jsonstring - the rowObject is array, provided according to the rules from jsonReader | ||
+ | \\ \\ | ||
+ | ===== Unformatting ===== | ||
+ | |||
+ | As mentioned in [[Predefined Formatter]] chapter all predefined types are compatible with the editing modules. This means that the numbers, links, e-mails, etc., are converted so that they can be edited correctly. Also the methods (like getRowData and getCell) that get data, used this unformat in order to get the original value. | ||
+ | The question is: What to do if we use a custom formatter function and want to to have the original value back if we use editing or methods getRowData and getCell? | ||
+ | |||
+ | The answer is: You can use your own custom unformatter function to do that. This function can be used in colModel | ||
+ | |||
+ | Show image and edit image's path: | ||
+ | |||
+ | <code javascript> | ||
+ | <script> | ||
+ | jQuery("#grid_id").jqGrid({ | ||
+ | ... | ||
+ | colModel: [ | ||
+ | ... | ||
+ | {name:'price', index:'price', width:60, align:"center", editable: true, formatter:imageFormat, unformat:imageUnFormat}, | ||
+ | ... | ||
+ | ] | ||
+ | ... | ||
+ | }); | ||
+ | |||
+ | function imageFormat( cellvalue, options, rowObject ){ | ||
+ | return '<img src="'+cellvalue+'" />'; | ||
+ | } | ||
+ | function imageUnFormat( cellvalue, options, cell){ | ||
+ | return $('img', cell).attr('src'); | ||
+ | } | ||
+ | </script> | ||
+ | </code> | ||
+ | |||
+ | To the custom unformat function are passed the following parameters: | ||
+ | * cellvalue - is the value to be unformated (pure text). | ||
+ | * options - is an object containing the following element | ||
+ | * options : { rowId: rid, colModel: cm} where rowId - is the id of the row colModel is the object of the properties for this column getted from colModel array of jqGrid | ||
+ | * cellobject - is a jQuery cell object. This object can be used to obtain different things from the cell element - by example jQuery(cellobject).html() can be used to get the html content instead of the text. | ||
+ | |||
+ | ===== Example ===== | ||
+ | |||
+ | Below we will simulate partial currency formatter using a custom format and unformat functions | ||
+ | |||
+ | <code javascript> | ||
+ | <script> | ||
+ | jQuery("#grid_id").jqGrid({ | ||
+ | ... | ||
+ | colModel: [ | ||
+ | ... | ||
+ | {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter, unformat:unformatCurrency}, | ||
+ | ... | ||
+ | ] | ||
+ | ... | ||
+ | }); | ||
+ | |||
+ | function currencyFmatter (cellvalue, options, rowObject) | ||
+ | { | ||
+ | |||
+ | return "$"+cellvalue; | ||
+ | } | ||
+ | function unformatCurrency (cellvalue, options) | ||
+ | { | ||
+ | |||
+ | return cellvalue.replace("$",""); | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | </code> | ||
+ | |||
+ | If the value that is inserted or updated in the grid is 123.00, the in the grid it will be displayed as: $123.00; | ||
+ | When we use getRowData or getCell methods or any editing module the value for this column will be 123.00 | ||
+ | |||
+ | ===== Creating common formatter function===== | ||
+ | There are times where you maybe want to use your custom format/unformat functions in many places into the code. This of course can be done defining the functions as example above. | ||
+ | We have designed the formatter module so that it can be easy extended from the developer and doing it so make the development process easy. | ||
+ | Below we will discuss how to make your own formatter functions to be visible all into the code. \\ \\ | ||
+ | After loading the jqGrid Java Script files you can define in script tag the following (or simple create your own file and include it into the head section) | ||
+ | <code javascript> | ||
+ | <script type="text/javascript"> | ||
+ | jQuery.extend($.fn.fmatter , { | ||
+ | currencyFmatter : function(cellvalue, options, rowdata) { | ||
+ | return "$"+cellvalue; | ||
+ | } | ||
+ | }); | ||
+ | jQuery.extend($.fn.fmatter.currencyFmatter , { | ||
+ | unformat : function(cellvalue, options) { | ||
+ | return cellvalue.replace("$",""); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | </code> | ||
+ | |||
+ | Then in your code you just need to do: | ||
+ | <code javascript> | ||
+ | <script> | ||
+ | jQuery("#grid_id").jqGrid({ | ||
+ | ... | ||
+ | colModel: [ | ||
+ | ... | ||
+ | {name:'price', index:'price', width:60, align:"center", editable: true, formatter:'currencyFmatter'}, | ||
+ | ... | ||
+ | ] | ||
+ | ... | ||
+ | }); | ||
+ | </code> | ||
+ | Note that in this case you will not need to specify the unformat function. |