Acción posterior personalizada de jQGrid

Tengo una gran muestra de edición en línea con jQGrid http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin.htm Hay dos acciones personalizadas Editar y Eliminar.

Quiero agregar una Acción en línea personalizada más, vamos a llamarlo ToggleOnline. En esta acción, quiero publicar todas las celdas de la grilla en el controlador. Básicamente será una especie de acción de edición, pero establecerá algunos valores predeterminados en algunas columnas.

Los botones en línea se agregaron así:

{ name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions', formatoptions: { keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing. delOptions: myDelOptions } } 

que agregar el botón adicional personalizado que estaba usando evento loadComplete:

 loadComplete: function(){ debugger; var ids = jQuery("#Grid1").getDataIDs(); for(var i=0;i<ids.length;i++){ var cl = ids[i]; custom = ""; jQuery("#Grid1").setRowData(ids[i], { act: custom }) } } 

pero el botón personalizado no aparece en absoluto. Y también necesito de alguna manera publicar datos de fila y también necesito especificar el nombre de acción personalizado (oper) para manejar esta acción en el servidor.

Actualicé la demostración por ti. Ahora el http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm hace lo que necesita. (Eliminé del código la segunda grilla para mantener el código más pequeño):

enter image description here

Algunos comentarios a la implementación. El formateador de acciones agrega elementos de “botones de acción” dentro de un div. Cada “botón de acción” tiene el marcado HTML como el siguiente

 

Así que para tener el aspecto del botón personalizado cerca de los “botones de acción” originales, lo hago dentro de loadComplete para lo siguiente:

 loadComplete: function () { var grid = $(this), iCol = getColumnIndexByName(grid,'act'); // 'act' - name of the actions column grid.children("tbody") .children("tr.jqgrow") .children("td:nth-child("+(iCol+1)+")") .each(function() { $("
", { title: "Custom", mouseover: function() { $(this).addClass('ui-state-hover'); }, mouseout: function() { $(this).removeClass('ui-state-hover'); }, click: function(e) { alert("'Custom' button is clicked in the rowis="+ $(e.target).closest("tr.jqgrow").attr("id") +" !"); } } ).css({"margin-left": "5px", float:"left"}) .addClass("ui-pg-div ui-inline-custom") .append('') .appendTo($(this).children("div")); }); }

dónde

 var getColumnIndexByName = function(grid,columnName) { var cm = grid.jqGrid('getGridParam','colModel'), i=0,l=cm.length; for (; i 

Puede cambiar el ícono del botón personalizado de 'ui-icon-document' y cambiar el código del evento click manejar lo que necesita Le mostré cómo puede obtener el rowid. Al usarlo, puede usar el método getRowData para obtener el contenido de otras celdas de la fila.

ACTUALIZADO: la versión actual de jqGrid gratuito es compatible con una forma sencilla de implementar botones personalizados. Vea la demostración .