8

現在、Google チャート テーブルを使用しています。選択に問題があります。選択をオフにしたいのですが、それは不可能のようです。メソッドclearChart()を使用してこれを削除する選択部分のイベントリスナーのように（本当に醜い方法で）試しました。

これがテストソースコードです。これを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>

問題は、これらのチェックボックスを使用すると、(青の) 選択が煩わしく混乱することです。

ありがとう。

4

2 に答える 2

16

もう1つのオプションは、「select」イベントが発生したときに選択をリセットすることです。

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

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

次に例を示します：http：//jsfiddle.net/Rxnty/

これにより、再描画を必要とせずに選択がすぐに削除されます。

于 2012-08-27T02:56:35.547 に答える
2

目的の効果を実現する 1 つの方法は、行が選択されたときにどのクラスを適用する必要があるかを API に伝え、行の を指定し続けることができるようにすることですbackground-color。

JS:

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

CSS:

.selected { background-color: white; }

jsfiddleで動作していることがわかります。

于 2012-08-02T14:58:59.407 に答える