2011-09-05 6 views
6

Tengo un JQGrid con 2 columnas en las que llegaré al servidor y obtendré algunos datos, luego concatenaré algunas cadenas basadas en los filtros en el servidor y quiero configurar esto como título y también quiere cambiar los nombres de las columnas en función de esos filtros. ¿Hay alguna forma de establecer los nombres de las leyendas y las columnas en función del resultado de la acción del servidor?JQGrid set caption and column name

Respuesta

12

Me parece interesante su pregunta.

Podemos empezar con la simple cuadrícula:

$("#list").jqGrid({ 
    url: 'ColumnNamesAndTitelFromServer.json', 
    datatype: 'json', 
    loadonce: true, 
    colNames: ['Name', 'Email'], 
    colModel: [ 
     {name: 'name', width: 100}, 
     {name: 'email', width: 150} 
    ], 
    rowNum: 5, 
    rowList: [5, 10, 20], 
    pager: '#pager', 
    gridview: true, 
    rownumbers: true, 
    sortname: 'name', 
    sortorder: 'asc', 
    caption: 'Just simple local grid', 
    height: 'auto' 
}); 

y los datos JSON:

{ 
    "total": 1, 
    "page": 1, 
    "records": 2, 
    "rows": [ 
     {"id": "id1", "cell": ["John", "[email protected]"]}, 
     {"id": "id2", "cell": ["Michael", "[email protected]"]} 
    ] 
} 

vamos a recibir los siguientes resultados

enter image description here

(ver the demo)

Ahora que se extienden los datos JSON con nuestra información personalizada adicional:

{ 
    "total": 1, 
    "page": 1, 
    "records": 2, 
    "rows": [ 
     {"id": "id1", "cell": ["John", "[email protected]"]}, 
     {"id": "id2", "cell": ["Michael", "[email protected]"]} 
    ], 
    "userdata": { 
     "title": "Das ist der Titel bestimmt beim Server", 
     "columnNames": { 
      "name": "Die Name", 
      "email": "Die E-Mail" 
     } 
    } 
} 

En el ejemplo anterior que acabo de definir en userdata el título y los nombres de las columnas de la cuadrícula en lengua alemana. Para leer y utilizar el userdata podemos añadir el siguiente controlador loadComplete caso a la red:

loadComplete: function() { 
    var $grid = $(this), columnNames, name, 
     userdata = $grid.jqGrid('getGridParam', 'userData'); 

    if (userdata) { 
     if (userdata.title) { 
      $grid.jqGrid('setCaption', userdata.title); 
     } 
     if (userdata.columnNames) { 
      columnNames = userdata.columnNames; 
      for (name in columnNames) { 
       if (columnNames.hasOwnProperty(name)) { 
        $grid.jqGrid('setLabel', name, columnNames[name]); 
       } 
      } 
     } 
    } 
} 

Ahora la misma voluntad de rejilla se parece

enter image description here

(ver another demo)

+0

gracias funcionó perfectamente – Leoadell

+0

@Leoadell: ¡De nada! – Oleg