Jquery datatables Tableau de données entièrement Modifiable

Question

Je suis en train de créer une table de données entièrement modifiable avec le plugin Datatable au moment de Jquery. Par table entièrement modifiable je veux dire un utilisateur pourra modifier, supprimer, mettre à jour, ajouter des colonnes sur la table. Sur la base des exemples, actuellement je suis en train le code javascript suivant:

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

Cela fonctionne très bien dans l'interface utilisateur, mais je n'ai aucune idée sur la façon d'envoyer les informations de colonne sur le côté serveur. Ok je peux envoyer la nouvelle valeur de la colonne au script server_ajax mais comment puis-je envoyer les autres informations connexes sur la colonne comme identifiant unique de la colonne modifiée dans la base de données.

Answer 1

si vous voulez utiliser DataTables ici est l'article à ce sujet montre comment implémenter des fonctionnalités CRUD avec JQuery DataTables http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspx toutes les fonctionnalités nécessaires sont placées dans le plugin jquery.datatables.editable.js qui ajoute des fonctionnalités CRUD au-dessus du plug-in DataTables.

Answer 2

désolé si cela ne répond pas directement à votre question, ou si vous avez déjà regardé cette option. Le plugin jqGrid permet de tout ce que vous venez de mentionner, et que de 3.6 vous permet de choisir les colonnes à afficher (que je pense que vous avez mentionné) ... dans le code beaucoup moins (je pense). La partie clé étant qu'il gère tous les ajax pour vous, vous devez seulement un peu analysez JSON et gérer les données structurées sur le côté serveur.

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