今回から複数回に渡り JavaScript のデータグリッドコンポーネントである w2ui ついて説明をします。
最近仕事で使うことになったので、簡単な使い方から初めて、いろいろな使い方について紹介していきたいと思います。
w2ui ですが見た目もなかなかな感じで HTML タグの table では表現が難しいものも簡単な指定で可能になります。
それでは簡単な例を以下に示します。
<!DOCTYPE html>
<html>
<head>
<title>w2ui Grid-1</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" />
<script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./dist/w2ui.js"></script>
</head>
<body>
<div id="grid" style="width: 500px; height: 200px;"></div>
<script>
$(function () {
// id="grid" へのグリッド設定
$('#grid').w2grid({
name: 'grid',
columns: [
{ field: 'fname', caption: 'First Name', size: '30%' },
{ field: 'lname', caption: 'Last Name' , size: '30%' },
{ field: 'email', caption: 'Email' , size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '100px' }
],
records: [
{ recid: 1, fname: "John" , lname: "Doe" , email: "jdoe@gmail.com", sdate: "2020/03/01" },
{ recid: 2, fname: "Stuart" , lname: "Motzart", email: "smot@gmail.com", sdate: "2020/03/12" },
{ recid: 3, fname: "Jin" , lname: "Franson", email: "jgra@gmail.com", sdate: "2020/03/13" },
{ recid: 4, fname: "Susan" , lname: "Ottie" , email: "sott@gmail.com", sdate: "2020/03/24" },
{ recid: 5, fname: "Kelly" , lname: "Silver" , email: "ksil@gmail.com", sdate: "2020/03/25" },
{ recid: 6, fname: "Francis", lname: "Gatos" , email: "fgat@gmail.com", sdate: "2020/03/26" },
{ recid: 7, fname: "Mark" , lname: "Welldo" , email: "mwel@gmail.com", sdate: "2020/03/27" },
{ recid: 8, fname: "Thomas" , lname: "Bahh" , email: "tbah@gmail.com", sdate: "2020/03/28" }
]
});
});
</script>
</body>
</html>
グリッドの領域を div タグで宣言し、その領域に対して w2ui の1つの機能である w2grid を設定してやります。 w2grid への引数は1個のオブジェクトとして宣言したものを渡してやります。そのオブジェクトの中に、グリッド用の各種のプロパティを宣言します。
上記の例ではカラムの宣言である columns プロパティと、表示データの中身である records プロパティを宣言します。 それぞれのプロパティはオブジェクトの配列として設定します。さらに columns 、 records ともそれぞれ専用のプロパティで宣言します。
これを実行させると以下の様な表示になります。 （結構簡単にグリッドによるデータ表示が実現できると思います）
■columns プロパティのオブジェクト配列の内部プロパティについて
| プロパティ名 | 説明 | 備考 |
|---|---|---|
| caption | カラムのキャプション | デフォルト:'' |
| field | レコードのフィールド名 | デフォルト:'' |
| size | カラムの幅 px OR ％ | 数値のみは px |
| min | カラムの最小幅 px | デフォルト:15 |
| max | カラムの最大幅 px | |
| hidden | 非表示カラムの指定 | デフォルト:false |
| render | 表示文字列 OR レンダリング関数 | レンダリング関数: render(function(record, [index], [column_index])) を宣言できる <例:> render: function (record) { return '<div>'+record.fname+' '+record.lname+'</div>'; } |
| editable | 編集可能フィールドの指定 | オブジェクトとして指定する オブジェクトのプロパティとして type , min , max などがある <例:> editable: { type:"int", min: 0, max: 999 } |
| frozen | 左固定列の指定 |
columns 用プロパティは他にもありますが、以上が重要なプロパティです。 尚、editable は内部にプロパティを持つので、以下にその代表的なものを示します。
■editable の内部プロパティについて
| プロパティ名 | 説明 | 備考 |
|---|---|---|
| type | フィールドの型宣言 | 型には以下のものがあります
|
| min | 入力最小値 | |
| max | 入力最大値 |
■w2ui のダウンロードについて
w2ui をダウンロードするには以下のサイトにアクセスして下さい。
⇒https://github.com/vitmalina/w2ui
該当のサイトを開いてから、 「Clone or download」の緑色のボタンをクリックしてダウンロードします。
ダウンロードしたソースには各種デモが入っていますので、テストしてみてはいかがでしょうか。
尚、今後はいろんな使い方をご紹介したいと思います。
コメント