Yo uso jqGrid y quiero integrar JQuery datePicker en el interior. Funcionaba bien hasta que me agregue el showOn: ‘botón’. Con eso, la edición no funciona más. Realmente quiero mostrar el selector sólo un clic de botón porque la fecha es el 1 de célula de mi fila y yo uso en línea de edición para cada fila que seleccione se muestra el selector de fecha :-(. Si puedo usar el mismo datepicker opciones fuera de jqGrid, funciona.

Por favor, ayudar

function loadGrid() {
var getUrl = 'Transactions.aspx/GridData/?fundID=' + $('#fundID').val();
var lastSel = "";
jQuery("#list").jqGrid({
url: getUrl,
editurl: 'Transactions.aspx/Edit/',
datatype: 'json',
mtype: 'GET',
colNames: ['Date', 'Invested', 'Nb Shares', 'Price'],
colModel: [
{ name: 'Date', index: 'Date', width: 120, align: 'left', editable: true,
editoptions: {
size: 10, maxlengh: 10,
dataInit: function(element) {
$(element).datepicker({ dateFormat: 'dd/mm/yy', constrainInput: false, showOn: 'button', buttonText: '...' });
}
}
},
{ name: 'Invested', index: 'Invested', width: 100, align: 'right', editable: true, edittype: 'text' },
{ name: 'NbShares', index: 'NbShares', width: 110, align: 'right', editable: true, edittype: 'text' },
{ name: 'UnitValue', index: 'UnitValue', width: 150, align: 'right', editable: true, edittype: 'text'}],
onSelectRow: function(id) {
if (id && id !== lastSel) {
jQuery('#list').restoreRow(lastSel);
jQuery('#list').editRow(id, true);
lastSel = id;
}
},
pager: jQuery('#navbar'),
viewrecords: true,
height: 'auto',
caption: 'Transactions detail'
}).navGrid('#navbar', { edit: false, add: true, del: true });
jQuery("input[type=text]").css("width", "2em");
jQuery("#navbar table").css("margin", "0");
}
  • Impresionante – este post me ayudó a entender cómo utilizar el selector de fecha. Gracias!
InformationsquelleAutor mberube.Net | 2009-10-10

3 Comentarios

  1. 6

    No tengo tu código completo así que voy a tener algunos pequeños errores de sintaxis, pero intenta esto.

    lugar de incrustar el datepicker en el editoptions utilizan una función de edición (oneditfunc).

    cambiar su colModel para la fecha de este

    { name: 'Date', index: 'Date', width: 120, align: 'left', editable: true },

    cambiar su onSelectRow el programa de instalación para este:

    onSelectRow: function(id) {
    if (id && id !== lastSel) {
    jQuery('#list').restoreRow(lastSel);
    //add a function that fires when editing a row as the 3rd parameter  
    jQuery('#list').editRow(id, true, onGridEdit);//<-- oneditfunc
    lastSel = id;
    }
    },

    el uso de las opciones existentes para el datepicker de su onGridEdit función tendría este aspecto

    function onGridEdit(myRowID) {
    $("#" + myRowID + "_Date").datepicker({ dateFormat: 'dd/mm/yy', 
    constrainInput: false, showOn: 'button', buttonText: '...' });
    //this will set focus on the Invested column so the datepicker doesn't fire
    $("#" + myRowID + "_Invested").get(0).focus();
    } 

    Sin embargo, desde el datepicker de no ser disparando al azar puede simplificar el datepicker de opciones y dejar que el fuego cuando la celda está seleccionada.

    function onGridEdit(myRowID) {
    $("#" + myRowID + "_Date").datepicker({ dateFormat: 'dd/mm/yy' })
    //this will set focus on the Invested column so the datepicker doesn't fire
    $("#" + myRowID + "_Invested").get(0).focus();
    }

    Espero que ayude, si hay errores de sintaxis, por favor hágamelo saber, estoy usando datepickers en mi en línea de los editores.

    • Se ve bonito. Voy a probar esta mañana antes de marcar como respondió. Gracias
    • Funciona. La única cosa que tenía que hacer es ajustar el estilo para ver el botón de agregar eso es todo. Muchas gracias.
    • impresionante, me alegro de que podría ayudar a
    • Simple y rápido. Muchas gracias.
  2. 0

    Datepicker necesita saber la posición del elemento en el DOM y datainit se eleva antes de insertar el elemento en el DOM – este es el problema, por lo que usar setTimeout función como esta:

    dataInit:function(elem){setTimeout(function(){
    $(elem).datepicker(); }, 10); }

    Debería resolver este problema.

Dejar respuesta

Please enter your comment!
Please enter your name here