表單組件 form fastadmin（生成表單元素）

Form組件

定義文件位置：

/extend/fast/Formphp

通用參數

$name 通常為我們組件的名稱（name屬性值），我們在后台接收時可以通過這個名稱來獲取到它所對應的值
$value 通常為我們數據庫中的值（元素value值），在新增的時候通常為空，在修改的時候通常需要是數據庫中對應字段的值
$options 組件的擴展屬性，通常為一一鍵值匹配並最終渲染在組件的屬性中，通常我們使用的有data-rule/disabled/readonly/multiple等等，也常用於自定義組件屬性。

前端展示：

方法1 php輸出：

 //必須namespace fast\Form;
 echo Form::text('id',123456789,[]);

form組件列表：

//生成Token
Form::token() 
//Label標簽
Form::label(string $name, string $value = null, array $options = []) 
//按類型生成文本框
Form::input($type, $name, string $value = null, array $options = [])
//普通文本框 
Form::text(string $name, string $value = null, array $options = []) 
//密碼文本框
Form::password(string $name, array $options = []) 
//隱藏文本框
Form::hidden(string $name, string $value = null, array $options = [])
//Email文本框 
Form::email(string $name, string $value = null, array $options = []) 
//URL文本框
Form::url(string $name, string $value = null, array $options = []) 
//文件組件
Form::file(string $name, array $options = []) 
//多行文本框
Form::textarea(string $name, string $value = null, array $options = []) 
//富文本編輯器
Form::editor(string $name, string $value = null, array $options = []) 
//下拉列表組件
Form::select(string $name, array $list = [], string $selected = null, array $options = []) 
//下拉列表組件(多選)
Form::selects(string $name, array $list = [], string $selected = null, array $options = []) 
//下拉列表組件(友好)
Form::selectpicker(string $name, array $list = [], string $selected = null, array $options = []) 
//下拉列表組件(友好)(多選)
Form::selectpickers(string $name, array $list = [], string $selected = null, array $options = []) 
//動態下拉列表組件
Form::selectpage(string $name, string $value, string $url, string $field = null, string $primaryKey = null, array $options = []) 
//動態下拉列表組件(多選)
Form::selectpages(string $name, string $value, string $url, string $field = null, string $primaryKey = null, array $options = []) 
//城市選擇組件
Form::citypicker(string $name, string $value, array $options = []) 
//開關組件
Form::switcher(string $name, string $value, array $options = []) 
//日期選擇組件
Form::datepicker(string $name, string $value, array $options = []) 
//時間選擇組件
Form::timepicker(string $name, string $value, array $options = []) 
//日期時間選擇組件
Form::datetimepicker(string $name, string $value, array $options = []) 
//日期區間組件
Form::daterange(string $name, string $value, array $options = []) 
//時間區間組件
Form::timerange(string $name, string $value, array $options = []) 
//日期時間區間組件
Form::datetimerange(string $name, string $value, array $options = []) 
//字段列表組件
Form::fieldlist(string $name, string $value, string $title = null, string $template = null, array $options = []) 
//聯動組件
Form::cxselect(string $url, array $names = [], array $values = [], array $options = []) 
//選擇數字區間
Form::selectRange(string $name, string $begin, string $end, string $selected = null, array $options = []) 
//選擇年
Form::selectYear(string $name, string $begin, string $end, string $selected = null, array $options = []) 
//選擇月
Form::selectMonth(string $name, string $selected = null, array $options = [], string $format = '%m') 
//單個復選框
Form::checkbox(string $name, string $value = '1', string $checked = null, array $options = []) 
//一組復選框
Form::checkboxs(string $name, array $list = [], string $checked = null, array $options = []) 
//單個單選框
Form::radio(string $name, string $value = null, string $checked = null, array $options = [])) 
//一組單選框
Form::radios(string $name, array $list = [], string $checked = null, array $options = [])) 
//上傳圖片組件
Form::image(string $name = null, string $value, array $inputAttr = [], array $uploadAttr = [], array $chooseAttr = [], array $previewAttr = []) 
//上傳圖片組件(多圖)）
Form::images(string $name = null, string $value, array $inputAttr = [], array $uploadAttr = [], array $chooseAttr = [], array $previewAttr = []) 
//上傳文件組件
Form::upload(string $name = null, string $value, array $inputAttr = [], array $uploadAttr = [], array $chooseAttr = [], array $previewAttr = []) 
//上傳文件組件(多文件)）
Form::uploads(string $name = null, string $value, array $inputAttr = [], array $uploadAttr = [], array $chooseAttr = [], array $previewAttr = []) 
//表單button
Form::button(string $value = null, array $options = []) 

方法2 模板輸出：

