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 09:50] tony |
wiki:custom_formatter [2017/12/12 17: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 133: | Line 138: | ||
| colModel: [ | colModel: [ | ||
| ... | ... | ||
| - | {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter}, | + | {name:'price', index:'price', width:60, align:"center", editable: true, formatter:'currencyFmatter'}, |
| ... | ... | ||
| ] | ] | ||
| Line 139: | Line 144: | ||
| }); | }); | ||
| </code> | </code> | ||
| - | Note that in this case you will not to specify the unformat function. | + | Note that in this case you will not need to specify the unformat function. |
