Differences

This shows you the differences between two versions of the page.

Link to this comparison view

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.

QR Code
QR Code wiki:custom_formatter (generated for current page)