jqGrid - Funcionalidades - Editar (II)

En el post anteriores vimos cómo implementar “jqGrid”,   y algunas funcionalidades como ordenación, paginación, resize…

En esta entrada veremos:

·        Editar un registro en otra pantalla (dobleclick en la fila correspondiente)

·        Editar un registro desde la misma fila de la lista

·        Propiedades de Edición (link)

o   Tipos de campos (desplegables, texto, password , imagen …)

o   Atributos del campo (tamaño, longitud máxima, valores …)

o   Reglas de validación (requerido,  es un email, es un número,   es una fecha…)

o   Reglas de Validación personalizadas

Editar un registro en otra pantalla (dobleclick en la fila)

En este caso, lo único que tenemos que hacer es añadir el la función ondblClickRow del objeto jqGrid, en la cual, definiremos que al hacer doble click, se abrirá una nueva url, dónde le pasaremos por parámetro el Id de nuestro grid.

ondblClickRow: function(id, row, col){       var url = "@Url.Action("Details", "Controller")" + "/" + id;       window.location = url; },

Editar un registro desde la misma fila de la lista

En este caso, lo que tenemos que hacer es añadir la función onSelectRow del objeto jqGrid. Y añadir el método editRow a la lista, dónde le pasaremos los siguientes parámetros:

• Rowid --> Id de la fila a modificar
• Keys  --> Lo marcaremos a “true” para indicar que guardaremos con el “Enter” y saldremos con el “Esc”
• OnEditFunc --> lo marcaremos a “false”, la acción del Edición se define en “editurl”
• Succesfunc --> indicaremos una función, una vez se haga la modificación de la fila (en nuestro ejemplo, llamamos a la función reload, que hará un “refresco” del grid

editurl: "@Url.Action("ActualizarItem")", onSelectRow: function (id) {        if (id && id !== lastsel) {                jQuery('#list').restoreRow(lastsel);                lastsel = id;        }        jQuery('#list').editRow(id, true, false, reload); } … function reload(result) {       $("#list").trigger("reloadGrid");   }

Propiedades de Edición

          1 .      Editable:

Indica si el campo se podrá editar o no cuando estemos en modo edición

{ name: 'com_codigo', index: 'com_codigo', width: 20, align: 'left', editable: false, sortable: false },

          2.      Edittype:

Indica el tipo de campo que se mostrará ('text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file' and 'custom')

Podéis ver más detalle del uso de esta propiedad en la página de jqgrid.

A continuación yo os mostraré algunas peculiaridades de los valores de esta propiedad

·        Select

{ name: 'comm_partido', index: 'comm_partido', width: 20, align: 'left', edittype:'select', editoptions: { dataUrl: '@Url.Action("ObtenerPartidosPoliticos")' }, editable: true },

Una vez definamos que el tipo de campo será un desplegable (“select”), mediante la propiedad editoptions llamaremos a una acción del controlador que nos devolverá un string, con el contenido HTML del desplegable. (Como ya hemos visto en otros post, el Controlador accederá al Modelo para obtener los valores deseados)

public string ObtenerPartidosPoliticos() {     FuncionalidadesManager FuncionalidadesData = new FuncionalidadesManager();     var PartidosPoliticos = FuncionalidadesData.ObtenerPartidosPoliticos();     var data = "<select>";     foreach (var partido in PartidosPoliticos)     {         data += "<option value='" + partido.value.Trim() + "'>" + partido.name.Trim() + "</option>";     }     data += "</select>";     return data; }

 

·        Fecha: 

Realmente en este ejemplo, estamos creando un campo de tipo de texto, pero en la creación del campo lo estamos convirtiendo mediante jquery datepicker, en un campo de tipo fecha.

{ name: 'com_fechaaprobacion', index: 'com_fechaaprobacion', width: 30, align: 'center', edittype:'text', editable: true, editrules: { required: true }, editoptions: { size: 10, maxlengh: 10,                 dataInit: function (element) {                     $(element).datepicker({ dateFormat: 'dd/mm/yy' })              }             } }

Para utilizar datepicker, necesitamos adjuntar a nuestro proyecto el script “query.ui.datepicker-es.js” y referenciarlo en todas las páginas que lo utilicemos (cómo ya hemos visto en otros post, lo referenciaremos directamente desde la página “maestra” (_Layout.cshtml), tal y como muestro a continuación:

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.ui.datepicker-es.js")"  type="text/javascript"></script>

Importante: si trabajamos con jquery-1.9.1.js, tendremos un error en el script jquery-ui-1.8.11.js , ya que no se encontrará la propiedad “$.browser.msie”, para resolver este problema lo único que tenemos que hacer es remplazar la línea:

html += buttonPanel + ( $.browser.msie && parseInt($.browser.version,10) < 7 && !inst.inline ?

por

html += buttonPanel + ( ( navigator.userAgent.match(/'msie'/i) && navigator.userAgent.match(/6/) ) && !inst.inline ?

·        Password: 

{ name: 'com_password', index: 'com_password', width: 20, align: 'right', edittype: 'password', editable: true },

Mediante la propiedad edittype=’Passoword” estamos consiguiendo que al editar la fila el valor del campo se vea “encriptado”, el problema que tenemos es que en modo vista si que veremos el valor del campo, para ello la solución que tenemos es mandar desde el controlador asterísctos en vez del valor del campo, por ejemplo “****”, y en el momento de guardar los datos de la fila, tendremos que verificar previamente si el valor del campo de password es “****” (que significará que no se ha de modificar el passwprd), o por si lo contrario es otro valor (que significará que se ha modificado el valor del campo de passoword y se tiene que actualizar el campo del registro)

           3.      Editoptions:

En el EditOptions definiremos un Array, con las diferentes propiedades de la columna. ( Size, maxlength, dataInit, defaultValue, dataUrl, custom_value), como ya hemos visto en ejemplos anteriores.

Reglas de Validación (editrules)

Las reglas de validación nos permiten indicar ciertas condiciones, que si no se cumplen en el momento de editar la fila, no se realizará la modificación de la fila.

Required	El valor del campo es obligatorio
Number	El valor del campo ha de ser numérico
Integer	El valor del campo ha de ser un número entero
minValue	El valor ha de ser mayor al número indicado
maxValue	El valor ha de ser menor al número indicado
Email	El valor del campo ha de ser tipo email
Date	El valor del campo ha  de ser tipo fecha
url	El valor del campo ha de ser tipo URL

Reglas de Validación personalizadas

Dentro de las propiedades de las reglas de validación tenemos dos propiedades que nos permiten crear reglas de validación personalizadas

Custom	Si lo marcamos en true, nos indica que tendrá una regla personalizada
custom_func	Nos indica, el nombre de la función que define la regla

Ejemplos:

function isDecimal(expression) {     return (String(expression).search(/^\d+(\.\d+)?$/) != -1); } function myamount(value,colname) {     amount=new String(value);     if (amount.indexOf(".")>0)     {         return[false,"Not is a valid number"];     }     else     {         amount=amount.replace(",",".")         if (isDecimal(amount))         {             return[true,""];         }         else         {             return[false,"Not is a number"];         }     } } … { name: 'exit_amount', index: 'exit_amount', width: 70, align: 'right', editable: true, editrules:{custom:true, custom_func:myamount, required:true} }, …

Puedes descargarte el código de ejemplo desde aquí.