コンテンツへスキップ

hifiveのデータグリッドライブラリを使いこなす(2)「左カラムを固定化」

by : 2017/04/12

業務要件でグリッドを使うことは多々あります。そんな中で出てくる要望の一つにヘッダーの固定化があります。さらにこれが進むと、左側の幾つかのカラムだけは固定表示して欲しいと言われます。特に右側にカラムが伸びていく、横幅の大きいグリッドでそういったニーズが出てきます。

今回はそんな要望にも応えられるhifiveのグリッドの使い方を紹介します。

左カラム固定のデモ

実装すると次のようになります。

ヘッダープロパティを変更する

今回のベースはhifiveのデータグリッドライブラリを使いこなす(1)「グリッドの基本形」になります。その中にあるvisiblePropertiesを変更します。

元:

visibleProperties: {
header: ['id'],
main: ['name', 'position']
},

view raw
gistfile1.txt
hosted with ❤ by GitHub

修正後:

visibleProperties: {
header: ['id', 'name'],
main: ['company', 'position', 'zipcode', 'address', 'tel']
},

view raw
index.js
hosted with ❤ by GitHub

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
}
}

view raw
index.js
hosted with ❤ by GitHub

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: "新日鉄住金ソリューションズ株式会社"
});

view raw
index.js
hosted with ❤ by GitHub

こうすることで、データが詰まったグリッドができあがりました。


左側のヘッダーを固定にして欲しいというニーズはよくあります。スタイルシートとJavaScriptで独自実装もできますが、柔軟に対応するのは難しいでしょう。hifiveのグリッドをぜひ役立ててください。

Edit fiddle – JSFiddle

banner_02

From → hifive

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。