JQuery Datentabellen vollständig bearbeitbar Datentabelle

Question

Ich versuche, eine vollständig modifizierbar Datentabelle im Moment mit jQuerys Datatable-Plugin zu erstellen. Durch die vollständige modifizierbar Tabelle bedeuten i ein Benutzer in der Lage sein wird, zu bearbeiten, zu entfernen, zu aktualisieren, fügen Sie Spalten auf dem Tisch. Basierend auf den Beispielen zur Zeit versuche ich den folgenden JavaScript-Code:

  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;
}

Dies funktioniert in der Benutzeroberfläche, aber ich habe keine Ahnung, wie die Spalteninformationen auf die Server-Seite zu senden. Ok ich kann den neuen Wert der Spalte auf der server_ajax Skript senden, aber wie kann ich die anderen verwandten Informationen über die Spalte wie eindeutige ID der bearbeiteten Spalte in der Datenbank senden.

Answer 1

Wenn Sie Tables wollen hier verwenden ist Artikel über das zeigt, wie CRUD Funktionalitäten mit JQuery Tables http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspx alle notwendigen Funktionalitäten sind in der jquery.datatables.editable.js Plugin platziert, die CRUD-Funktionalitäten auf der Tables Plugin fügt.

Answer 2

Sorry, wenn dies nicht beantwortet Ihre Frage direkt, oder wenn Sie bereits an dieser Option angesehen. Das jqGrid Plugin ermöglicht alles, was Sie gerade erwähnt, und wie von 3.6 können Sie festlegen, welche Spalten angezeigt werden (was ich denke, Sie auch erwähnt) ... in viel weniger Code (glaube ich). Der wichtigste Teil ist, dass es für Sie alle Ajax-Griffe, brauchen Sie nur ein wenig json zu analysieren und die strukturierten Daten auf der Serverseite behandeln.

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