Category Archive Yii

ตามปกติ form ของ yii ที่ใช้ GII generate ออกมาจะเป็นรูปแบบ label บรรทัดหนึ่ง input อีกบรรทัดหนึ่ง อ่านง่าย สวยงามพอสมควร แต่อาจจะไม่ถูกใจบรรดาหัวหน้าอนุรักษ์นิยมทั้งหลาย

yii มีอีกทางเลือกให้ใช้ทำฟอร์ม คือ มี Horizontal form ให้เลือกใช้ yii bootstrap activeform (Horizontal form) อีกตัว

วิธีการคือ

1. เปิดไฟล์ _form.php ใน view เป้าหมาย
2. เปลี่ยน use yii\widgets\ActiveForm; เป็น use yii\bootstrap\ActiveForm; ถ้าไม่เปลี่ยนจะเจอ error Setting unknown property: yii\widgets\ActiveForm::layout
3. เปลี่ยน
   ?

   1	$form = ActiveForm::begin();

   เป็น

   ?

   1 2 3 4 5 6 7 8 9 10

   $form = ActiveForm::begin([     'fieldConfig' => [         'horizontalCssClasses' => [             'label' => 'col-sm-2',             'offset' => 'col-sm-offset-2',             'wrapper' => 'col-sm-10'         ]     ],     'layout' => 'horizontal' ]);

สำเร็จแล้ว ฟอร์มจะเปลี่ยนเป็นรูปแบบเหมือนกับ Bootstrap Horizontal form โดย

• layout คือ จะวางฟอร์มเป็นแบบไหน มีให้เลือก คือ default, horizontal และ inline
• label คือ ค่า grid ของ label
• wrapper คือ ความกว้างของช่อง input
• offset คือ การเว้นระยะของพวก checkbox ตั้งไว้เท่ากับ label จะได้ตรงกันพอดี

เสร็จแล้ว หรือจะใช้การจัด code แบบของผมก็ได้ครับ ไม่อยากสลับ php เข้าออก ไปๆ มาๆ

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<?php   use yii\helpers\Html; use yii\bootstrap\ActiveForm;   ?>   <div class="user-form"> <?php $form = ActiveForm::begin([     'fieldConfig' => [         'horizontalCssClasses' => [             'label' => 'col-sm-2',             'offset' => 'col-sm-offset-2',             'wrapper' => 'col-sm-10'         ]     ],     'layout' => 'horizontal' ]);   echo $form->field($model, 'username')->textInput(), $form->field($model, 'email')->textInput(), $form->field($model, 'status')->checkbox(array('label'=>'enable')), '<div class="form-group">',Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']); ActiveForm::end(); echo'</div>';