2011-12-13 23 views
7

estoy tratando de crear algún tipo de formateador reutilizable para la columna jqGrid, Me gustaría crear formateador personalizado donde soy capaz de pasar datos adicionales, algo similar a este código:¿Cómo pasar variables adicionales al formateador jqGrid?

function imageLinkFormatter(cellval,options,rowObject,icon,link_class,link_action){ 
    var img='<span class="ui-icon '+icon+' icon"><span/>';  
    var link='<a href="#'+link_action+'/id/'+rowObject.id+'" class="'+link_class+'" rel="'+rowObject.id+'">'+img+'</a>'; 
    return link; 
    } 

Respuesta

10

Es probablemente un malentendido. La interfaz de custom formatter está definida por jqGrid. Para tener parámetros adicionales en el formateador personalizado, debe modificar el código fuente de jqGrid.

La buena noticia es que realmente no necesita extender el formateador personalizado estándar. En lugar de eso, probablemente solo desee compartir el código. Así se puede definir el código común como la función como

function imageLinkFormatter(cellval, options, rowObject, icon, link_class, link_action) { 
    var img = '<span class="ui-icon ' + icon + ' icon"><span/>';  
    var link = '<a href="#' + link_action + '/id/' + rowObject.id + '" class="' + 
     link_class + '" rel="' + rowObject.id + '">' + img + '</a>'; 
    return link; 
} 

y llamar a la función desde el formateador personalizado de las diferentes columnas de la cuadrícula con parámetros adicionales.

colModal: [ 
    {name: 'col1', formatter: function (cellvalue, options, rowObject) { 
      return imageLinkFormatter(cellvalue, options, rowObject, 
       'ui-icon-pencil', 'edit-link-class', 'Edit'); 
     }}, 
    {name: 'col2', formatter: function (cellvalue, options, rowObject) { 
      return imageLinkFormatter(cellvalue, options, rowObject, 
       'ui-icon-plus', 'add-link-class', 'Add'); 
     }}, 
    {name: 'col2', formatter: function (cellvalue, options, rowObject) { 
      return imageLinkFormatter(cellvalue, options, rowObject, 
       'ui-icon-trash', 'del-link-class', 'Delete'); 
     }}, 
    ... 
] 

¿Es lo que quieres?

+0

Gracias por la respuesta y la explicación, pensé que tengo para extender formateador personalizado pero esto es Solución perfecta. Saludos – stawek

+0

@stawek: ¡De nada! – Oleg

6

definen formatoptions en la definición de columna

colModal: [ 
    {name: 'col1', 
    formatter: imageLinkFormatter, 
    formatoptions: { 
     icon: 'ui-icon-pencil', 
     link_class: 'edit-link-class', 
     action: 'Edit' 
    }}, 
    {name: 'col2', formatter: imageLinkFormatter, formatoptions: {icon: 'ui-icon-plus', link_class: 'add-link-class', action: 'Add'}}, 
    {name: 'col3', formatter: imageLinkFormatter, formatoptions: {icon: 'ui-icon-trash', link_class: 'del-link-class', action: 'Add'}} 
    ... 
] 

y luego se puede acceder a ella en el interior de formateador personalizado

function imageLinkFormatter(cellval, options, rowObject) { 
    var img = '<span class="ui-icon ' + options.colModel.formatoptions.icon + ' icon"><span/>'; 
    var link = '<a href="#' + options.colModel.formatoptions.action + '/id/' + rowObject.id + '" class="' + 
     options.colModel.formatoptions.link_class + '" rel="' + rowObject.id + '">' + img + '</a>'; 
    return link; 
} 
Cuestiones relacionadas