jquery - editable - jqgrid github

JQGrid Custom Formatter no funciona para la creación de botones

Question

Estoy usando el formateador de clientes de JQGrid para crear el botón pero no se muestra el botón.

function viewLineBtn(cellvalue, options, rowObject) {
    alert(cellvalue +","+options+","+rowObject);
    var rowid = options.rowid;
    var button = "<button class=/"viewLineItem/" id=" + rowid + ">View Line   Item</button>"
    $(''#'' + rowid).die();
    $(''#'' + rowid).live(''click'', function(rowId) {
        alert("hi");
        alert(rowId);
    });
}

En el método de alerta, estoy indefinido para esos parámetros, excepto el rowObject. Lo que me estoy perdiendo?

Answer 1

En primer lugar, creo que existe un malentendido acerca de cómo jqGrid usa el formateador personalizado. jqGrid construye todo el cuerpo jqGrid ( <tbody> ) como una cadena . Por defecto jqGrid coloca los datos de la celda directamente en la celda, compre usando el formateador, puede colocar otra cadena como el contenido de las celdas de la columna (el contenido de los elementos <td> ). Por lo tanto, el formateador personalizado debe devolver la cadena . viewLineBtn función viewLineBtn actual devuelve undefined .

El próximo problema jqGrid llama al formateador personalizado para todas las filas de la página , construye <tbody> , insértela en la grilla y solo después de eso puede hacer que el enlace sea un evento de click .

Es suficiente para vincular el controlador de eventos de click en el elemento de la cuadrícula ( <table> ) y se llamará al controlador de eventos al hacer clic en cualquier elemento interno de la cuadrícula debido al burbujeo del evento . jqGrid registra ya un controlador de eventos de un click . Por lo tanto, puede usar beforeSelectRow lugar de registrar su propio controlador de click . El segundo parámetro de la beforeSelectRow llamada beforeSelectRow es el objeto Evento del click . Por lo tanto, uno puede usar event.target para obtener toda la información requerida. No se requiere rowid para establecer. Especialmente su código actual le asigna el mismo valor de identificación en el botón como rowid ( id de la fila externa).

No es necesario asignar ningún id al botón y usar $(e.target).closest("tr.jqgrow").attr("id") lugar para obtener el rowid.

La definición final de la columna con el botón podría ser, por ejemplo, la siguiente:

{ name: "mybutton", width: 100, sortable: false,
    resizable: false, hidedlg: true, search: false, align: "center",
    fixed: true, viewable: false,
    formatter: function () {
        return "<button class=/"viewLineItem/">View Line Item</button>";
    }
}

y el código de beforeSelectRow podría ser

beforeSelectRow: function (rowid, e) {
    if ($(e.target).is("button.viewLineItem")) {
        alert($(e.target).closest("tr.jqgrow").attr("id"));
        return false; // don''t select the row on click on the button
    }
    return true; // select the row
}

Vea la demostración https://jsfiddle.net/OlegKi/x0j55z1m/