コンテンツへスキップ

hifiveのデータグリッドライブラリを使いこなす(1)「グリッドの基本形」

by : 2017/04/11

今回から何回かに分けて、hifiveのデータグリッドライブラリの使い方を紹介していきます。まず今回は基本形の紹介です。

今回のデータグリッドは次のような特徴を持っています。

  1. ヘッダーが固定表示
  2. データをスクロールしてもヘッダーは固定
  3. ヘッダーでソート
  4. 行を選択するとハイライト

なお、デモはこちらでご覧いただけます。

HTMLについて

今回はデザインにBootstrapを使っています。そのため幾つかのdivタグが追加されています。基本的にはdiv#gridが指定されているだけです。

<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div id="grid" class="col-md-9"></div>
</div>
</div>
</div>
</div>

view raw
index.css
hosted with ❤ by GitHub

CSSについて

グリッドの装飾を幾つか行っています。

.grid-content{
overflow-y: hidden;
margin: 10px;
}
#grid {
height: 300px;
margin: 0 auto;
padding: 0;
}
#grid td {
border: solid 1px #888;
}
#grid .gridSelectedData {
background-color: #1E90FF;
color: white;
}
#grid input[type="checkbox"] {
vertical-align: middle;
}
#grid .gridCell {
text-align: center;
white-space: nowrap;
}
#grid .gridHeaderRow {
background-color: rgb(89, 87, 87);
border-bottom-style: double;
color : whitesmoke;
}
#grid .gridMainBox [data-h5-dyn-grid-property-name="name"] .gridCell {
margin-left: 5px;
text-align: left;
white-space: nowrap;
}
#grid .gridMainBox [data-h5-dyn-grid-property-name="mail"] .gridCell {
margin-left: 5px;
text-align: left;
white-space: nowrap;
}
#grid .gridMainBox [data-h5-dyn-grid-property-name="tel"] .gridCell {
margin-left: 5px;
text-align: left;
white-space: nowrap;
}
.gridCellInfo{
height: 400px;
border: solid 1px;
overflow-x: auto;
white-space: pre;
}
.gridSortAscIcon > span {
position: absolute;
top: 3px;
left: 13px;
}
.gridSortDescIcon > span {
position: absolute;
top: 3px;
left: 13px;
}

view raw
gistfile1.txt
hosted with ❤ by GitHub

JavaScriptについて

JavaScriptではまず、幾つかの必要な設定を行います。

var datagrid = h5.ui.components.datagrid;

view raw
index.js
hosted with ❤ by GitHub

これらはグリッド表示で使われるハンドラーと、グリッドライブラリ本体です。

初期値について

データグリッドを利用する際には表示の初期設定を行う必要があります。詳しくは別記事で紹介します。

var initParam = {
searcher: {
type: 'all'
},
mapper: {
type: 'property',
param: {
direction: 'vertical',
visibleProperties: {
header: ['id'],
main: ['name', 'position']
},
dataDirectionSize: {
size: 25
}
}
},
// 表示形式とソートアイコンの設定
view: {
type: 'table',
param: {
cellClassDefinition: {},
sortAscIconClasses: ['glyphicon glyphicon-sort-by-alphabet'],
sortDescIconClasses: ['glyphicon glyphicon-sort-by-alphabet-alt']
}
},
// 各カラム単位の設定
properties: {
id: {
size: 70,
sortable: true
},
name: {
size: 100,
sortable: true
},
position: {
size: 110
}
}
};

view raw
index.js
hosted with ❤ by GitHub

コントローラの記述

そしてデータグリッドのコントローラ記述です。メタ情報で#gridを指定します。

var scrollGridController = {
__name: 'datagrid.sample.ScrollGridController',
__meta: {
_gridController: {
rootElement: '#grid'
}
},
_gridController: datagrid.GridController,
__ready: function() {
// 初期表示(後述)
},
};
$(function() {
h5.core.controller('body', scrollGridController);
});

view raw
index.js
hosted with ❤ by GitHub

初期表示について

そしてグリッドのデータ表示部分です。今回は簡単なデータ生成を行った後、それをデータソースとしてグリッドに適用しています。

__ready: function() {
// サンプルデータ生成
var ary = [];
for (var i = 1; i < 1000; i++) {
ary.push({
id: i.toString(),
name: "User #" + i,
position: "Position " + i
});
};
var dataSource = datagrid.createDataSource({
idProperty: 'id',
type: 'local',
param: ary
});
//データグリッド初期化
this._gridController.activate(dataSource, initParam);
datagrid.util.delay(1000, this.own(function() {
this._gridController.search({});
}));
},

view raw
index.js
hosted with ❤ by GitHub


デモはこちらでご覧いただけます。

これでデータグリッド表示の基本形ができあがりました。次回以降、データグリッドを選択した場合や横スクロール対応などを紹介します。

banner_02

From → hifive

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