表单组件使用


文本类型

Default

formList.AddField("name", "name", db.Varchar, form.Default)

Text

formList.AddField("name", "name", db.Varchar, form.Text)

IconPicker

formList.AddField("icon", "icon", db.Varchar, form.IconPicker)

File

formList.AddField("file", "file", db.Varchar, form.File)

Password

formList.AddField("password", "password", db.Varchar, form.Password)

RichText

formList.AddField("content", "content", db.Varchar, form.RichText)

Datetime

formList.AddField("birthday", "birthday", db.Varchar, form.Datetime)

Email

formList.AddField("email", "email", db.Varchar, form.Email)

Url

formList.AddField("url", "url", db.Varchar, form.Url)

Ip

formList.AddField("ip", "ip", db.Varchar, form.Ip)

Code

formList.AddField("code", "code", db.Text, form.Code)
formList.AddField("code", "code", db.Text, form.Code).FieldOptionExt(map[string]interface{}{
    "theme": "monokai",
    "font_size": 14,
    "language": "php",
    "options": "{useWorker: false}",
})

Color

formList.AddField("color", "color", db.Varchar, form.Color)

Currency

formList.AddField("money", "money", db.Varchar, form.Currency)

Number

formList.AddField("num", "num", db.Varchar, form.Number)

TextArea

formList.AddField("content", "content", db.Varchar, form.TextArea)

选择类型

SelectSingle

formList.AddField("sex", "sex", db.Int, form.SelectSingle).
        // 单选的选项,text代表显示内容,value代表对应值
        FieldOptions(types.FieldOptions{ 
            {Text: "man",Value: "0"},
            {Text: "women",Value: "1"},
        }).
        // 设置默认值
        FieldDefault("0")

Select

formList.AddField("drink", "drink", db.Int, form.Select).
        // 多选的选项,text代表显示内容,value代表对应值
        FieldOptions(types.FieldOptions{
            {
                Text: "beer",
                Value: "beer",
            }, {
                Text: "juice",
                Value: "juice",
            }, {
                Text: "water",
                Value: "water",
            }, {
                Text: "red bull",
                Value: "red bull",
            },
        }).
        // 这里返回一个[]string,对应的值是本列的drink字段的值,即编辑表单时会显示的对应值
        FieldDisplay(func(model types.FieldModel) interface{} {
            return []string{"beer"}
        })

Radio

formList.AddField("gender", "gender", db.Int, form.Radio).
        // radio的选项,Text代表显示内容,Value代表对应值
        FieldOptions(types.FieldOptions{
            {Text: "male",Value: "0"},
            {Text: "female",Value: "1"},
        }).
        FieldDefault("0") // 设置默认的值

Switch

formList.AddField("site", "site", db.Int, form.Switch).
        // switch的选项,Text代表显示内容,Value代表对应值
        FieldOptions(types.FieldOptions{
            {Text: trueStr, Value: "true"},
            {Text: falseStr, Value: "false"},
        })
        FieldDefault("0") // 设置默认的值

SelectBox

formList.AddField("fruit", "fruit", db.Int, form.SelectBox).
        // 多选的选项,text代表显示内容,value代表对应值
        FieldOptions(types.FieldOptions{
            {
                Text: "apple",
                Value: "apple",
            }, {
                Text: "banana",
                Value: "banana",
            }, {
                Text: "watermelon",
                Value: "watermelon",
            }, {
                Text: "pear",
                Value: "pear",
            },
        }).
        // 这里返回一个[]string,对应的值是本列的fruit字段的值,即编辑表单时会显示的对应值
        FieldDisplay(func(model types.FieldModel) interface{} {
            return []string{"pear"}
        })

表单选择类型动态加载

从ajax中加载数据:

import "github.com/GoAdminGroup/go-admin/template/types/form/select"

formList.AddField("City", "city", db.Int, form.SelectSingle).        
        // 第一个参数为 ajax 路由
        // 第二个参数为 路由对应的控制器方法。路由和控制器方法将会被注入到web框架中
        // 第三个参数为 搜索延时,单位为毫秒,可以不传,不传默认为 500 毫秒
        FieldOnSearch("/search/city", func(ctx *context.Context) (success bool, msg string, data interface{}, 1000) {
            return true, "ok", selection.Data{
                Results: selection.Options{
                    {Text: "广州", ID: "0"},
                    {Text: "深圳", ID: "1"},
                    {Text: "北京", ID: "2"},
                    {Text: "上海", ID: "3"},
                }
            }
        }).
        FieldOptionInitFn(func(val types.FieldModel) types.FieldOptions {
            // 编辑时的显示,根据行数据 val 返回options
            return types.FieldOptions{
                {Text: val.Value, ID: "0"}
            }
        }).
        // 设置默认值
        FieldDefault("0")

