7

ich bin mit Google Dashboard Tisch Funktionalität, ich möchte zuweisen Wert von id zu tr jeder Zeile, die erstellt wird, ich habe Array alswie Werte zuweisen in Google Dashboard-Tabelle TR

var data = google.visualization.arrayToDataTable([ 
     ['Name', 'Donuts eaten','id'], 
     ['Michael' , 5,'1'], 
     ['Elisa', 7,'2'], 
     ['Robert', 3,'3'], 
     ['John', 2,'4'], 
     ['Jessica', 6,'5'], 
     ['Aaron', 1,'6'], 
     ['Margareth', 8,'7'] 
    ]); 

     var table = new google.visualization.ChartWrapper({ 
        'chartType': 'Table', 
        'containerId': 'chart2', 
        dataTable: data, 
        'options': { 
         'width': '500px' 
        } 
       }); 
       table.draw(); 
folgt

Ich kann immer noch nicht herausfinden, ob es eine Möglichkeit gibt, Werte an DOM-Elemente zu binden.

+0

Lese asgallant Antwort und letzten Kommentar . Verwenden Sie das Plugin und helfen Sie zu verbessern oder machen Sie Ihre eigenen ... :) – Sami

+0

gut machen meine eigenen zu tun specifc Job ist so einfach, aber diese Tabelle/Feature ist mit Dashboard gebündelt, wenn wir nicht ändern können, was ist der Punkt der Verwendung von 1? weil es da draußen schon zu viele gibt. –

Antwort

3

Hier ist eine Lösung, mit JQuery:

google.visualization.events.addListener(table, 'ready', function() { 
    $('#chart2 .google-visualization-table-tr-odd, #chart2 .google-visualization-table-tr-even').each(function (e) { 
     var idx = $('td:nth-child(2)', this).html(); 
     $(this).attr('id', 'row' + idx); 
    }); 
    }); 

Und die ID-Spalte zu entfernen:

google.visualization.events.addListener(table, 'ready', function() { 
    $('.google-visualization-table-tr-head td:nth-child(3)').remove(); 
    $('#chart2 .google-visualization-table-tr-odd, #chart2 .google-visualization-table-tr-even').each(function (e) { 
     var td = $('td:nth-child(2)', this) 
     var idx = td.html(); 
     td.remove(); 
     $(this).attr('id', 'row' + idx); 
    }); 
    }); 

Mit berücksichtigt Sortierung:

function tableCleanUp() { 
    google.visualization.events.addListener(table.getChart(), 'sort', tableCleanUp2); 
    tableCleanUp2(); 
} 

function tableCleanUp2() { 
    $('.google-visualization-table-tr-head td:nth-child(3)').remove(); 
    $('#chart2 .google-visualization-table-tr-odd, #chart2 .google-visualization-table-tr-even').each(function (e) { 
     var td = $('td:nth-child(2)', this) 
     var idx = td.html(); 
     td.remove(); 
     $(this).attr('id', 'row' + idx); 
    }); 
} 

google.visualization.events.addListener(table, 'ready', tableCleanUp); 
+0

Thx für antworte, ich habe es versucht, es funktioniert, aber hat Einschränkungen die ID-Spalte, die ich oben in Beispiel übergeben wurde nur ein Beispiel, ich meinte, es als ID angezeigt werden sollte als etwas wie folgt angewendet werden, sie so tun Sie ist nett dass du nimmst, irgendeinen Spaltennamen und nimm seinen html-Wert und weise ihn "" zu, die Einschränkung ist, dass ich es nicht als Spalte val übergeben will. –

+0

Wie willst du es dann weitergeben? Sie benötigen eine Möglichkeit, die fragliche Zeile zu identifizieren, wenn Sie ihr eine ID aus Ihrem Datenarray zuweisen möchten. –

+0

"Ich möchte den Wert von id für tr jeder Zeile, die erstellt wird zuweisen" das ist, was ich zitierte, wie bereits erwähnt, dass ich Ihre Lösung schätzen, aber ID in Daten-Array wurde in einer Weise gesendet, so dass es TR's ID zugewiesen werden kann , da ich denke, dass wir alle wissen, dass wir ID in Spalten normalerweise nicht angezeigt haben, wie es von DB kommen kann, wenn Sie das etwas ändern, werde ich sicher Ihre Frage wahr markieren. –

-1

In der einfachsten Form kann es wie folgt gemacht werden: tr.id = containerId;

+0

und wo man es benutzt? ContainerId sollte ID des ganzen Containers sein, ich denke nicht nur 1 TR. –

0

Es gibt keine Unterstützung in der Tabelle Visualisierung für die Zuordnung von IDs zu tr. Sie müssen das erstellte HTML manuell analysieren, um sie entsprechend zu setzen.

+0

Und wie? Könnte eine akzeptable Antwort sein. Ich habe versucht, aber nicht erfolgreich :( – Sami

+0

Es gibt keine einfache Möglichkeit, dies zu tun. Sie müssen Ihre Tabelle analysieren, um Werte in den Tabellenzellen zu Werten in Ihrer DataTable, um eine Zeile eindeutig zu identifizieren (was möglicherweise nicht möglich ist, wenn Einige Ihrer Zeilen haben doppelte Daten. Am einfachsten ist es, wenn Sie für jede Zeile eine einzelne Zelle mit einem eindeutigen Schlüsselwert haben. – asgallant

+1

Wenn Sie einen schamlosen Produktstecker zulassen, habe ich eine Open-Source-Tabelle (unter GPLv3 lizenziert) Visualisierung in der Beta-Version, die Funktionen bietet, die über die Standardtabelle von Google Tabellen hinausgehen - einschließlich der Möglichkeit, Tabellenelementen Attribute (wie IDs) zuzuordnen. Sie können sie hier abrufen: https://github.com/asgallant/gViz. Tabelle: Es ist sehr viel ein Beta-Produkt (gelesen: hat wahrscheinlich eine Tonne unentdeckter Bugs), also denke ich nicht, dass es für eine Produktionsumgebung bereit ist, aber wenn ich einige aktive Tester bekommen könnte, könnten die Bugs herausgehämmert werden schnell – asgallant

Verwandte Themen