[Webix]Listコンポーネント入門
Webix Advent Calendar 2014 ４日目の記事です。
昨日は突然過去を振り返りたくなって別の記事を書いていたためお休みしました。
さて、今回はWebixのListコンポーネントを使ってみます。
WebixのコンポーネントはJavaScriptオブジェクトとして必要な要素を指定してwebix.uiに渡してあげれば、後はWebixが良い感じに表示してくれます。
リストの表示
基本的には、viewプロパティで”list”を指定し、dataプロパティにリストとして表示したいデータ(JSON)を渡してtemplete内で表示する内容の書式を設定すればリストとして表示されます。
templateの中では「#key名#」で渡したデータの値を表示することができます。またHTMLタグも指定可能です。
（なおリストに渡しているtestDataはtestData.js内で宣言し外部スクリプトとして読み込んでいます。データの内容は以下を）
|
1 2 3 4 5 6 7 8 |
//console.log(testData); //テスト用データ webix.ui({ view:"list", template:"#pref#. - 人口#people#人", //書式指定 select:"multiselect", //行を選択可能にする(複数選択可) data:testData //リストで表示するデータ }); |
Horizontalリスト
リストビューではレイアウト方向とスクロール方向を「x軸」に指定するこができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
webix.ui({ view:"list", height:60, //コンポーネント全体の高さ width:700, //コンポーネント全体の幅 scroll:"x", //x軸にスクロール layout:"x", //x軸にレイアウトして表示 select:true, type:{ height:60, //各アイテムの高さ width:170 //各アイテムの幅 }, template:"#pref# <br> 人口#people#人", //書式指定 data:testData }); |
グルーピング
grouplistビューを利用すると、渡したデータの特定の項目を元にグルーピングしてリストを表示することができます。
この機能を利用するとモバイル向けのスライドメニューなどが簡単に作成することができます。
(タッチイベントにも対応しています）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
webix.ui({ view:"grouplist", //grouplistビューを指定 templateBack:"戻る", templateGroup:"#value#", //グルーピング対象としたキーの値を表示指定 templateItem:"#pref# - 人口#people#人", //グループ選択後に表示指定 select:true, scheme:{ $group:{ by:'group' //グルーピング対象とするキーを指定 }, $sort:{ by:"value", dir:"desc" } //グルーピングしたキーの値でソート }, data:testData }); |
リストのスタイリング
リストビューではtypeプロパティ内で各itemのスタイルなどをカスタマイズすることができます。
template内で使用する、カスタム変数などの設定もtypeプロパティの中で行えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
//カードっぽいリスト var listA = { view:"list", type:{ templateStart:"<div class='custom_item'>", //各itemを包む要素を指定 template:"#pref#<br><div style='text-align:right;'>#group#</div>", templateEnd:"</div>" //各アイテムを包む要素のエンドタグ等を指定 }, data:testData } //データの値に応じてスタイルを変更するリスト var listB = { view:"list", template:"{common.itemIcon} #pref# {common.itemPopulation()}", //type内で設定したカスタム変数を利用 type:{ itemIcon:"<span class='webix_icon fa-map-marker'></span>", //アイコンを指定 itemPopulation:function(obj){ //カスタム変数 人口密度によって文字カラーを変えている if(+obj.population>=1000){ return "<div class='mark red'>"+obj.population+"</div>"; } else if(+obj.population<100){ return "<div class='mark blue'>"+obj.population+"</div>"; } else return "<div class='mark'>"+obj.population+"</div>"; } }, select:true, data:testData } //レイアウトする webix.ui({ cols:[listA, listB] //リストAとリストBを横に並べて表示 }); |
備考
webixのコンポーネントは一つ一つが非常に多機能なため、全ての利用法をお伝えすることができません。
公式サイトに非常に充実したサンプルとドキュメントが公開されていますので、興味のある方はそちらを参照してみてください。
