すでにデータグリッドコンポーネントである w2ui.grid については説明しましたが、 今回から複数回に渡りフォームコンポーネントである w2ui.form ついて説明をしていきます。
w2ui.form で入力フォームを作る場合、フォームの属性を各種のプロパティで設定することで表現できます。
先ずは簡単な例を以下に示します。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.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.5.min.js"></script>
</head>
<body>
<div id="testForm" style="width: 500px"></div>
</body>
<script>
$(function () {
$('#testForm').w2form({
name : 'testForm',
header : 'Test Form',
fields : [
{ field: 'name' , type: 'text', required: true },
{ field: 'address', type: 'text', required: true },
{ field: 'comment', type: 'text'}
],
actions: {
reset: function () {
this.clear();
},
save: function () {
this.save();
}
}
});
});
</script>
</html>
フォームの領域を div タグで宣言し、その領域に対して w2ui の1つの機能である w2form を設定してやります。 w2form への引数は1個のオブジェクトとして宣言したものを渡してやります。そのオブジェクトの中に、フォーム用の各種のプロパティを宣言します。
上記の例ではフォームの名称である name プロパティ、フォームのタイトルである header プロパティ、 入力データの中身である fields プロパティ、さらに処理動作を actions プロパティを宣言します。
さらに fields は各入力フィールドの属性を専用のプロパティで宣言した配列で宣言し actions は行いたい処理をプロパティとして宣言します。 （fields 用のプロパティは下の方で説明します。）
これを実行させると以下の様な表示になります。
■fields プロパティのオブジェクト配列の内部プロパティについて
| プロパティ名 | 説明 | 備考 |
|---|---|---|
| field | 入力フィールド指定 | この値を入力フィールドの name タグと一致させる |
| type | データタイプ | タイプには以下のものがあります(他にもあります)
|
| required | 必須指定 | true:必須指定、false:必須ではない |
| hidden | hidden属性 | true:hidden指定(デフォルト:false) |
| disabled | disabled属性 | true:disabled指定、false:enabled指定(デフォルト) |
| html | HTML文字列の生成 | 各種プロパティがありますがここでは説明を割愛 |
上記の例では自動で入力フィールドなどを生成できることが分かりましたが、 自分で定義したHTMLに対してフォームオブジェクトを関連付けたい場合があります。 通常はフォームのデザイン等を入れたりしたいので、こちらが普通だとは思います。
そこで、入力フィールドの HTML と w2form オブジェクト宣言を分ける例を示します。
■入力フィールドの HTML と w2form オブジェクト宣言を分ける例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.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.5.min.js"></script>
</head>
<body>
<div id="testForm" style="width: 500px">
<div class="w2ui-page page-0">
<div class="w2ui-field">
<label>名前:</label>
<div>
<input name="name" maxlength="100" size="40"/>
</div>
</div>
<div class="w2ui-field">
<label>住所:</label>
<div>
<input name="address" maxlength="100" size="40"/>
</div>
</div>
<div class="w2ui-field">
<label>備考:</label>
<div>
<textarea name="comment" style="width: 300px; height: 50px;"></textarea>
</div>
</div>
</div>
<div class="w2ui-buttons">
<input type="button" value="リセット" name="reset"/>
<input type="button" value="保存" name="save"/>
</div>
</div>
</body>
<script>
$(function () {
$('#testForm').w2form({
name : 'testForm',
header : 'Test Form',
fields : [
{ field: 'name' , type: 'text', required: true },
{ field: 'address', type: 'text', required: true },
{ field: 'comment', type: 'text'}
],
actions: {
reset: function () {
this.clear();
},
save: function () {
this.save();
}
}
});
});
</script>
</html>
これを実行させると以下の様な表示になります。
今後はさらに w2ui.form のいろんな使い方をご紹介したいと思います。
関連する記事
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データの取り込み（url）
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録（save）
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録２（changesデータにレコードを反映し save）
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの書式設定（render）
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定（editable）
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定２（editable, selectType, onCopy, onPaste）
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定３（editable, onKeyDown, onCopy, onPaste）
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・カラム名のグループ化（タイトルの2行表示）
コメント