w2uiでグリッドを作るのはとても簡単。
まずはw2uiを使用する準備ですが、googleのCDNとw2uiサイトのsrcをheadタグ内に配置します。
※環境によってはjQueryとw2uiのjs,cssをダウンロードして使用してください。
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.min.js"></script>次に、グリッドを配置したい場所に以下のようにdiv要素を配置します。
<body>
<div id="myGrid" style="height: 450px"></div>
</body>
javascriptは以下のように書きます。
$('#myGrid').w2grid({
name : 'myGrid',
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: '120px' },
],
records: [
{ recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
]
});records で指定しているrecidはグリッドデータの主キーになる部分です。このrecidを用いてgrid内のデータにアクセスしたり、データを更新したりします。 上の例はレコードを直書きしていますが、json形式でサーバーから受信させる場合にもrecidは指定する必要があり、recidが重複すると、エラーは出ませんがグリッドの動作がおかしくなりますので注意が必要です。
