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のグリッドをぜひ役立ててください。
コメントは受け付けていません。