tpextbuilder- Form表單

支援的元件

/**
 * Methods.
 *
 * Field          field($name, $label = '', $colSize = 12)
 * Text           text($name, $label = '', $colSize = 12)
 * Checkbox       checkbox($name, $label = '', $colSize = 12)
 * Radio          radio($name, $label = '', $colSize = 12)
 * Button         button($type, $label = '', $colSize = 12)
 * Select         select($name, $label = '', $colSize = 12)
 * MultipleSelect multipleSelect($name, $label = '', $colSize = 12)
 * Textarea       textarea($name, $label = '', $colSize = 12)
 * Hidden         hidden($name)
 * Color          color($name, $label = '', $colSize = 12)
 * RangeSlider    rangeSlider($name, $label = '', $colSize = 12)
 * File           file($name, $label = '', $colSize = 12)
 * Image          image($name, $label = '', $colSize = 12)
 * Date           date($name, $label = '', $colSize = 12)
 * Datetime       datetime($name, $label = '', $colSize = 12)
 * Time           time($name, $label = '', $colSize = 12)
 * Year           year($name, $label = '', $colSize = 12)
 * Month          month($name, $label = '', $colSize = 12)
 * DateRange      dateRange($name, $label = '', $colSize = 12)
 * DateTimeRange  datetimeRange($name, $label = '', $colSize = 12)
 * TimeRange      timeRange($name, $label = '', $colSize = 12)
 * Number         number($name, $label = '', $colSize = 12)
 * SwitchBtn      switchBtn($name, $label = '', $colSize = 12)
 * Rate           rate($name, $label = '', $colSize = 12)
 * Divider        divider($text, $label = '', $colSize = 12)
 * Password       password($name, $label = '', $colSize = 12)
 * Decimal        decimal($name, $label = '', $colSize = 12)
 * Html           html($html, $label = '', $colSize = 12)
 * Raw            raw($name, $label = '', $colSize = 12)
 * Show           show($name, $label = '', $colSize = 12)
 * Tags           tags($name, $label = '', $colSize = 12)
 * Icon           icon($name, $label = '', $colSize = 12)
 * MultipleImage  multipleImage($name, $label = '', $colSize = 12)
 * MultipleFile   multipleFile($name, $label = '', $colSize = 12)
 * WangEditor     wangEditor($name, $label = '', $colSize = 12)
 * Tinymce        tinymce($name, $label = '', $colSize = 12)
 * UEditor        ueditor($name, $label = '', $colSize = 12)
 * WangEditor     editor($name, $label = '', $colSize = 12)
 * CKEditor       ckeditor($name, $label = '', $colSize = 12)
 * MDEditor       mdeditor($name, $label = '', $colSize = 12)
 * MDReader       mdreader($name, $label = '', $colSize = 12)
 * Match          match($name, $label = '', $colSize = 12)
 * Matches        matches($name, $label = '', $colSize = 12)
 * Fields         fields($name, $label = '', $colSize = 12)
 * Map            map($name, $label = '', $colSize = 12)
 * Items          items($name, $label = '', $colSize = 12)
 */

特殊元件

fields, items, tab, step

field引數說明

$name 欄位名稱 必填 ,如 goods_name 或 category.name(關聯模型)

$label 顯示label ，不填則取name值

$cloSize col-md-大小，預設:12

form常用方法

//設定欄位元素的預設大小，後面建立的元素就不必一個一個去設定大小了。
$form->defaultDisplayerSize(2, 6);

//設定欄位元素預設`col-md`大小
$form->defaultDisplayerColSize(12);

//只讀，表單裡面所有元素只讀
$form->readonly(true);

//是否使用ajax提交，預設使用，一般按默即可
$form->ajax(true);

//設定表單的id，同一個頁面有多個表單時可設定不同的id，避免js衝突，一般按默即可
$form->formId('form2');

//設定表單提交的url/action
$form->action(url('myaction');

//設定【提交】【重置】按鈕大小
$form->butonsSizeClass('btn-xs');

//禁用自動生成底部【提交】【重置】按鈕
$form->bottomButtons(false);

//手動設定按鈕
$form->btnSubmit('提  交');
$form->btnReset('重  置');
$form->btnBack('返  回');

分組佈局

建議使用fields分組，基於clo-size的分組佈局不易控制，互相影響。

假如要分成左右兩列

1.使用fields:

//第一組：
$form->fields('g1', '', 6)->showLabel(false)->size(0, 12);
$form->text('nickname', '姓名');
$form->text('mobile', '手機號')->maxlength(11);
$form->select('department_id', '部門')->options($departList);
$form->fieldsEnd();

//第二組：
$form->fields('g2', '', 6)->showLabel(false)->size(0, 12);
$form->image('avatar', '照片');
$form->text('school', '學校');
$form->select('nation', '民族')->options($nationList);
$form->fieldsEnd();

2.基於co-sizel分:

$form->defaultDisplayerColSize(6);//設定預設col大小col-md-6，自動分為左右兩列。

$form->text('nickname', '姓名');
$form->text('mobile', '手機號')->maxlength(11);
$form->select('department_id', '部門')->options($departList);
$form->image('avatar', '照片');//圖片高度與其他的不同，容易影響佈局
$form->text('school', '學校');
$form->select('nation', '民族')->options($nationList);

本作品採用《CC 協議》，轉載必須註明作者和本文連結