0

そのため、行のインデックス番号を示すテーブルがあります。ページとまったく同じになるように表の幅を最大化しました。残念ながら、インデックス番号の列は今では迷惑な幅になっているので、最初の列の幅に上限を設定するか、テーブル内のすべての列を調整できるようにする方法があるかどうか疑問に思っていますか? ありがとう！

4

1 に答える 1

1

Google Visualization API テーブルで列幅を設定するのは本当に面倒です。HTML テーブルは、テーブルのデータの最初の行に基づいて列幅を設定します。これは、Google Visualization API の場合はヘッダー行です (通常のテーブルの作成では、タグを<thead>使用してヘッダー行を配置し<th>ますが、Google はそれ<tbody>を<td>タグ、これが列幅を定義する理由です)。API は、ヘッダー行の個々のセルに css またはクラスを割り当てる方法を提供しないため、JavaScript を記述してテーブルを解析し、適切なクラス/CSS を設定して列幅を処理する必要があります。さらに、テーブルは HTML から削除され、ユーザーが列ヘッダーをクリックしてテーブルを並べ替えるか、ページ ボタンをクリックするたびに再描画されるため (ページングが有効な場合)、テーブルが変更されるたびにセルにクラス/CSS を再割り当てする必要があります。再描画。さらに複雑なことに、テーブルが大きくなりすぎたときにテーブルがスクロールするようにテーブルに高さを割り当てている場合、API は実際には 2 つのテーブルを描画して、固定ヘッダー効果を作成します。

通常、私は Google Visualization API の使用を支持していますが、Table ビジュアライゼーションの場合、価値がある以上に面倒な場合があります。別のライブラリを使用したり、独自のカスタム テーブル ビジュアライゼーションを作成したりする方が簡単な場合があります。

テーブル ビジュアライゼーションを引き続き使用する場合は、次のコードを使用して作業を開始してください。

google.visualization.events.addListener(table, 'ready', function () {
    var headerCells = document.querySelectorAll('#myTableDiv table tr:first-child td');
    for (var i = 0; i < headerCells.length; i++) {
        // access the header cell element with headerCells.item(i)
    }
});
于 2013-10-24T21:56:14.183 に答える