1

標準の Google ビジュアライゼーション テーブルのヘッダー行の動作をエミュレートしたいと考えていますが、それを最初の列に適用します。これは組み込みの機能ではないようですが、カスタム CSS で実現できるかどうか疑問に思っています。

4

3 に答える 3

5

私は、Googleがトップヘッダーをどのように達成していたかをリバースエンジニアリングすることになりました。彼らはテーブル全体のコピーを作成し、それを div に入れ、絶対に配置し、最初の行の高さに等しい高さを設定していました。これにより、メイン テーブルを下にスクロールしても上部に固定されたままになるという効果が得られます。

横スクロールではヘッダーもスクロールする必要があるため、横スクロールはより複雑です。CSS にはこのためのメカニズムがありません (スクロールしているものの外側に絶対に配置されているため)。そのため、Google はここで JavaScript を使用しています。

固定列に対してこの動作をエミュレートするには、最初にテーブルの 3 番目のクローンを作成します。次に、幅/高さと位置を正しくするために、いくつかの CSS 演習を行います。最後に、ヘッダー テーブルを一斉にスクロールするメイン テーブルの onScroll イベントにリスナーをアタッチします。$.schollbarWidth() 関数は、このプラグインから来ています。

visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data);

var fullTable = $('#table > div > div:first');
var yHeader = fullTable.clone().insertAfter(fullTable);
yHeader.css('width', yHeader.children('tr td:first').outerWidth())
       .css('height', fullTable.innerHeight() - $.scrollbarWidth())
       .css('position', 'absolute')
       .css('top', '0px')
       .css('left', '0px')
       .css('overflow', 'hidden')

fullTable.scroll(function() {
  yHeader.scrollTop(fullTable.scrollTop());
});
于 2010-04-24T06:19:01.500 に答える
0

場合によっては、ブラウザが「$.scrollbarWidth は関数ではありません」のようなエラーを返します。プロパティに変更するだけです。$.scrollbarWidth.

table.draw(data_summary_table, {allowHtml : true, width : '880'});    

function frozenColumn() { 

    var fullTable = $('#summary_table > div > div:first');
    var yHeader = fullTable.clone().insertAfter(fullTable);
    yHeader.css('width', yHeader.find("tr td:first-child").outerWidth())
        .css('height', fullTable.innerHeight() - $.scrollbarWidth)
        .css('position', 'absolute')
        .css('top', '0px')
        .css('left', '0px')
        .css('overflow', 'hidden')

        fullTable.scroll(function() {
        yHeader.scrollTop(fullTable.scrollTop());
        }); 


}

// イベントを添付

google.visualization.events.addListener(table, 'ready', frozenColumn);
google.visualization.events.addListener(table, 'page', frozenColumn);
google.visualization.events.addListener(table, 'sort', frozenColumn);
于 2014-12-02T10:05:58.960 に答える