Wie ändert man die Datenquelle einer YUI-Datentabelle nach der Erstellung?

Question

Ich verwende die Yahoo DataTable für die die API aquí .

Ich habe Schwierigkeiten, die Daten zu ändern, nachdem ich das Gitter einmal gerendert habe. Ich verwende jQuery, um Daten über AJAX oder von einer clientseitigen Dateninsel zu erhalten und muss diese wieder in das Raster setzen.

Es gibt keine setDataSource-Methode in der DataTable-API und die Änderung von "dataSource.liveData" führt nicht zur Aktualisierung des Rasters.

 // does not work
 dataTable.dataSource.liveData = [ {name:"cat"}, {name:"dog"}, {name:"mouse"};

Das Beispiel, auf das ich meinen Code stütze, ist die grundlegendes LocalDataSource-Beispiel .

Wie kann ich die Datenquelle aktualisieren, ohne die Tabelle komplett neu erstellen zu müssen? Ich möchte NICHT die YUI-Datenquellen verwenden, die Async-Aufrufe machen. Ich muss wissen, wie ich dies "manuell" tun kann.

Answer 1

Sie waren auf dem richtigen Weg, Sie haben nur vergessen, der Datenquelle mitzuteilen, dass sie die Daten an die Datentabelle senden soll. Angenommen, Sie verwenden eine LocalDataSource und die Daten in der Tabelle durch die Daten in der Datenquelle ersetzen möchten, führen Sie nach dem Ersetzen der Livedaten einfach

dataTable.getDataSource().sendRequest(null,
  {success: dataTable.onDataReturnInitializeTable},
  dataTable);

Siehe auch die anderen onDataReturnXXX Methoden der DataTable in der API-Referenz. Sie können die neuen Daten anhängen, anstatt sie zu ersetzen, usw.

Answer 2

Ich wollte nur hinzufügen, dass Sie die Paginierung beibehalten können, wenn Sie einen Aufruf von getState() in der Argument-Eigenschaft übergeben.

dataTable.getDataSource().sendRequest(null,
    {
        success: dataTable.onDataReturnInitializeTable,
        argument: dataTable.getState()       
    }
);

Answer 3

Wie kann ich die Datenquelle aktualisieren, ohne die Tabelle komplett neu erstellen zu müssen?

Meinen Sie, ohne eine "neue" Anweisung zu verwenden? Wenn ja, habe ich nicht hatte, dies selbst zu tun, aber ich benutze YUI oft. Ich bemerke, dass es eine deleteRows-Methode, die Sie verwenden könnten, um alle Zeilen zu löschen, 0 durch die Länge der Tabelle, und verwenden Sie dann die addRows, die ein literales Array wie Ihre und einen Index, 0, in diesem Fall nimmt.

Haben Sie das schon ausprobiert?

Edit : Werfen Sie einen Blick auf dieses Beispiel . Das, was Sie tun wollen, ist durchaus machbar. Die Tabelle wird lokal in einem bestimmten Intervall mit der setInterval-Methode aktualisiert (was nicht überraschend ist). Wenn Sie sich ansehen, was setInterval tut, können Sie sehen, dass es makeConnection auf der Instanz der Datenquelle aufruft. Die Methode hört sich an, als würde sie einen Remote-Aufruf tätigen, aber das ist nicht unbedingt der Fall.

Schauen wir uns ein paar Zeilen aus dem Beispiel an.

    // Set up polling
    var myCallback = {
        success: myDataTable.onDataReturnInitializeTable,
        failure: function() {
            YAHOO.log("Polling failure", "error");
        },
        scope: myDataTable
    }
    myDataSource.setInterval(5000, null, myCallback)

die letzte Zeile könnte einmalig (oder bei Bedarf) statt in Intervallen aufgerufen werden, indem sie wie folgt umgeschrieben wird:

myDataSource.makeConnection(null, myCallBack)

die die onDataReturnInitializeTable Methode - die Sie vermutlich direkt aufrufen könnten, was sinnvoller wäre.

Wie auch immer, folgen Sie einfach dem Beispiel und nehmen Sie die Teile heraus, die Sie nicht brauchen. Letztendlich sieht es so aus, als ob die Methode onDataReturnInitializeTable der Schlüssel ist.

Ich hoffe, das hilft.

Answer 4

Eigentlich alles, was ich tat, um es zum Funktionieren zu bringen ist die folgenden zwei Zeilen Code (und meine wurde von Ajax so ein wenig anders als die OP zurückgegeben)...

dataTable.dataSource.liveData = eval(o.responseText);
dataTable.load({});

denn wenn Sie lesen, was datatable.load() ist das, was jeder vorschlug, anzurufen.