Tengo una red con un datatype = "local". Los datos son una matriz de la siguiente manera:

var mydata = [{id:1,valeur:"a_value",designation:"a_designation"}, {id:2,...}, ...];

La segunda columna (nombre valeur) es la única editable columna de la rejilla (editable:true establecido en colModel)

En el localizador de la cuadrícula, tengo 2 botones:

  • Uno para editar todas las células (a la vez) de la columna nombre de valeur:

    $("#mygrid").jqGrid('navButtonAdd','#pager',{caption:"Edit values",
    onClickButton:function(){ var ids = $('#mygrid').jqGrid('getDataIDs');
    for(var i=0;i<ids.length+1;i++){ $('#mygrid').jqGrid('editRow',ids[i],true);}
    }});
    
  • y otro para guardar (a la vez) todos los cambios de la edición de celdas:

    $("#mygrid").jqGrid('navButtonAdd','#pager',{caption:"Save changes",
    onClickButton:function(){var ids = $('#mygrid').jqGrid('getDataIDs');
    for(var i=0;i<ids.length+1;i++){ 
       ... ??? ...
    }}});
    

Cuando yo uso:

var rd = $("#mygrid").jqGrid('getRowData',ids[i]);
alert("valeur="+rd.valeur);

para cada pantalla, me sale algo como esto:

valeur=< input class="editable" role="textbox" name="valeur" id="1_valeur" style="width: 98%;" type="text"> ...
  • Así, cuando las células están en modo de edición, todos los rd.valeur son una entrada de texto de la etiqueta!
  • Cuando no lo están, puedo obtener los valores iniciales de las celdas!

¿Cómo puedo obtener y guardar todos los cambios de esta columna (todas las células en modo de edición)?

  • …lo mejor sería guardar los cambios primero en la matriz, a continuación, en el servidor
InformationsquelleAutor Qualliarys | 2010-05-26

