He añadido un botón de borrar para cada fila en mi jqGrid. Ahora necesito agregar funcionalidad a los botones. Cada botón tiene que eliminar la fila que es en y a eliminar los datos desde el servidor. ¿Cómo puedo hacer esto? Aquí está mi código hasta el momento:

var lastsel;
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '@Url.Action("Category1List")',
datatype: 'json',
mtype: 'GET',
colNames: ['Navn', 'Slet'],
colModel: [
{ name: 'Navn', index: 'Navn', width: 50,edittype: 'text', align: 'center', editable: true , key: true },
{ name: 'act', index: 'act', width: 75, sortable: false}],
gridComplete: function () {
var ids = jQuery("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<input style='height:22px;width:90px;' type='button' value='Slet' onclick=\"jQuery('#list').deleteRow('" + cl + "');\"  />";
jQuery("#list").jqGrid('setRowData', ids[i], { act: be });
}
},
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: '@Url.Action("GridSave")',
rowNum: 50000,
rowList: [5, 10, 20, 50],
pager: '#page',
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
height: "500px"
});
}); 
  • es Slet el valor de su botón eliminar
InformationsquelleAutor Timsen | 2011-08-19

2 Comentarios

  1. 2

    Puede utilizar delGridRow método antes de ejemplo. Para ello se puede sustituir en el código jQuery('#list').deleteRow( a jQuery('#list').jqGrid('delGridRow',

    Que usted puede considerar para el uso de formatter:'actions': ver aquí, aquí y aquí. Una forma más de personalizar implementar botones encontrará aquí.

    ACTUALIZADO: Para enviar información adicional durante la operación de eliminación se puede utilizar delData parámetro de delGridRow método:

    be = "... onclick=\"jQuery('#list').deleteRow('" + cl +
    ",{delData:{Navn:'"+ jQuery("#list").jqGrid('getCell',cl,'Navn')+ "'});\"  />";

    La expresión jQuery("#list").jqGrid('getCell',cl,'Navn') va a obtener el valor de la ‘Navn’ columna y {delData:{Navn:'NavnValue'} agregará Navn=NavnValue parámetro para el envío de datos al servidor.

    ACTUALIZADO el 2 de: Su principal problema fue que se utiliza en el proyecto de demostración otra versión del código que has publicado en tu pregunta. La demo que ha

    ... onclick=\"jQuery('#list').jqGrid('delGridRow','" + rows + "',

    lugar de

    ... onclick=\"jQuery('#list').jqGrid('delGridRow','" + cl + "',

    que es el primer gran error. El rows variable se establece como var rows = jQuery("#list").jqGrid('getGridParam','selrow'); dentro de gridComplete. En el momento en que no hay una fila seleccionada, rows = null y lugar onclick=\"jQuery('#list').jqGrid('delGridRow','null' para todos los botones.

    El siguiente problema importante: usted debe cambiar el nombre de

    public ActionResult deleteRow(String ProductId)

    a

    public ActionResult deleteRow(String id)

    o uso prmNames: {id: 'ProductId'} adicionales jqGrid parámetro.

    Otros problemas comunes:

    • Debe modificar _Layout.cshtml archivo. Debe quitar <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> porque incluyen otro versión de jQuery (jquery-1.5.2.min.js) en el Index.cshtml
    • Debe cerrar <table id="list"> (agregar ) en la Index.cshtml.
    • Si quieres tener el localizador en la red (que se utiliza jQuery("#list").jqGrid('navGrid', "#page", ...) debe 1) agregar <div id="page"></div> en el Index.cshtml y añadir parámetro pager: '#page' a la jqGrid.
    • Usted tiene que limpiar el código HTML que desea utilizar. Por ejemplo, usted debe quitar </div> desde el final de Index.cshtml. Uno de los más </div> al final de @RenderSection("Main", required: false)</div> (en el _Layout.cshtml archivo) debe ser también eliminado.
    • Para ver el localizador en el ancho correcto debería incluir en la _Layout.cshtml archivo de la siguiente revisión

      <style type="text/css">input.ui-pg-input { width: auto; }</style>

    • Debe incluir, al menos, jQuery UI CSS y ui.jqgrid.css por ejemplo, en el _Layout.cshtml de archivo:

    Yo recomendaría usted para reemplazar jquery-1.5.2.min.js a jquery-1.6.2.min.js. La última versión de vsdoc archivos siempre se puede cargar desde aquí. De la misma manera que la última versión (actualmente 1.8.16) de jQuery UI es también recomendable.

    Yo recomendaría usted para descargar el proyecto de demostración de VS2010 que he creado para la respuesta y utilizarlo como plantilla para su proyecto. Usted puede cambiar fácilmente el código para utilizar la maquinilla de Afeitar.

    • Bueno, ahora tengo que responder y eliminar filas, pero ahora tengo que conseguir que se elimine un crudo por dentro de mi servidor, por lo que necesito enviar «Navn» con mis eliminar operación
    • Me ofrecí mi respuesta con información adicional.
    • El problema que tengo es que no puedo sendt los datos más a mi controlador.
    • Usted debe describir el problema más exactamente. ¿Realmente no enviar los datos o el controlador no leer los datos? Hasta ahora no incluir el lado del servidor de código en su pregunta. Usted puede examinar el tráfico HTTP con respecto a Fiddler o Firefox.
    • bueno, lo siento, lo que quiero es enviar SellerId valor en el controlador cuando yo pulse borrar en mi jqgrid, así que puede eliminar de mi controlador. Al igual que lo hacemos cuando u están haciendo editar
    • Yo no veo ninguna SellerId en el jqGrid definición. Si usted llena jqGrid con SellerId como el id (rowid), el id valor será automáticamente enviado al servidor. Esto será hecho para Eliminar la operación de la misma manera como para Editar o Agregar operaciones. Usted puede cambiar el nombre de la id parámetro para SellerId con respecto a prmNames: {id:"SellerId"} parámetro de jqGrid. Acabo de comprobar lo que va a ser en la actualidad se envía al servidor. Si usted quiere tener los datos en otro formato se debe describir en qué formato se necesitan los datos.
    • Usted puede leer mi nuevo código de arriba, donde me tienen algunas diferencias
    • Usted puede leer mi nuevo código de arriba, donde tengo algunas diferencias, ahora ir abriendo estoy clic en el botón delete en una fila, os envío la referencia a delGridRow dentro de mi clase de controlador. Controlador de clase de Cadena SellerKey como un entrante parámetro pero cuando estoy ejecutando la cuadrícula mi sellerkey parámetro dentro de un controlador es nulo donde delGridRow se llama
    • OK, ahora que he encontrado el código. Por favor, añadir siempre el código a tu pregunta, en lugar de escribir la respuesta a su propia pregunta. Para resolver su problema, usted simplemente debe cambiarle el nombre SellerKey parámetro del controlador de acción para id o para agregar prmNames: {id:"SellerKey"} parámetro para el jqGrid. Por cierto que no es necesario el nombre de la acción del controlador como delGridRow. El delGridRow es jqGrid método que trabajar en su código de cliente. El url parámetro de delGridRow método debe ser establecido como la acción del controlador.
    • Gracias por respuestas rápidas, intenté usar, construido en el id, pero todavía no el trabajo, en la depuración, puedo ver que en el controlador de sellerkey valor es todavía null
    • ¿Se trató de Fiddler o Firefox? Es importante saber que cuando tiene el problema: en el lado del servidor o en el lado del cliente. Además, siempre es útil para abrir el código fuente de la página en el explorador web. Si la acción de eliminación en el controlador va a ser llamado correctamente, usted puede tener algunos problemas en el MVC de enrutamiento (mira MapRoute que se utiliza en la RegisterRoutes).
    • Es un locla de SQL server que tengo instalado, cuando me veo en el código fuente, yo puede que las filas de la propiedad es null, por lo jqgrid no obtener el valor de una fila seleccionada
    • Sólo el seguimiento de tráfico HTTP (con Fiddler por ejemplo) puede le da suficiente información si usted tiene el problema en el servidor o en la parte del cliente. Si usted sube en algún lugar de su proyecto de prueba de que yo pudiera depurar en mi computadora y decir dónde has cometido un error.
    • aquí es una simple demo, el diseño no es bonita, pero toda la funcionalidad está ahí, enfermo esperanza ull finde algún tipo de solución de oleg, im que vayan a ser pelear con todo mi fin de semana. 2shared.com/file/5cQvo8Fd/MvcApplication3.html
    • oh, casi lo olvido, u puede utilizar la base de datos northwind con ella
    • Me ofrecí mi respuesta.
    • Muchas gracias, fue muy útil
    • Usted es bienvenido!
    • Una pregunta más, ahora quiero hacer los botones de hipervínculos con la misma funcionalidad ya que los botones se ve muy feo en la red, hay alguna manera de hacerlo?

  2. 0

    intentar

    $("#classOfYourButton").click(function(e){
    e.stopPropagation();
    $(this).closest("tr").remove();
    });
    • ¿qué va a hacer?
    • agregar una clase al botón eliminar y sustituir ese nombre con classOfYourButton en haga clic en le van a quitar el tr

Dejar respuesta

Please enter your comment!
Please enter your name here