2009-12-07 7 views
0

Je suis en train de créer une table de données entièrement modifiable avec le plugin Jatable de Datquable pour le moment. Par table entièrement modifiable, je veux dire qu'un utilisateur sera en mesure de modifier, supprimer, mettre à jour, ajouter des colonnes sur la table. Sur la base des exemples, actuellement je suis en train le code javascript suivant:Jquery Datatables Table de données entièrement modifiable

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 relatives à la colonne comme l'identifiant unique de la colonne modifiée dans la base de données.

Répondre

0

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 plugin DataTables.

+0

En fait, j'ai déjà résolu ce problème, mais j'ai oublié de fermer ce fil. Mais puisque votre réponse est raisonnable, j'approuve la vôtre. – systemsfault

-1

Désolé, cela ne répond pas directement à votre question, ou si vous avez déjà regardé cette option. Le plugin jqGrid permet tout ce que vous venez de mentionner, et à partir de 3.6 vous pouvez choisir les colonnes à afficher (ce que je pense que vous avez également mentionné) ... dans beaucoup moins de code (je pense). L'élément clé étant qu'il gère tous les ajax pour vous, il suffit d'analyser un peu json et de gérer les données structurées côté serveur.

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

+0

La question portait spécifiquement sur les données. Pourquoi poster sur une solution totalement différente plutôt que d'ajouter à la tentative de solution postée. – crafter