## form-buider 說明
## [](https://github.com/xaboy/form-builder#參考)參考
* **ui框架:**[iview2.x](http://v2.iviewui.com/docs/guide/install)
* **js表單生成器生成:**[form-create](https://github.com/xaboy/form-create)
* github : [https://github.com/xaboy/form-builder](https://github.com/xaboy/form-builder)
* 參考文檔: [http://www.form-create.com](http://www.form-create.com)
*****
添加產品表單
~~~
$field = [
Form::select('cate_id','產品分類')->setOptions(function(){
$list = CategoryModel::getTierList();
foreach ($list as $menu){
$menus[] = ['value'=>$menu['id'],'label'=>$menu['html'].$menu['cate_name'],'disabled'=>$menu['pid']== 0];//,'disabled'=>$menu['pid']== 0];
}
return $menus;
})->filterable(1)->multiple(1),
Form::input('store_name','產品名稱')->col(Form::col(8)),
Form::input('store_info','產品簡介')->type('textarea'),
Form::input('keyword','產品關鍵字')->placeholder('多個用英文狀態下的逗號隔開'),
Form::input('unit_name','產品單位','件'),
Form::frameImageOne('image','產品主圖片(305*305px)',Url::build('admin/widget.images/index',array('fodder'=>'image')))->icon('image')->width('100%')->height('550px'),
Form::frameImages('slider_image','產品輪播圖(640*640px)',Url::build('admin/widget.images/index',array('fodder'=>'slider_image')))->maxLength(5)->icon('images')->width('100%')->height('550px')->spin(0),
Form::number('price','產品售價')->min(0)->col(8),
Form::number('ot_price','產品市場價')->min(0)->col(8),
Form::number('give_integral','贈送積分')->min(0)->precision(0)->col(8),
Form::number('postage','郵費')->min(0)->col(Form::col(8)),
Form::number('sales','銷量')->min(0)->precision(0)->col(8),
Form::number('ficti','虛擬銷量')->min(0)->precision(0)->col(8),
Form::number('stock','庫存')->min(0)->precision(0)->col(8),
Form::number('cost','產品成本價')->min(0)->col(8),
Form::number('sort','排序')->col(8),
Form::radio('is_show','產品狀態',0)->options([['label'=>'上架','value'=>1],['label'=>'下架','value'=>0]])->col(8),
Form::radio('is_hot','熱賣單品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_benefit','促銷單品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_best','精品推薦',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_new','首發新品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_postage','是否包郵',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8)
];
$form = Form::create(Url::build('save'));
$form->setMethod('post')->setTitle('添加產品')->components($field);
$this->assign(compact('form'));
return $this->fetch('public/form-builder');
~~~
編輯產品表單
~~~
$product = ProductModel::get($id);
$form = Form::create(Url::build('update',array('id'=>$id)),[
Form::select('cate_id','產品分類',explode(',',$product->getData('cate_id')))->setOptions(function(){
$list = CategoryModel::getTierList();
foreach ($list as $menu){
$menus[] = ['value'=>$menu['id'],'label'=>$menu['html'].$menu['cate_name'],'disabled'=>$menu['pid']== 0];//,'disabled'=>$menu['pid']== 0];
}
return $menus;
})->filterable(1)->multiple(1),
Form::input('store_name','產品名稱',$product->getData('store_name')),
Form::input('store_info','產品簡介',$product->getData('store_info'))->type('textarea'),
Form::input('keyword','產品關鍵字',$product->getData('keyword'))->placeholder('多個用英文狀態下的逗號隔開'),
Form::input('unit_name','產品單位',$product->getData('unit_name')),
Form::frameImageOne('image','產品主圖片(305*305px)',Url::build('admin/widget.images/index',array('fodder'=>'image')),$product->getData('image'))->icon('image')->width('100%')->height('550px'),
Form::frameImages('slider_image','產品輪播圖(640*640px)',Url::build('admin/widget.images/index',array('fodder'=>'slider_image')),json_decode($product->getData('slider_image'),1))->maxLength(5)->icon('images'),
Form::number('price','產品售價',$product->getData('price'))->min(0)->precision(2)->col(8),
Form::number('ot_price','產品市場價',$product->getData('ot_price'))->min(0)->col(8),
Form::number('give_integral','贈送積分',$product->getData('give_integral'))->min(0)->precision(0)->col(8),
Form::number('postage','郵費',$product->getData('postage'))->min(0)->col(8),
Form::number('sales','銷量',$product->getData('sales'))->min(0)->precision(0)->col(8),
Form::number('ficti','虛擬銷量',$product->getData('ficti'))->min(0)->precision(0)->col(8),
Form::number('stock','庫存',ProductModel::getStock($id)>0?ProductModel::getStock($id):$product->getData('stock'))->min(0)->precision(0)->col(8),
Form::number('cost','產品成本價',$product->getData('cost'))->min(0)->col(8),
Form::number('sort','排序',$product->getData('sort'))->col(8),
Form::radio('is_show','產品狀態',$product->getData('is_show'))->options([['label'=>'上架','value'=>1],['label'=>'下架','value'=>0]])->col(8),
Form::radio('is_hot','熱賣單品',$product->getData('is_hot'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_benefit','促銷單品',$product->getData('is_benefit'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_best','精品推薦',$product->getData('is_best'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_new','首發新品',$product->getData('is_new'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_postage','是否包郵',$product->getData('is_postage'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8)
]);
$form->setMethod('post')->setTitle('編輯產品');
$this->assign(compact('form'));
return $this->fetch('public/form-builder');
~~~
## AJAX請求返回
`namespace \FormBuilder\Json`
* **Json::succ(msg,data = \[\])**表單提交成功
* **Json::fail(errorMsg,data = \[\])**表單提交失敗
* **Json::uploadSucc(filePath,msg)**文件/圖片上傳成功,上傳成功后返回文件地址
* **Json::uploadFail(errorMsg)**文件/圖片上傳失敗
## [](https://github.com/xaboy/form-builder#form-表單生成類)Form 表單生成類
`namespace \FormBuilder\Form`
* **components(array $components = \[\])**批量添加組件
* **formRow(Row $row)**設置表單Row規則
* **formStyle(FormStyle $formStyle)**設置表單樣式
* **setAction($action)**設置提交地址
* **getConfig($key='')**設置配置文件
* **setMethod($method)**設置提交方式
* **setMethod($method)**設置提交方式
* **append(FormComponentDriver $component)**追加組件
* **prepend(FormComponentDriver $component)**開頭插入組件
* **getRules()**獲得表單規則
* **view()**獲取表單視圖
* **script()**獲取表單生成器所需全部js
* **formScript()**獲取生成表單的js代碼,可用js變量接受生成函數`create`,執行`create(el,callback)`即可生成表單
* **getScript()**獲取表單生成器所需js
* **create($action, array $components = \[\])**生成表單快捷方法
* **setTitle($title)**設置title
## [](https://github.com/xaboy/form-builder#formstyle表單樣式)FormStyle表單樣式
* **Form::style**
~~~html
* @method $this inline(Boolean $bool) 是否開啟行內表單模式
* @method $this labelPosition(String $labelPosition) 表單域標簽的位置,可選值為 left、right、top
* @method $this labelWidth(Number $labelWidth) 表單域標簽的寬度,所有的 FormItem 都會繼承 Form 組件的 label-width 的值
* @method $this showMessage(Boolean $bool) 是否顯示校驗錯誤信息
* @method $this autocomplete($bool = false) 原生的 autocomplete 屬性,可選值為 true = off 或 false = on
~~~
## [](https://github.com/xaboy/form-builder#row柵格規則)Row柵格規則
* **Form::row**
~~~html
* @method $this gutter(Number $gutter) 柵格間距,單位 px,左右平分
* @method $this type(String $type) 柵格的順序,在flex布局模式下有效
* @method $this align(String $align) flex 布局下的垂直對齊方式,可選值為top、middle、bottom
* @method $this justify(String $justify) flex 布局下的水平排列方式,可選值為start、end、center、space-around、space-between
* @method $this className(String $className) 自定義的class名稱
~~~
參考:[view row柵格布局](http://v2.iviewui.com/components/grid#API)
## [](https://github.com/xaboy/form-builder#col柵格規則)Col柵格規則
* **Form::col**
~~~html
* @method $this span(Number $span) 柵格的占位格數,可選值為0~24的整數,為 0 時,相當于display:none
* @method $this order(Number $order) 柵格的順序,在flex布局模式下有效
* @method $this offset(Number $offset) 柵格左側的間隔格數,間隔內不可以有柵格
* @method $this push(Number $push) 柵格向右移動格數
* @method $this pull(Number $pull) 柵格向左移動格數
* @method $this labelWidth(Number $labelWidth) 表單域標簽的的寬度,默認150px
* @method $this className(String $className) 自定義的class名稱
* @method $this xs(Number|Col $span) <768px 響應式柵格,可為柵格數或一個包含其他屬性的對象
* @method $this sm(Number|Col $span) ≥768px 響應式柵格,可為柵格數或一個包含其他屬性的對象
* @method $this md(Number|Col $span) ≥992px 響應式柵格,可為柵格數或一個包含其他屬性的對象
* @method $this lg(Number|Col $span) ≥1200px 響應式柵格,可為柵格數或一個包含其他屬性的對象
~~~
參考:[view col柵格布局](http://v2.iviewui.com/components/grid#API)
## [](https://github.com/xaboy/form-builder#selectcheckboxradio組件配置options專用方法)select,checkbox,radio組件配置options專用方法
* **option($value, $label, $disabled = false)**單獨設置選項
* **options(array $options, $disabled = false)**批量設置選項
* **setOptions($options, $disabled = false)**批量設置選項 支持匿名函數
## [](https://github.com/xaboy/form-builder#以下組件公共方法)以下組件公共方法
* **col($span)**配置col柵格規則,傳入0-24的數字或`Col`類,默認為24
* **value($value)**設置組件的值
* **validateAs(array $validate)**添加驗證規則
* **validate()**設置驗證規則[規則說明](https://github.com/xaboy/form-builder/blob/master/src/components/Validate.php)
## [](https://github.com/xaboy/form-builder#組件)組件
`namespace \FormBuilder\Form`
#### [](https://github.com/xaboy/form-builder#多級聯動組件)多級聯動組件
* **Form::cascader**多級聯動組件,value為array類型
* **Form::city**省市二級聯動,value為array類型
* **Form::cityArea**省市區三級聯動,value為array類型
~~~html
方法 返回值 方法名(參數) 注釋
* @method $this type(String $type) 數據類型, 支持 city_area(省市區三級聯動), city (省市二級聯動), other (自定義)
* @method $this disabled(Boolean $bool) 是否禁用選擇器
* @method $this clearable(Boolean $bool) 是否支持清除
* @method $this placeholder(String $placeholder) 占位文本
* @method $this trigger(String $trigger) 次級菜單展開方式,可選值為 click 或 hover
* @method $this changeOnSelect(Boolean $bool) 當此項為 true 時,點選每級菜單選項值都會發生變化, 默認為 false
* @method $this size(String $size) 輸入框大小,可選值為large和small或者不填
* @method $this filterable(Boolean $bool) 是否支持搜索
* @method $this notFoundText(String $text) 當搜索列表為空時顯示的內容
* @method $this transfer(Boolean $bool) /是否將彈層放置于 body 內,在 Tabs、帶有 fixed 的 Table 列內使用時,建議添加此屬性,它將不受父級樣式影響,從而達到更好的效果
* @method $this required($message = null, $trigger = 'change') 設為必選
* @method $this data(array $data) 設置多級聯動可選項的數據
* 例如: {
* "value":"北京市", "label":"北京市", "children":[{
* "value":"東城區", "label":"東城區"
* }]
* }
* @method $this jsData($var) 設置data為js變量
* @method string getType($var) 獲取組件類型
~~~
#### [](https://github.com/xaboy/form-builder#復選框組件)復選框組件
* **Form::checkbox**
~~~html
* @method $this size(String $size) 多選框組的尺寸,可選值為 large、small、default 或者不設置
* @method $this required($message = null, $trigger = 'change') 設為必選
~~~
#### [](https://github.com/xaboy/form-builder#顏色選擇組件)顏色選擇組件
* **Form::color**
~~~html
* @method $this disabled(Boolean $bool) 是否禁用
* @method $this alpha(Boolean $bool) 是否支持透明度選擇, 默認為false
* @method $this hue(Boolean $bool) 是否支持色彩選擇, 默認為true
* @method $this recommend(Boolean $bool) 是否顯示推薦的顏色預設, 默認為false
* @method $this size(String $size) 尺寸,可選值為large、small、default或者不設置
* @method $this format(String $format) 顏色的格式,可選值為 hsl、hsv、hex、rgb String 開啟 alpha 時為 rgb,其它為 hex
* @method $this required($message = null, $trigger = 'change') 設為必選
* @method $this colors($colors) 自定義顏色預設
~~~
#### [](https://github.com/xaboy/form-builder#日期選擇組件)日期選擇組件
* **Form::date**日期選擇
* **Form::dateRange**日期區間選擇,value為array類型
* **Form::dateTime**日期+時間選擇
* **Form::dateTimeRange**日期+時間 區間選擇,value為array類型
* **Form::year**年份選擇
* **Form::month**月份選擇
~~~html
* @method $this type(String $type) 顯示類型,可選值為 date、daterange、datetime、datetimerange、year、month
* @method $this format(String $format) 展示的日期格式, 默認為yyyy-MM-dd HH:mm:ss
* @method $this placement(String $placement) 日期選擇器出現的位置,可選值為top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end, 默認為bottom-start
* @method $this placeholder(String $placeholder) 占位文本
* @method $this confirm(Boolean $bool) 是否顯示底部控制欄,開啟后,選擇完日期,選擇器不會主動關閉,需用戶確認后才可關閉, 默認為false
* @method $this size(String $size) 尺寸,可選值為large、small、default或者不設置
* @method $this disabled(Boolean $bool) 是否禁用選擇器
* @method $this clearable(Boolean $bool) 是否顯示清除按鈕
* @method $this readonly(Boolean $bool) 完全只讀,開啟后不會彈出選擇器,只在沒有設置 open 屬性下生效
* @method $this editable(Boolean $bool) 文本框是否可以輸入, 默認為false
* @method $this transfer(Boolean $bool) 是否將彈層放置于 body 內,在 Tabs、帶有 fixed 的 Table 列內使用時,建議添加此屬性,它將不受父級樣式影響,從而達到更好的效果, 默認為false
* @method $this splitPanels(Boolean $bool) 開啟后,左右面板不聯動,僅在 daterange 和 datetimerange 下可用。
* @method $this showWeekNumbers(Boolean $bool) 開啟后,可以顯示星期數。
~~~
#### [](https://github.com/xaboy/form-builder#frame組件)frame組件
* **Form::frame**frame組件
* **Form::frameInputs**frame組件,input類型,value為array類型
* **Form::frameFiles**frame組件,file類型,value為array類型
* **Form::frameImages**frame組件,image類型,value為array類型
* **Form::frameInputOne**frame組件,input類型,value為string|number類型
* **Form::frameFileOne**frame組件,file類型,value為string|number類型
* **Form::frameImageOne**frame組件,image類型,value為string|number類型
~~~html
* @method $this type(String $type) frame類型, 有input, file, image, 默認為input
* @method $this src(String $src) iframe地址
* @method $this maxLength(int $length) value的最大數量, 默認無限制
* @method $this icon(String $icon) 打開彈出框的按鈕圖標
* @method $this height(String $height) 彈出框高度
* @method $this width(String $width) 彈出框寬度
* @method $this spin(Boolean $bool) 是否顯示加載動畫, 默認為 true
* @method $this frameTitle(String $title) 彈出框標題
* @method $this handleIcon(Boolean $bool) 操作按鈕的圖標, 設置為false將不顯示, 設置為true為默認的預覽圖標, 類型為file時默認為false, image類型默認為true
* @method $this allowRemove(Boolean $bool) 是否可刪除, 設置為false是不顯示刪除按鈕
~~~
#### [](https://github.com/xaboy/form-builder#hidden組件)hidden組件
* **Form::hidden**hidden組件
#### [](https://github.com/xaboy/form-builder#數字輸入框組件)數字輸入框組件
* **Form::number**
~~~html
* @method $this max(float $max) 最大值
* @method $this min(float $min) 最小值
* @method $this step(float $step) 每次改變的步伐,可以是小數
* @method $this size(String $size) 輸入框尺寸,可選值為large、small、default或者不填
* @method $this disabled(Boolean $bool) 設置禁用狀態,默認為false
* @method $this placeholder(String $placeholder) 占位文本
* @method $this readonly(Boolean $bool) 是否設置為只讀,默認為false
* @method $this editable(Boolean $bool) 是否可編輯,默認為true
* @method $this precision(int $precision) 數值精度
~~~
#### [](https://github.com/xaboy/form-builder#input輸入框組件)input輸入框組件
* **Form::input**input輸入框
> 其他type: text類型`Form::text`,password類型`Form::password`,textarea類型`Form::textarea`,url類型`Form::url`,email類型`Form::email`,date類型`Form::idate`
~~~html
* @method $this type(String $type) 輸入框類型,可選值為 text、password、textarea、url、email、date;
* @method $this size(String $size) 輸入框尺寸,可選值為large、small、default或者不設置;
* @method $this placeholder(String $placeholder) 占位文本
* @method $this clearable(Boolean $bool) 是否顯示清空按鈕, 默認為false
* @method $this disabled(Boolean $bool) 設置輸入框為禁用狀態, 默認為false
* @method $this readonly(Boolean $bool) 設置輸入框為只讀, 默認為false
* @method $this maxlength(int $length) 最大輸入長度
* @method $this icon(String $icon) 輸入框尾部圖標,僅在 text 類型下有效
* @method $this rows(int $rows) 文本域默認行數,僅在 textarea 類型下有效, 默認為2
* @method $this number(Boolean $bool) 將用戶的輸入轉換為 Number 類型, 默認為false
* @method $this autofocus(Boolean $bool) 自動獲取焦點, 默認為false
* @method $this autocomplete(Boolean $bool) 原生的自動完成功能, 默認為false
* @method $this spellcheck(Boolean $bool) 原生的 spellcheck 屬性, 默認為false
* @method $this wrap(String $warp) 原生的 wrap 屬性,可選值為 hard 和 soft, 默認為soft
* @method $this autoSize($minRows, $maxRows) 自適應內容高度,僅在 textarea 類型下有效
~~~
#### [](https://github.com/xaboy/form-builder#單選框組件)單選框組件
* **Form::radio**
~~~html
* @method $this size(String $size) 單選框的尺寸,可選值為 large、small、default 或者不設置
* @method $this vertical(Boolean $bool) 是否垂直排列,按鈕樣式下無效
* @method $this button() 使用按鈕樣式
* @method $this required($message = null, $trigger = 'change') 設為必選
~~~
#### [](https://github.com/xaboy/form-builder#評分組件)評分組件
* **Form::rate**
~~~html
* @method $this count(int $star) star 總數, 默認為 5
* @method $this allowHalf(Boolean $bool) 是否允許半選, 默認為 false
* @method $this disabled(Boolean $bool) 是否只讀,無法進行交互, 默認為
* @method $this showText(Boolean $bool) 是否顯示提示文字, 默認為 false
* @method $this clearable(Boolean $bool) 是否可以取消選擇, 默認為 false
~~~
#### [](https://github.com/xaboy/form-builder#select選擇框組件)select選擇框組件
* **Form::select**選擇框
* **Form::selectMultiple**select選擇框,多選,value為array類型
* **Form::selectOne**select選擇框,單選
~~~html
* @method $this multiple(Boolean $bool) 是否支持多選, 默認為false
* @method $this disabled(Boolean $bool) 是否禁用, 默認為false
* @method $this clearable(Boolean $bool) 是否可以清空選項,只在單選時有效, 默認為false
* @method $this filterable(Boolean $bool) 是否支持搜索, 默認為false
* @method $this size(String $size) 選擇框大小,可選值為large、small、default或者不填
* @method $this placeholder(String $placeholder) 占位文本
* @method $this transfer(String $transfer) 是否將彈層放置于 body 內,在 Tabs、帶有 fixed 的 Table 列內使用時,建議添加此屬性,它將不受父級樣式影響,從而達到更好的效果, 默認為false
* @method $this placement(String $placement) 彈窗的展開方向,可選值為 bottom 和 top, 默認為bottom
* @method $this notFoundText(String $text) 當下拉列表為空時顯示的內容, 默認為 無匹配數據
* @method $this required($message = null, $trigger = 'change') 設為必選
~~~
#### [](https://github.com/xaboy/form-builder#滑塊組件)滑塊組件
* **Form::slider**滑塊組件
* **Form::sliderRange**滑塊組件,區間選擇,
~~~html
* @method $this min(float $min) 最小值, 默認 0
* @method $this max(float $max) 最大值, 默認 100
* @method $this step(float $step) 步長,取值建議能被(max - min)整除, 默認 1
* @method $this disabled(Boolean $bool) 是否禁用滑塊, 默認 false
* @method $this range(Boolean $bool) 是否開啟雙滑塊模式, 默認
* @method $this showInput(Boolean $bool) 是否顯示數字輸入框,僅在單滑塊模式下有效, 默認 false
* @method $this showStops(Boolean $bool) 是否顯示間斷點,建議在 step 不密集時使用, 默認 false
* @method $this showTip(String $tip) 提示的顯示控制,可選值為 hover(懸停,默認)、always(總是可見)、never(不可見)
* @method $this inputSize(String $size) 數字輸入框的尺寸,可選值為large、small、default或者不填,僅在開啟 show-input 時有效
~~~
#### [](https://github.com/xaboy/form-builder#開關組件組件)開關組件組件
* **Form::switches**
~~~html
* @method $this size(String $size) 開關的尺寸,可選值為large、small、default或者不寫。建議開關如果使用了2個漢字的文字,使用 large。
* @method $this disabled(Boolean $bool) 禁用開關, 默認為false
* @method $this trueValue(String $value) 選中時的值,默認為1
* @method $this falseValue(String $value) 沒有選中時的值,默認為0
* @method $this openStr(String $open) 自定義顯示打開時的內容
* @method $this closeStr(String $close) 自定義顯示關閉時的內容
~~~
#### [](https://github.com/xaboy/form-builder#時間選擇組件)時間選擇組件
* **Form::timePicker**時間選擇組件
* **Form::time**時間選擇
* **Form::timeRange**時間區間選擇,value為array類型
~~~html
* @method $this type(String $type) 顯示類型,可選值為 time、timerange
* @method $this format(String $format) 展示的時間格式, 默認為HH:mm:ss
* @method $this placement(String $placement) 時間選擇器出現的位置,可選值為top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end, 默認為bottom-start
* @method $this placeholder(String $placeholder) 占位文本
* @method $this confirm(Boolean $bool) 是否顯示底部控制欄, 默認為false
* @method $this size(String $size) 尺寸,可選值為large、small、default或者不設置
* @method $this disabled(Boolean $bool) 是否禁用選擇器
* @method $this clearable(Boolean $bool) 是否顯示清除按鈕
* @method $this readonly(Boolean $bool) 完全只讀,開啟后不會彈出選擇器,只在沒有設置 open 屬性下生效
* @method $this editable(Boolean $bool) 文本框是否可以輸入, 默認為false
* @method $this transfer(Boolean $bool) 是否將彈層放置于 body 內,在 Tabs、帶有 fixed 的 Table 列內使用時,建議添加此屬性,它將不受父級樣式影響,從而達到更好的效果, 默認為false
* @method $this steps($h, $i = 0, $s = 0) 下拉列表的時間間隔,數組的三項分別對應小時、分鐘、秒, 例如設置為 [1, 15] 時,分鐘會顯示:00、15、30、45。
~~~
#### [](https://github.com/xaboy/form-builder#上傳組件)上傳組件
* **Form::upload**上傳組件
* **Form::uploadImages**多圖上傳組件,value為array類型
* **Form::uploadFiles**多文件上傳組件,value為array類型
* **Form::uploadImageOne**單圖上傳組件
* **Form::uploadFileOne**單文件上傳組件
~~~html
* @method $this uploadType(String $uploadType) 上傳文件類型,可選值為 image(圖片上傳),file(文件上傳)
* @method $this action(String $action) 上傳的地址
* @method $this multiple(Boolean $bool) 是否支持多選文件
* @method $this name(String $name) 上傳的文件字段名
* @method $this accept(String $accept) 接受上傳的文件類型
* @method $this maxSize(int $size) 文件大小限制,單位 kb
* @method $this withCredentials(Boolean $bool) 支持發送 cookie 憑證信息, 默認為false
* @method $this maxLength(Int $length) 最大上傳文件數, 0為無限
* @method $this headers(array $headers) 設置上傳的請求頭部
* @method $this format(array $format) 支持的文件類型,與 accept 不同的是,format 是識別文件的后綴名,accept 為 input 標簽原生的 accept 屬性,會在選擇文件時過濾,可以兩者結合使用
* @method $this data(array $data) 上傳時附帶的額外參數
* @method $this required($message = null, $trigger = 'change') 設為必選
~~~
#### [](https://github.com/xaboy/form-builder#樹型組件)樹型組件
* **Form::tree**樹型組件
* **Form::treeSelected**選中類型,value為array類型,當`type=selected`并且`multiple=false`,值為String或Number類型
* **Form::treeChecked**選擇類型,value為array類型
~~~html
* @method $this type(String $type) 類型,可選值為 checked、selected
* @method $this multiple(Boolean $bool) 是否支持多選,當`type=selected`并且`multiple=false`,默認為false,值為String或Number類型,其他情況為Array類型
* @method $this showCheckbox(Boolean $bool) 是否顯示多選框,默認為false
* @method $this emptyText(String $emptyText) 沒有數據時的提示,默認為'暫無數據'
* @method $this data(array $treeData) 設置可選的data,**id必須唯一**
* @method $this jsData($var) 設置data為js變量
~~~
## [](https://github.com/xaboy/form-builder#樹型組件data數據類-treedata)樹型組件data數據類 TreeData
* **Form::treeData**樹型組件data
~~~html
* @method $this id(String $id) Id,必須唯一
* @method $this title(String $title) 標題
* @method $this expand(Boolean $bool) 是否展開直子節點,默認為false
* @method $this disabled(Boolean $bool) 禁掉響應,默認為false
* @method $this disableCheckbox(Boolean $bool) 禁掉 checkbox
* @method $this selected(Boolean $bool) 是否選中子節點
* @method $this checked(Boolean $bool) 是否勾選(如果勾選,子節點也會全部勾選)
* @method $this children(array $children) 批量設置子集
* @method $this child(TreeData $child) 設置子集
~~~
## [](https://github.com/xaboy/form-builder#所有組件生成效果)所有組件生成效果
[](https://raw.githubusercontent.com/xaboy/form-builder/master/images/components.png)
- 前言
- 授權協議
- 免費技術支持
- 商業技術支持
- 系統簡介
- 安裝流程
- 運行環境
- URL重寫
- 一鍵安裝
- 手動安裝
- 服務器及系統搭建
- 1.服務器購買
- 2.服務器配置
- 3.寶塔配置
- 4.域名購買(已有域名跳過)
- 5.域名配置
- 6.創建站點
- 7.源碼安裝
- 8.設置偽靜態
- 9.SSL證書https域名配置
- 10.系統設置(非常重要)
- 公眾號配置指南
- 1.授權域名配置
- 2.公眾號token配置
- 3.公眾號開發配置
- 4.公眾號支付配置
- 5.系統后臺支付配置
- 6.微信菜單配置
- 7.模版消息配置
- V2.6公眾號頁面說明
- 小程序配置指南
- 1.小程序后臺配置
- 2.系統后臺小程序配置
- 3.小程序代碼提交
- 4.小程序提交審核發布
- 5.小程序客服配置
- 6.小程序模版消息配置
- 7.小程序支付配置
- v2.6小程序頁面說明
- 安裝常見問題
- 安裝常見錯誤
- 安裝時數據庫問題
- 文件權限修改
- 后臺常見錯誤
- 后臺忘記密碼
- 后臺錯誤查看方法
- 常見HTTP請求錯誤
- 公眾號常見錯誤
- SSL證書配置
- 系統配置
- 站點配置
- 后臺權限管理
- 身份管理
- 管理員管理
- 權限規則菜單
- 分類配置
- 組合數據
- 小程序配置指南
- 配置前期準備
- 注冊小程序
- 小程序支付申請
- 小程序信息完善及開發前準備
- 小程序綁定微信開放平臺帳號
- 公眾號關聯小程序
- v2.6操作說明
- 小程序商城首頁
- v 2.6 小程序首頁【新聞簡報】
- v2.6 小程序首頁活動區域圖
- v 2.6 小程序首頁模塊簡介
- V 2.6小程序首頁精品推薦輪播
- 商品管理
- 商品分類管理
- 產品添加、修改管理
- 產品詳情管理
- 產品屬性管理
- 淘寶寶貝一鍵導入
- 關于分銷
- 分銷機制
- 分銷設置
- 關于拼團
- 拼團機制
- 新建拼團活動
- 關于砍價
- 砍價機制
- 開啟砍價
- 關于秒殺
- 秒殺機制
- 新建秒殺活動
- 關于優惠券
- 優惠券發布
- 優惠券使用
- 客服配置
- 公眾號客服
- 小程序客服
- v2.6目錄說明
- V2.5操作說明
- 修改后臺登錄密碼
- banner圖及其他圖標設置
- 產品分類管理
- 產品管理
- 添加/修改產品
- 添加產品屬性
- 商城訂單管理
- 分銷設置
- 優惠券設置發布
- 開啟砍價活動
- 開啟拼團活動
- 后臺分權限管理
- 小程序詳情頁客服電話設置
- 小程序頁面說明
- v2.0版操作說明
- 第一章 引言
- 1.文章摘要
- 2.讀者對象
- 第二章 后臺使用操作方法
- 1. 賬號登錄
- 2.系統布局說明
- 3.用戶管理
- 3.1 用戶管理
- 3.2用戶通知
- 3.3用戶充值記錄
- 3.4用戶提現記錄
- 4.商城管理
- 4.1產品管理
- 4.2優惠券
- 4.3訂單管理
- 4.4拼團管理
- 4.5秒殺管理
- 4.6評論管理
- 5.統計管理
- 5.1訂單統計
- 5.2用戶統計
- 5.3產品統計
- 5.4財務統計
- 6.管理員中心
- 6.1身份管理
- 6.2管理員列表
- 6.3權限規則
- 6.4管理員操作記錄
- 6.5個人資料
- 7.系統配置
- 7.1組合數據
- 7.2系統配置
- 7.3配置分類
- 8.公眾號管理
- 8.1微信用戶管理
- 8.2客服管理
- 8.3圖文管理
- 8.4微信配置
- 8.5關鍵字管理
- 9.內容管理
- 9.1文章分類管理
- 9.2文章管理
- 系統說明
- 目錄結構
- 開發規范
- 數據字典
- 系統類
- 模版變量
- 后臺全局JS
- 公眾號模版JS
- 后臺表單說明