2012年11月16日金曜日

FuelPHPのfieldsetでボタンやINPUTを並べて表示

まず参考記事

ほとんど見よう見まねですが自分なりにFieldsetを拡張してみました。
やりたかったのは1つでボタンとかINPUTを並べて表示したい。てだけです。

最終的なイメージはこんなかんじ

参考記事と同様にパッケージ化してみました。Githubに置いてるのでバグとかあれば教えてください。


使い方は簡単です。
まず、Githubからパッケージをダウンロードしてpackagesフォルダに配置します。
https://github.com/hayashida/Fieldsetplus

つぎに、app/config/config.phpを修正
'always_load' => array(
    'packages' => array(
        'fieldsetplus',
    ),
),

準備はこれだけです。
あとはController側。
public function action_create()
{
    $fieldset = Fieldsetplus::forge();

    $fieldset->add_group(
        'name',     // name
        '名前',     // label
        array(
            array('name1', '姓', array(), array(array('required'))),
            array('name2', '名', array(), array(array('required'))),
        )
    );

    $fieldset->add('created_at', '作成日')
            ->add_rule('required')
            ->add_rule('valid_date');

    $fieldset->add_group(
        'buttons',  // name
        '',  // label
        array(
            array('submit', '', array('type' => 'submit', 'value' => '登録')),
            array('reset', '', array('type' => 'reset', 'value' => 'やり直し')),
        )
    );

    $this->template->title = 'Create';
    $this->template->content = View::forge('user/create');
    $this->template->content->set_safe('fieldset', $fieldset->build());
}

並べたい項目を add_group を使って定義します。
引数は順に、グループ名・ラベル・フィールド情報となっています。
ラベルを空白に設定すると1行(<td colspan="2">)として表示します。
フィールド情報は一見、難しそうに見えますが Fieldset の add と同じです。
Fieldset - Classes - FuelPHP Documentation

View側のソースは従来のFieldsetと同じ
<?php echo $fieldset; ?>

これでOK。
出力した結果はページの上に貼ってる通りに表示されるはずです。
自動生成されたソースはこんなかんじになります。
<form action="" accept-charset="utf-8" method="post">
<table>
    <tr>
        <td class="">名前*</td>
        <td class=""><label for="form_name1">姓</label> <input type="text" required="required" id="form_name1" name="name1" /> <label for="form_name2">名</label> <input type="text" required="required" id="form_name2" name="name2" />  <span></span> </td>
    </tr>
    <tr>
        <td class=""><label for="form_created_at">作成日</label>*</td>
        <td class=""><input type="text" required="required" id="form_created_at" name="created_at" /> <span></span> </td>
    </tr>
    <tr>
        <td class="field_groups " colspan="2">
            <input type="submit" value="登録" id="form_submit" name="submit" /> <input type="reset" value="やり直し" id="form_reset" name="reset" /> 
        </td>
    </tr>
</table>
</form>




0 件のコメント:

コメントを投稿