4 Comentarios

  1. 2

    El problema es que getRowData no está destinado para su uso, mientras que una fila se encuentra en el modo de edición. Desde el jqGrid Docs:

    No utilice este método cuando la edición de la fila o celda. Esto devolverá el contenido de la celda y no en la realidad el valor del elemento de entrada

    Como se observa, si intenta utilizar este método cuando una fila que está siendo editada, obtendrá raw HTML en lugar del valor. Aquí tiene dos opciones:

    • Como Qualliarys sugiere, usted puede guardar los datos de la primera, por ejemplo, utilizando saveRow.
    • Alternativamente, usted puede analizar la entrada de etiquetas a ti mismo, tal vez usando jQuery para ayudar.
    • … vengo de vuelta tan pronto como sea posible (que tengo que resolver una tarea más rápidamente)…
    • Gracias Justin por su respuesta! De hecho, traté de usar saveRow y saveCell pero sin éxito. Tengo un error algo así como : «error de fila: 1 resultado: 404:not found estado: error». Para la alternativa que sugieren… fue mi primer pensamiento. Así que si es la única solución que se me va a hacer así!
  2. 2

    Aquí es la manera de resolver mi problema. He probado con ningún tipo de identificación y funciona bien, se guarda el cambio:

    ...
    onSelectRow: function(id){
      $('#list4').jqGrid('saveRow',lastsel,false,'clientArray');
      if(id && id!==lastsel){
        $('#list4').jqGrid('restoreRow',lastsel);
        lastsel=id;
      }
      $('#list4').jqGrid('editRow',id,false);
    },
    ...
    

    url (cuarta param): si se definen, este parámetro se sustituye el editurl parámetro de las opciones de la matriz. Si se establece a 'clientArray', los datos no se publican en el servidor sino que se guardan sólo a la red (presumiblemente para más tarde manual de ahorro de la energía). referencia: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow

    De hecho, he intentado de esta manera, pero me escribió 'mydata' en lugar de 'clientArray'

    Así que, muchas gracias Oleg y Justin, nosotros lo tenemos!

  3. 1

    Intenta utilizar jqGrid con su propia manera. Por qué? La conmutación de todas las filas de jqGrid al mismo tiempo en el modo de edición no encuentro como la mejor manera.

    Si usted realmente necesita para realizar una operación con la red local y enviar los resultados al final se puede probar la nueva versión beta de jqGrid. Puede ser probablemente la mejor manera para usted. Ver http://www.trirand.com/blog/?page_id=393/releases/jqgrid-3-7-beta/#p17463 para más detalles.

    • Oleg, gracias por tu respuesta y por el enlace. Sí no es la mejor manera de utilizar jqGrid. Pero para esta red, es mejor para mí, para mostrar los datos verticalmente (los datos que se muestran son en realidad una sola fila de una tabla de SQL). Esta sola fila contiene una gran cantidad de elementos. Si puedo mostrar horizontalmente (de forma predeterminada) de la red va a ser muy grande y su altura será muy pequeña… espero que entiendan mi problema ?
    • OK, entiendo que se deben mostrar los datos de forma vertical, pero no está claro para mí por qué desea cambiar de la primera columna en el modo de edición. Yo estándar de manera que si el usuario selecciona una fila o hacer doble clic en una fila de la fila seleccionada será cambiado en el modo de edición. Después de que el usuario presione la tecla «enter», los datos se guardarán y el modo de edición se apague. Si el usuario presiona «esc» o pasa a la siguiente fila sin presionar tecla «enter», los cambios no se guardarán. Por qué esta forma no es adecuado para usted?
    • Oleg, que es el adecuado para mi también !!! De hecho, empecé a buscar una solución de esta manera, con: … onSelectRow: función(id){ $(‘#mygrid’).jqGrid(‘saveCell’,lastsel+»_valeur»,»valeur»,»mydata»); if(id && id!==lastsel){ $(‘#mygrid’).jqGrid(‘restoreRow’,lastsel); lastsel=id; } $(‘#mygrid’).jqGrid(‘editRow’,id,true); } … pero tengo el mismo error mencionados anteriormente.
    • Puede ser importante que la versión de jqGrid de utilizar. Descarga la última versión sin comprimir de github.com/tonytomov/jqGrid. Si usted prefiere una versión comprimida de trirand.com/blog/?page_id=6 no olvides seleccionar todos los módulos que necesita antes de hacer clic en de la clave de descarga. Mira stackoverflow.com/questions/2863874/… para ver un ejemplo de la línea de edición. Se debe trabajar.
    • gracias Oleg. Estoy trabajando de esta manera…
    • Oleg, hice twince usted menciona … pero cuando yo presione «enter» me sale el mismo error. Aquí está mi código : … ondblClickRow: función(id, ri, ci) { $(‘#mygrid’).jqGrid(‘editRow’,id,true);}, onSelectRow: función(id){ if(id && id!==lastsel){ $(‘#mygrid’).jqGrid(‘restoreRow’,lastsel); lastsel=id; } },…
    • Podría insertar en tu pregunta un código completo. Si he podido reproducir el problema me podría ayudar mejor a usted. Una pregunta más es permanecer unanswer: que versión de jqGrid y jQuery utiliza?
    • yo uso jquery.jqGrid-3.6.5/js/jquery.jqGrid.min.js …. va a encontrar mi código de prueba en una nueva respuesta :

  4. 0
    $ ( document).ready(function(){
    var lastsel=-1;
    $("#list4").jqGrid({
      data:mydata,
      datatype: "local",
      pager: '#pager14',
      height:"100%",
      autowidth: true,
      multiselect: false,
      sortable:false,
      sortname: 'id',
      sortorder: "desc",
      colNames:['Index','Label','Value','Designation','','Name'],
      colModel:[
        {name:'id',index:'id',sorttype:"int",hidden:true},    
        {name:'label',index:'label',sorttype:"text",resizable:false,width:80},
        {name:'valeur',editable:true,resizable:false,width:85},
        {name:'designation',index:'designation',sorttype:"text",resizable:false,width:200},
        {name:'unite',sortable:false,align:'center',resizable:false,width:10},
        {name:'name',index:'name',sorttype:"text",hidden:true}
      ],  
      afterInsertRow: function(rowid){    
        $("#list4").jqGrid('setCell',rowid,'label','',{'font-weight':'bold','border-top':'0px','border-left':'0px'});
        $("#list4").jqGrid('setCell',rowid,'label','','ui-state-default');
      },
      ondblClickRow: function(id, ri, ci) {
        $('#list4').jqGrid('editRow',id,true);
      },
      onSelectRow: function(id){
        if(id && id!==lastsel){
          $('#list4').jqGrid('restoreRow',lastsel);
          lastsel=id;
        }
      },
      footerrow :false,
      pgbuttons:true,
      editurl: "client_test2.php",
      caption: "Event identity : attention il faut mettre un certificat en S_SESSION !!!"
    });
    
    var mydata = [
      {id:1,label:"Buyer",valeur:"<?php echo $_SESSION["certificats"][0]["acheteur"]?>",designation:"Nom de l'acheteur de la marchandise",unite:"",name:'acheteur'},
      {id:2,label:"Contract",valeur:"<?php echo $_SESSION["certificats"][0]["contrat"]?>",designation:"Liste des contrats établis entre les vendeurs et l'acheteur",unite:"",name:'contrat'},
      {id:3,label:"Seller",valeur:"<?php echo $_SESSION["certificats"][0]["vendeur"]?>",designation:"Nom du vendeur de la marchandise",unite:"",name:'vendeur'},
      {id:4,label:"Network",valeur:"<?php echo $_SESSION["certificats"][0]["filiere"]?>",designation:"Filière complète des vendeurs",unite:"",name:'filiere'},
      {id:5,label:"Product",valeur:"<?php echo $_SESSION["certificats"][0]["produit"]?>",designation:"Nom de la marchandise",unite:"",name:'produit'},
      {id:6,label:"Variety",valeur:"<?php echo $_SESSION["certificats"][0]["variete"]?>",designation:"Nom de la variété de la marchandise",unite:"",name:'variete'},
      {id:7,label:"Weight",valeur:"<?php echo $_SESSION["certificats"][0]["poids"]?>",designation:"Nombre de tonnes contracté",unite:"<img src=\'/img/v3/aide0.png\'title=\'Metric Ton : 1000,000 mt\'/>",name:'poids'},
      {id:8,label:"Controler",valeur:"<?php echo $_SESSION["certificats"][0]["controleur"]?>",designation:"Identitées du contrôleur",unite:"",name:'controleur'},
      {id:9,label:"Start",valeur:"<?php echo $_SESSION["certificats"][0]["debut"]?>",designation:"Date et heure de début de l'événement",unite:"<img src=\'/img/v3/aide0.png\'title=\'Datetime : 2008-02-23 08:00:00\'/>",name:'debut'},
      {id:10,label:"End",valeur:"<?php echo $_SESSION["certificats"][0]["fin"]?>",designation:"Date et heure de fin de l'événement",unite:"<img src=\'/img/v3/aide0.png\'title=\'Datetime : 2008-02-23 08:00:00\'/>",name:'fin'},
    ];
    
    for(var i=0;i<=mydata.length;i++){
      $("#list4").jqGrid('addRowData',i+1,mydata[i]);
    }
    
    $("#list4").jqGrid('navGrid',"#pager14",{view:false,edit:false,add:false,del:false,search:false,refresh:false,refreshtext:''});
    $("#list4").jqGrid('sortableRows');
    
    $("#list4").jqGrid('navButtonAdd','#pager14',{
      caption:"Edit values &nbsp;",buttonicon:"ui-icon-pencil",
      onClickButton:function(){
        var ids = $('#list4').jqGrid('getDataIDs');
        for(var i=0;i<ids.length+1;i++){
          $('#list4').jqGrid('editRow',ids[i],true);
        }
      }
    });
    
    
    $("#list4").jqGrid('navButtonAdd','#pager14',{
      caption:"Save changes &nbsp;",buttonicon:"ui-icon-disk",
      onClickButton:function(){
        var ids = $('#list4').jqGrid('getDataIDs');
        for(var i=0;i<ids.length+1;i++){
          $('#list4').jqGrid('saveRow',ids[i],false,'mydata');
        }
      }
    });
    
    $("#list4").jqGrid('navButtonAdd','#pager14',{
      caption:"",buttonicon:"ui-icon-info",
      onClickButton:function(){
    
      }
    });
    
    
    $("#list4 tr").hover(
      function(){$(this).find("td").eq(1).removeClass('ui-state-default'); $(this).addClass("ui-state-hover");},
      function(){ if(!$(this).hasClass("ui-state-active")) $(this).find("td").eq(1).addClass('ui-state-default'); }
    );
    
    $("#list4 tr").click(
        function(){$("#list4 tr").each(function() {$(this).find("td").eq(1).addClass('ui-state-default'); });
        $(".ui-state-active").removeClass("ui-state-active");
        $(".ui-state-highlight").removeClass("ui-state-highlight");
        $(this).find("td").eq(1).removeClass('ui-state-default');
        $(this).addClass("ui-state-active");
    });
    });
    
    • el archivo php «client_test2.php» está vacío por ahora!
    • es suficiente Oleg ?
    • Por el camino. El mensaje de error que se describen vienen de editurl: "client_test2.php". Otra parte de código donde puede inicializar mydata tiene errores de sintaxis: valeur:"<?php echo $_SESSION["certificats"][0]["acheteur"]?>" está mal. No entiendo cómo el código debe parece, pero usted debe utilizar valeur:'<?php echo $_SESSION["certificats"][0]["acheteur"]?>' o valeur:"<?php echo $_SESSION[\"certificats\"][0][\"acheteur\"]?>". Una aclaración más: parece que usted podría utilizar classes parámetro en el colModel (ver trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options).
    • gracias Oleg. Sí, se trata de «client_test2.php» pero cuando les comente esta línea y pulse la tecla «enter», la red se convierte en congeló… pero, ¿qué forma debe tener (es escribir en la última sección de trirand.com/blog/jqgrid/jqgrid37/jqgrid.html, que esta dirección es un muñeco url existente) ?
    • he intentado reemplazar todos ‘<?php … ?> » con » (con una cadena vacía), pero tengo el mismo problema. De hecho, me gustaría guardar el cambio antes de que en mydata matriz…

Dejar respuesta

Please enter your comment!
Please enter your name here