hifiveのデータグリッドライブラリを使いこなす(2)「左カラムを固定化」
業務要件でグリッドを使うことは多々あります。そんな中で出てくる要望の一つにヘッダーの固定化があります。さらにこれが進むと、左側の幾つかのカラムだけは固定表示して欲しいと言われます。特に右側にカラムが伸びていく、横幅の大きいグリッドでそういったニーズが出てきます。
今回はそんな要望にも応えられるhifiveのグリッドの使い方を紹介します。
実装すると次のようになります。
ヘッダープロパティを変更する
今回のベースはhifiveのデータグリッドライブラリを使いこなす(1)「グリッドの基本形」になります。その中にあるvisiblePropertiesを変更します。
元:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
visibleProperties: { | |
header: ['id'], | |
main: ['name', 'position'] | |
}, |
修正後:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
visibleProperties: { | |
header: ['id', 'name'], | |
main: ['company', 'position', 'zipcode', 'address', 'tel'] | |
}, |
header(ヘッダー)として id と name を指定しました。これでこの2つのカラムは左側に固定表示となります。残りと main キーで指定されたカラムは表示されますが、スクロール対象となります。
次に各カラムの表示幅を設定します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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になります)。
最後にダミーデータを入れる部分を変更します。これはダミーデータなので本来は不要です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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のグリッドをぜひ役立ててください。
コメントは受け付けていません。