Pregunta

Estoy tratando de crear una tabla de datos totalmente modificable con el plugin de jQuery Datatable en este momento. Por mesa totalmente modificables me refiero a un usuario será capaz de editar, eliminar, actualizar, añadir columnas de la tabla. Sobre la base de los ejemplos, actualmente estoy tratando el siguiente código JavaScript:

  function var_dump(obj) {
       if(typeof obj == "object") {
        return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;
       } else {
        return "Type: "+typeof(obj)+"\nValue: "+obj;
       }
    }//end function var_dump

      var oTable;
      var giRedraw = false;
      var giCount=11;
      $(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
      $("#example tbody").click(function(event) {
        $(oTable.fnSettings().aoData).each(function (){
          $(this.nTr).removeClass('row_selected');
      });
          $(event.target.parentNode).addClass('row_selected');
      });
/* Add a click handler for the delete row */
      $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
        var iRow = oTable.fnGetPosition( anSelected[0] );
        oTable.fnDeleteRow( iRow );
        } );

                oTable = $('#example').dataTable( {
                    "bProcessing": true,
                    "bServerSide": true,
                    "sAjaxSource": "lib/server_processing.php",
                    "fnDrawCallback": function () {
                        $('#example tbody td').editable( 'lib/editable_ajax.php', {
                "callback": function( sValue, y ) {
                alert(sValue);
                                /* Redraw the table from the new data on the server */
                                oTable.fnDraw();
                            },
                            "height": "14px"
                        } );
                    }
                } );
      } );

function fnClickAddRow() {
  oTable.fnAddData( [
    giCount+".1",
    giCount+".2",
    giCount+".3",
    giCount+".4",
    giCount+".5", ]
 );
 giCount++;
}


/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
  var aReturn = new Array();
  var aTrs = oTableLocal.fnGetNodes();

  for ( var i=0 ; i<aTrs.length ; i++ )
  {
    if ( $(aTrs[i]).hasClass('row_selected') )
    {
      aReturn.push( aTrs[i] );
    }
  }
  return aReturn;
}

Esto funciona bien en la interfaz de usuario, pero no tengo ni idea sobre cómo enviar la información de columna para el lado del servidor. Bien puede enviar el nuevo valor de la columna a la secuencia de comandos server_ajax pero ¿cómo puedo enviar a la otra información relacionada sobre la columna como identificador único de la columna editada en la base de datos.

¿Fue útil?

Solución

Si desea utilizar tablas de datos que aquí es el artículo sobre que muestra cómo implementar funcionalidades CRUD con jQuery DataTables http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspx Todas las funcionalidades necesarias se colocan en el plugin que añade funcionalidades jquery.datatables.editable.js CRUD en la parte superior de tablas de datos plug-in.

Otros consejos

lo siento si esto no responde a su pregunta directamente, o si ya ha visitado esta opción. El plug-in permite jqGrid por todo lo que acaba de mencionar, ya partir de 3.6 le permite elegir qué columnas para mostrar (que creo que también se ha mencionado) ... en mucho menos código (creo). La parte clave es que maneja todo el Ajax para usted, sólo tiene que analizar un poco JSON y manejar los datos estructurados en el lado del servidor.

http://www.trirand.com/jqgridwiki/doku.php

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top