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/10/18 12:15] tony |
wiki:custom_formatter [2017/12/12 19:13] (current) admin |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Custom Formatter ====== | ====== 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, | 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> | <code javascript> | ||
| <script> | <script> | ||
| Line 47: | Line 47: | ||
| The answer is: You can use your own custom unformatter function to do that. This function can be used in colModel | 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> | <code javascript> | ||
| Line 54: | Line 56: | ||
| colModel: [ | colModel: [ | ||
| ... | ... | ||
| - | {name:'price', index:'price', width:60, align:"center", editable: true, unformat:myunformatfunc}, | + | {name:'price', index:'price', width:60, align:"center", editable: true, formatter:imageFormat, unformat:imageUnFormat}, |
| ... | ... | ||
| ] | ] | ||
| ... | ... | ||
| }); | }); | ||
| - | function myunformatfunc ( cellvalue, options) | + | |
| - | { | + | function imageFormat( cellvalue, options, rowObject ){ |
| - | // do something here | + | return '<img src="'+cellvalue+'" />'; |
| - | return unformated_value; | + | } |
| - | } | + | function imageUnFormat( cellvalue, options, cell){ |
| + | return $('img', cell).attr('src'); | ||
| + | } | ||
| </script> | </script> | ||
| </code> | </code> | ||
| To the custom unformat function are passed the following parameters: | To the custom unformat function are passed the following parameters: | ||
| - | * cellvalue - is the value to be unformated | + | * cellvalue - is the value to be unformated (pure text). |
| * options - is an object containing the following element | * 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 | * 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 ===== | ===== Example ===== | ||
| Line 96: | Line 101: | ||
| { | { | ||
| - | return $(cellvalue).text().replace("$",""); | + | return cellvalue.replace("$",""); |
| } | } | ||
| Line 105: | Line 110: | ||
| When we use getRowData or getCell methods or any editing module the value for this column will be 123.00 | When we use getRowData or getCell methods or any editing module the value for this column will be 123.00 | ||
| - | <note>It is important to know, as seen in the example, that to the format function we pass the value as parameter, but to the unformat function we pas the jQuery-ed element. </note> | + | ===== 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. | ||
