Cómo llegar columna de índice de uso de formateador personalizado.

En la columna «Impuesto» trato uso de formateador personalizado. Necesidad de recibir un valor de índice de columna y de fila, el valor del índice. Puedo conseguir irow parámetro irow = opciones.rowid pero el problema con la obtención de icol parámetro.

Este es mi ejemplo:

    var $grid = $("#grid");
$grid.jqGrid({
datatype: "local",
height: 250,
colNames:[' ', 'Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name: 'myac', width:80, fixed:true, frozen: true, sortable:false, resize:false, formatter:'actions',
formatoptions:{keys:true}},
{name:'id',index:'id', width:60, sorttype:"int", frozen: true},
{name:'invdate',index:'invdate', width:90, sorttype:"date", frozen: true, editable: true},
{name:'name',index:'name', width:100, editable: true, editable: true},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", editable: true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable: true,
formatter: function(cellvalue, options) {
var id = options.rowId;
var col;
return id ?
'<span class="editable" data-id="' + id  + '" data-col="' + col + '">$' + cellvalue + '</span>' :
cellvalue;
}
},      
{name:'total',index:'total', width:80,align:"right",sorttype:"float", editable: true},      
{name:'note',index:'note', width:150, sortable:false, editable: true}       
],
rowNum:10,
width:700,
rowList:[10,20,30],
pager: '#pager',
sortname: 'invdate',
viewrecords: true,
sortorder: "date",
shrinkToFit: false,
rownumbers: true,
caption: "Frozen Column with Group header and custom cell formatter",
height: 'auto',
frozen : true
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++) $grid.jqGrid('addRowData',i+1,mydata[i]);
$grid.jqGrid('setGroupHeaders', {
useColSpanStyle: true, 
groupHeaders:[
{startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'},
] 
});
$grid.jqGrid('setFrozenColumns');

Uso haga clic en la celda evento puedo conseguir col y el índice de fila.

    $grid.click(function(e) {
var el = e.target;
if (el.nodeName !== "TD") {
el = $(el,this.rows).closest("td");
}
var iCol = parseInt($(el).index());
var row = $(el,this.rows).closest("tr.jqgrow");
var rowId = parseInt(row[0].id);
alert ("rowId="+rowId+"; iCol="+iCol+";");
  • Yo no creo que hay un faciity para que en el formateador, pero la columna de índice es el índice en el colModel matriz. Por lo que el índice de columna de myac es 0, y el índice de columna de impuesto es de 5.
  • debido a que el uso de la rownumbers: true opción colModel será modificada por la jqGrid y la columna "rn" se inserta en la primera columna. Por lo que el índice de columna de la "tax" columna (el índice de la columna en colModel) será de 6.
  • es posible obtener icol valor?
InformationsquelleAutor v2p | 2014-05-06

2 Comentarios

  1. 3

    Primero de todo, por favor no utilice nunca addRowData para hacer el llenado inicial de jqGrid tener datatype: "local". En lugar de que se puede mover la línea con var mydata = [...]; en el principio de su código y agregar data: mydata a la lista de parámetros de jqGrid.

    Ahora sobre tu pregunta principal: options parámetro del formateador personalizado tiene 4 propiedades:

    • grid propiedad – sujetar la cuerda con representar a la identificación de la cuadrícula. Es "grid" en su caso.
    • pos de la propiedad – es el índice de la columna en colModel. Será 6 en su caso. Así options.pos es la respuesta a su pregunta.
    • rowId la propiedad es el rowid de la fila que se construirá ahora
    • colModel la propiedad es el objeto que representan el elemento im colModel con el índice options.pos.

    Además jqGrid inicializar this para el elemento DOM de la red exactamente como en el caso de llamar a las devoluciones de llamada. Así $(this).jqGrid("getGridParam"), por ejemplo, o this.p conseguirá que las opciones de jqGrid.

    • Brillante respuesta! Muchas gracias!
    • Usted es bienvenido!
    • Oleg, cómo obtener los parámetros de iCol uso cellattr: function( rowId, val, rowObject, cm, rdata) { var iCol;}
    • Yo no soy sere porque necesita iCol. Es más seguro utilizar el nombre de la columna (el valor de la name propiedad de la columna correspondiente en la colModel. El problema es que el índice de columna podría ser cambiado por ejemplo, mediante el uso de columnChooser o en caso de uso de sortable: true opción de jqGrid (permite al usuario cambiar la columna de pedidos por drag&drop de los encabezados de columna). En general, usted puede utilizar cm.name para obtener el nombre de la columna y usted puede encontrar iCol índice en this.p.colModel matriz.
    • Esto es para mi nueva pregunta por favor consulte. Gracias de antemano!
  2. 0

    Hay una función de devolución de llamada de jqgrid : onselectcell. En que usted puede conseguir col índice

    onCellSelect : function(rowId, iCol, cellcontent,e) {
    var col = $("#grid").jqGrid("getGridParam", "colModel");
    var colName = col[iCol]['index'];
    }
    • Esto no es exactamente lo que necesito es un ejemplo de un evento todavía utiliza esta analogía onCellSelect mi ejemplo mediante el evento click. Me gustaría definir icol en la formación de la tabla de uso de formateador personalizado

Dejar respuesta

Please enter your comment!
Please enter your name here