Botón de eliminación personalizada en jqGrid

Question

Me gustaría implementar mi propia funcionalidad de eliminación en jqGrid. Actualmente estoy usando la interfaz de usuario incorporada (seleccione la fila, presione el botón de papelera en el pie de página, confirme) pero preferiría tener un botón de eliminar en cada fila e implementar mi propia IU para confirmarlo.

No veo nada en el API que me permita disparar una eliminación al servidor - solo delRowData, que lo elimina en el cliente. Se puede hacer esto?

(Estoy usando el ASP.NET component, FWIW).

Answer 1

@Erik me puso en el camino correcto en este caso. Su solución funciona, pero conserva la interfaz de usuario de confirmación emergente pseudomodal existente, que quería evitar.

Tampoco capitaliza los servicios que JqGrid ASP.NET component proporciona. El componente realmente se encarga de todas las operaciones de CRUD, siempre que esté conectado a una fuente de datos configurada correctamente (ObjectDataSource, SqlDataSource, etc.).

Esta pieza que faltaba para mí era la mecánica detrás de las operaciones CRUD del componente. Por hurgando con Fiddler pude ver que los Mensajes de los datos correspondientes a la misma página, con la ClientID del objeto jqGrid en la cadena de consulta:

MyPage.aspx?jqGridID=ctl00_ctl00_Content_Content_MyJqGrid

para borrar, el contenido del puesto son como @ Erik describe:

oper=del&id=18

por lo que he podido duplicar la operación en mi misma para que conserven el control completo de todo el proceso:

$(".DeleteButton", grid).click(function(e) { 
    var rowID = getRowID(this); 
    $(grid).setSelection(rowID, false); 
    if (confirm('Are you sure you want to delete this row?')) { 
     var url = window.location + '?jqGridID=' + grid[0].id; 
     var data = { oper: 'del', id: rowID }; 
     $.post(url, data, function(data, textStatus, XMLHttpRequest) { 
      $(grid).trigger("reloadGrid"); 
     }); 
    } else { 
     $(grid).resetSelection(); 
    } // if 
}); // click 

getRowID = function(el) { 
    return $(el).parents("tr").attr("id"); 
}; 

Answer 2

No existe una parte del componente jqGrid básico que maneje la eliminación del lado del servidor; incluso si utiliza la función de eliminación integrada, no la elimina del lado del servidor, debe manejarla usted mismo. Pero aquí es cómo configurarlo para que el script se llama cuando alguien hace clic en su encargo botón de borrar:

// your custom button is #bDelete 
$("#bDelete").click(function(){ 

    // Get the currently selected row 
    toDelete = $("#mygrid").jqGrid('getGridParam','selrow'); 

    // You'll get a pop-up confirmation dialog, and if you say yes, 
    // it will call "delete.php" on your server. 
    $("#mygrid").jqGrid(
     'delGridRow', 
     toDelete, 
      { url: 'delete.php', 
      reloadAfterSubmit:false} 
    ); 
}); 

La siguiente información es pasada a través de POST a la URL de eliminación

Array 
(
    [oper] => del 
    [id] => 88 
) 

donde id es, obviamente, el id pasaste a la función en este caso, el valor de toDelete.

De hecho acabo de hacer esto para mi propio proyecto, en respuesta a su pregunta, aunque tenía una vaga idea de cómo hacerlo antes de ver la pregunta. Entonces ... ¡gracias por hacerme llegar!

Answer 3

Otra solución es el programa Haga clic en el ícono de eliminar (si está presente). La identificación para el icono de eliminar (en realidad, un div) es "del_ [GridId]". Puede que esta no sea una solución totalmente sólida, ya que pueden cambiar esa identificación. Pero obtienes exactamente el mismo comportamiento (y también el modal de confirmación más agradable).

Ejemplo:

$('#MyButton').click(function() { $('#del_' + gridId).click(); });