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:59] 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, cellobject) | + | |
| - | { | + | 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> | ||
| Line 134: | 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 140: | 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. |