表单联动 API 说明:

// 自定义js,选中后触发该js内容
func (f *FormPanel) FieldOnChooseCustom(js template.HTML) *FormPanel

// 选中后触发内容,传入map,格式为:
// map[string]types.LinkField{
//      "men": {Field: "ip", Value:"127.0.0.1"},     
//      "women": {Field: "ip", Hide: true},
//      "other": {Field: "ip", Disable: true}
// }
// 意思是选中的值为men,则将ip这个表单项设置为127.0.0.1
// 选中的值为women,则将ip这个表单项设置为隐藏
// 选中的值为other,则将ip这个表单项设置为禁止输入
func (f *FormPanel) FieldOnChooseMap(m map[string]LinkField) *FormPanel

// 选中后触发,如果选中值为val,则将field这个表单项设置为value
func (f *FormPanel) FieldOnChoose(val, field string, value template.HTML) *FormPanel

// 选中后触发Ajax,选中后将选中的值通过ajax经url发到handler,返回的内容(data)将赋给field这个表单项,
// 如果返回的是字符串将直接赋值,如果返回的是对象则会赋为下拉表单的选项。对象格式为:
// [{"id":0, "text":"men"}, {"id":1, "text":"women"}]
func (f *FormPanel) FieldOnChooseAjax(field, url string, handler Handler) *FormPanel

// 选中后触发,如果选中值为val,则将对应field的表单项隐藏
func (f *FormPanel) FieldOnChooseHide(value string, field ...string) *FormPanel

// 选中后触发,如果选中值为val,则将对应field的表单项显示
func (f *FormPanel) FieldOnChooseShow(value string, field ...string) *FormPanel

// 选中后触发,如果选中值为val,则将对应field的表单项禁止
func (f *FormPanel) FieldOnChooseDisable(value string, field ...string) *FormPanel

自定义类型

Custom

自定义表单内容

formList.AddField("content", "content", db.Varchar, form.Custom).
    FieldCustomContent(template.HTML(``)).
    FieldCustomCss(template.CSS(``)).
    FieldCustomJs(template.JS(``))

以下表单自定义的模板文件结构,设置的CustomContentCustomCssCustomJs将插入到以下对应的位置。

{{define "form_custom"}}
    {{if eq .Must true}}
        <label for="{{.Field}}" class="col-sm-2 asterisk control-label">{{.Head}}</label>
    {{else}}
        <label for="{{.Field}}" class="col-sm-2 control-label">{{.Head}}</label>
    {{end}}
    <div class="col-sm-8">
        <div class="input-group">
            {{.CustomContent}}
        </div>
    </div>
    {{if .CustomJs}}
        <script>
            {{.CustomJs}}
        </script>
    {{end}}
    {{if .CustomCss}}
        <style>
            {{.CustomCss}}
        </style>
    {{end}}
{{end}}

CustomContentCustomCssCustomJs中会传入一个FormField类型进行模板渲染,定义如下:

type FormField struct {
    Field    string  // 字段名
    TypeName db.DatabaseType
    Head     string  // 表单字段头部名
    FormType form2.Type

    Default                template.HTML
    Value                  template.HTML // 字段值
    Value2                 string
    Options                FieldOptions
    DefaultOptionDelimiter string
    Label                  template.HTML

    Placeholder string

    CustomContent template.HTML
    CustomJs      template.JS
    CustomCss     template.CSS

    Editable    bool
    NotAllowAdd bool
    Must        bool
    Hide        bool

    Width int

    Join Join

    HelpMsg template.HTML

    OptionExt    template.JS
    OptionInitFn OptionInitFn
    OptionTable  OptionTable

    FieldDisplay
    PostFilterFn PostFieldFilterFn
}

因此可以在CustomContent中,使用这样的模板语法来表示编辑时字段的值:{{.Value}}