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: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.

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