[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
今回から複数回に渡り 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」の緑色のボタンをクリックしてダウンロードします。
ダウンロードしたソースには各種デモが入っていますので、テストしてみてはいかがでしょうか。
尚、今後はいろんな使い方をご紹介したいと思います。
コメント