hifiveのデータグリッドライブラリを使いこなす(2)「左カラムを固定化」
業務要件でグリッドを使うことは多々あります。そんな中で出てくる要望の一つにヘッダーの固定化があります。さらにこれが進むと、左側の幾つかのカラムだけは固定表示して欲しいと言われます。特に右側にカラムが伸びていく、横幅の大きいグリッドでそういったニーズが出てきます。
今回はそんな要望にも応えられるhifiveのグリッドの使い方を紹介します。
実装すると次のようになります。
ヘッダープロパティを変更する
今回のベースはhifiveのデータグリッドライブラリを使いこなす(1)「グリッドの基本形」になります。その中にあるvisiblePropertiesを変更します。
元:
visibleProperties: { | |
header: ['id'], | |
main: ['name', 'position'] | |
}, |
修正後:
visibleProperties: { | |
header: ['id', 'name'], | |
main: ['company', 'position', 'zipcode', 'address', 'tel'] | |
}, |
header(ヘッダー)として id と name を指定しました。これでこの2つのカラムは左側に固定表示となります。残りと main キーで指定されたカラムは表示されますが、スクロール対象となります。
次に各カラムの表示幅を設定します。
properties: { | |
id: { | |
size: 70, | |
sortable: true | |
}, | |
name: { | |
size: 100, | |
sortable: true | |
}, | |
/* 以下を追加 */ | |
position: { | |
size: 110 | |
}, | |
zipcode: { | |
size: 80 | |
}, | |
address: { | |
size: 110 | |
}, | |
tel: { | |
size: 110 | |
}, | |
company: { | |
size: 200 | |
} | |
} |
sizeはピクセル指定になります。表示する情報に応じて調整します。なお、文字がはみ出しても隣のカラムには影響しません(overflow: hiddenになります)。
最後にダミーデータを入れる部分を変更します。これはダミーデータなので本来は不要です。
ary.push({ | |
id: i.toString(), | |
name: "User #" + i, | |
position: "Position " + i, | |
zipcode: "220-8401", | |
address: "神奈川県横浜市西区みなとみらい三丁目3-1三菱重工横浜ビル13階", | |
tel: "045-225-5150", | |
company: "新日鉄住金ソリューションズ株式会社" | |
}); |
こうすることで、データが詰まったグリッドができあがりました。
左側のヘッダーを固定にして欲しいというニーズはよくあります。スタイルシートとJavaScriptで独自実装もできますが、柔軟に対応するのは難しいでしょう。hifiveのグリッドをぜひ役立ててください。
コメントは受け付けていません。