Domanda

Sto cercando di creare una tabella di dati completamente modificabili con il plugin Datatable di jQuery in questo momento. Da tavolo completamente modificabile intendo un utente sarà in grado di modificare, rimuovere, aggiornare, aggiungere colonne sul tavolo. Sulla base di esempi, attualmente sto cercando il seguente codice 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;
}

Questo funziona bene nell'interfaccia utente, ma non ho idea su come inviare le informazioni di colonna al lato server. Ok posso inviare il nuovo valore della colonna allo script server_ajax ma come posso inviare le altre informazioni correlate sulla colonna di come ID univoco della colonna modificato nel database.

È stato utile?

Soluzione

se si desidera utilizzare DataTable qui è articolo su che mostra come implementare le funzionalità CRUD con JQuery DataTable http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspx Tutte le funzionalità necessarie sono collocati nel plugin jquery.datatables.editable.js che aggiunge funzionalità CRUD sulla parte superiore del DataTable plugin.

Altri suggerimenti

scusate se questo non risponde direttamente alla tua domanda, o se hai già guardato questa opzione. Il plugin permette jqGrid per tutto quello che hai appena citato, ed a partire da 3.6 consente di scegliere quali colonne visualizzare (che penso che anche citato) ... in molto meno codice (credo). La parte fondamentale è che gestisce tutto l'ajax per te, è necessario analizzare solo un po 'di JSON e gestire i dati strutturati sul lato server.

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top