Google Chart Tabelle Entfernen Sie die Auswahl

Question

Ich arbeite derzeit mit den Google-Chart-Tabellen. Ich habe ein Problem mit der Auswahl. Ich möchte die Auswahl ausschalten, aber es scheint unmöglich zu sein. Ich habe sogar versucht (eine wirklich hässliche Art und Weise) wie ein Event-Listener auf den ausgewählten Teil, der die Methode clearChart() verwendet, um dies zu entfernen.

Hier ist der Test Sourche Code. Beachten Sie, dass ich diese verwenden kann nicht in jsfiddle

<script type="text/javascript" src="https://www.google.com/jsapi" ></script> 
<script type="text/javascript"> 
google.load("jquery", "1"); 

google.load('visualization', '1', {packages:['table']}); 

    function drawVisualization() 
    { 
      var data = google.visualization.arrayToDataTable([ 
      ['', 'Name', 'E-mail', 'Activated', 'Last login'], 
      ['<input type="checkbox">', 'name1', 'name1@company.xxx', true, '20-07-2012'], 
      ['<input type="checkbox">', 'name2', 'name2@company.xxx', true, '21-07-2012'] 

       ]); 

       var options = {}; 
       options['showRowNumber'] = false; 
       options['page'] = 'enable'; 
       options['allowHtml'] = true; 
       options['pageSize'] = 18; 
       options['pagingButtonsConfiguration'] = 'auto'; 

       var visualization = new google.visualization.Table(document.getElementById('table')); 
       visualization.draw(data, options); 
      } 

      google.setOnLoadCallback(drawVisualization); 

</script> 
<div id="table"></div> 

Das Problem ist, dass wenn ich diese Kontrollkästchen verwenden die (blau) Auswahl anoying und verwirrend.

Danke.

Answer 1

Eine weitere Option ist die Auswahl zurückgesetzt, wenn das „select“ Ereignis ausgelöst wird:

google.visualization.events.addListener(visualization, 'select', selectHandler); 

function selectHandler() { 
    visualization.setSelection([]) 
} 

Hier ist ein Beispiel: http://jsfiddle.net/Rxnty/

Dies entfernt sofort die Auswahl ohne ein erneutes Zeichnen zu erfordern.

Answer 2

Eine Möglichkeit, um den gewünschten Effekt zu erzielen, besteht darin, der API mitzuteilen, welche Klasse angewendet werden soll, wenn die Zeile ausgewählt wird, sodass Sie die background-color der Zeile angeben können.

JS:

options['cssClassNames'] = {} 
options['cssClassNames']['selectedTableRow'] = 'selected'; 

CSS:

.selected { background-color: white; } 

Sie können es auf jsfiddle arbeiten sehen.