2011-02-27 50 views
5

Estoy teniendo una página PHP donde estoy usando un plugin DataTable (jQuery) para visualizar todos los datos de la base de datos.jQuery DataTable - Agregar nueva fila funciona, pero no puede hacerlo editable (jeditable)

Aquí quiero dar al usuario la opción de agregar una nueva fila, es decir, un nuevo registro para que el usuario ingrese datos. He seguido el ejemplo en:

http://www.datatables.net/examples/api/add_row.html

y fue capaz de crear una nueva fila.

Pero no estoy seguro de cómo agregar la propiedad "id" para el generado y también, no estoy seguro de cómo hacerlo editable.

A partir de ahora, todos los demás campos son editables usando jeditable.
El código es el siguiente:

  $(document).ready(function() { 
      /* Init DataTables */ 
      var oTable = $('#example').dataTable({ 
      "iDisplayLength": 5, 
      //"bRetrieve": true, 
      "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]] 
      } 
      ); 


      /* Apply the jEditable handlers to the table */ 
      $('td', oTable.fnGetNodes()).editable('expenseFieldsUpdater.php', { 
       "callback": function(sValue, y) { 
        var aPos = oTable.fnGetPosition(this); 
        oTable.fnUpdate(sValue, aPos[0], aPos[1]); 
       }, 
       "submitdata": function (value, settings) { 
        return { 
         "row_id": this.parentNode.getAttribute('id'), 
         "column": oTable.fnGetPosition(this)[2], 
         "form_id": document.getElementById('formID').value 
        }; 
       }, 
       "height": "14px" 
      }); 
     }); 

     var giCount = 1; 
     function fnClickAddRow() { 
      $('#example').dataTable().fnAddData([ 
       ".1", 
       giCount+".2", 
       giCount+".3", 
       giCount+".4", 
       giCount+".5" ]); 
        giCount++; 
     } 

Pero entonces, estoy totalmente no estoy seguro de cómo ir sobre lo que es editable. Cualquier puntero sería muy útil.

me encontré con el siguiente mensaje en el sitio de tablas de datos, pero no era capaz de entender sobre cómo hacer para hacer que funcionen:
http://datatables.net/forums/comments.php?DiscussionID=181

Respuesta

1

Normalmente encuentro que necesito volver a ejecutar $ (document) .ready eventos que decoran las filas de la tabla después de agregar o editar filas. Por lo que debe probablemente refactorizar el llamado a:

$('td', oTable.fnGetNodes()).editable() 

en un método independiente que se puede llamar desde $ (document) ready y desde fnClickAddRow().

Cuestiones relacionadas