{:Form::text('row[text]', '', ['data-rule'=>'required'])}

注意：form組件必須要依賴js的Form.api.bindevent("form[role=form]");進行組件初始化，否則部分組件會不生效

所以引用了這些代碼的話就必須在相應的js里加上這段代碼（它包含了幾乎所以的表單事件）

 

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('文本框')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::text('row[text]', '', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('多行文本框')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::textarea('row[textarea]', '', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('富文本編輯器')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::editor('row[editor]', '', ['data-rule'=>'required'])}
        </div>
    </div>

 

 ---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('單選')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::radios('row[radio]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('復選')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::checkboxs('row[checkbox]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::select('row[select]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表(多選)')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::selects('row[select]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
        </div>
    </div>

 

 ---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表(友好)')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::selectpicker('row[selectpicker]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表(友好)(多選)')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::selectpickers('row[selectpickers]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('動態下拉列表')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::selectpage('row[select]', 2, 'category/selectpage', null, null, ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('日期')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::datepicker('row[datepicker]', '', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

 

<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('時間')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::timepicker('row[timepicker]', '', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

 

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('日期時間')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::datetimepicker('row[timepicker]', '', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('日期區間')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::daterange('row[daterange]', '', ['data-rule'=>'required'])}
        </div>
    </div>

 

 ---------------------------------------------------------------------------------------------------------------------------------------------

 

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('時間區間')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::timerange('row[timerange]', '', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('日期時間區間')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::datetimerange('row[datetimerange]', '', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('動態字段列表')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::fieldlist('row[fieldlist]', ['aa'=>'AA', 'bb'=>'BB'], null, '', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

 

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('單圖')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::image('row[image]', '/uploads/20180629/b83227ea668e7b2d61def9812bbce3da.png', ['data-rule'=>'required'])}
        </div>
    </div>

 或者：

<div class="form-group">
    <label for="c-avatar" class="control-label col-xs-12 col-sm-2">頭像:</label>
    <div class="col-xs-12 col-sm-8">
        <div class="input-group">
            <input id="c-avatar" data-rule="" class="form-control" size="50" name="avatar" type="text" value="img/101010.jpg">
            <div class="input-group-addon no-border no-padding">
                <span><button type="button" id="plupload-avatar" class="btn btn-danger plupload" data-input-id="c-avatar" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-avatar"><i class="fa fa-upload"></i> 上傳</button></span>
                <span><button type="button" id="fachoose-avatar" class="btn btn-primary fachoose" data-input-id="c-avatar" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 選擇</button></span>
            </div>
            <span class="msg-box n-right" for="c-avatar"></span>
        </div>
        <ul class="row list-inline plupload-preview" id="p-avatar"></ul>
    </div>
</div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('多圖')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::images('row[images]', '', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('單文件')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::upload('row[upload]', '', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('多文件')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::uploads('row[uploads]', '', ['data-rule'=>'required'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('開關')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::switcher('row[switcher1]', '0', ['color'=>'success'])}
            {:Form::switcher('row[switcher2]', '1', ['color'=>'yellow', 'disabled'=>true])}
            {:Form::switcher('row[switcher3]', 'Y', ['color'=>'navy', 'yes'=>'Y', 'no'=>'N'])}
            {:Form::switcher('row[switcher4]', '1', ['color'=>'info'])}
            {:Form::switcher('row[switcher4]', '1', ['color'=>'danger', 'disabled'])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('聯動選擇')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::cxselect('ajax/area', ['province','city'], ['province'=>37, 'city'=>38])}
        </div>
    </div>

 

---------------------------------------------------------------------------------------------------------------------------------------------

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('Submit')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>

 

 

 

 

除了上面的表單組件可以快速生成表單元素，還有其他快速生成的方式：

如:圖片上傳：

<div class="form-group">
    <label for="c-avatar" class="control-label col-xs-12 col-sm-2">頭像:</label>
    <div class="col-xs-12 col-sm-8">
        <div class="input-group">
            <input id="c-avatar" data-rule="" class="form-control" size="50" name="avatar" type="text" value="img/101010.jpg">
            <div class="input-group-addon no-border no-padding">
                <span><button type="button" id="plupload-avatar" class="btn btn-danger plupload" data-input-id="c-avatar" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-avatar"><i class="fa fa-upload"></i> 上傳</button></span>
                <span><button type="button" id="fachoose-avatar" class="btn btn-primary fachoose" data-input-id="c-avatar" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 選擇</button></span>
            </div>
            <span class="msg-box n-right" for="c-avatar"></span>
        </div>
        <ul class="row list-inline plupload-preview" id="p-avatar"></ul>
    </div>
</div>
//無需表單事件？