表单组件

文本类型

Default

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

Text

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

IconPicker

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

File

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

Password

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

RichText

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

Datetime

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

Email

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

Url

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

Ip

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

Code

1
formList.AddField("code", "code", db.Text, form.Code)
2
formList.AddField("code", "code", db.Text, form.Code).FieldOptionExt(map[string]interface{}{
3
"theme": "monokai",
4
"font_size": 14,
5
"language": "php",
6
"options": "{useWorker: false}",
7
})
Copied!

Color

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

Currency

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

Number

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

TextArea

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

选择类型

SelectSingle

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

Select

1
formList.AddField("drink", "drink", db.Int, form.Select).
2
// 多选的选项,text代表显示内容,value代表对应值
3
FieldOptions(types.FieldOptions{
4
{
5
Text: "beer",
6
Value: "beer",
7
}, {
8
Text: "juice",
9
Value: "juice",
10
}, {
11
Text: "water",
12
Value: "water",
13
}, {
14
Text: "red bull",
15
Value: "red bull",
16
},
17
}).
18
// 这里返回一个[]string,对应的值是本列的drink字段的值,即编辑表单时会显示的对应值
19
FieldDisplay(func(model types.FieldModel) interface{} {
20
return []string{"beer"}
21
})
Copied!

Radio

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

Switch

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

SelectBox

1
formList.AddField("fruit", "fruit", db.Int, form.SelectBox).
2
// 多选的选项,text代表显示内容,value代表对应值
3
FieldOptions(types.FieldOptions{
4
{
5
Text: "apple",
6
Value: "apple",
7
}, {
8
Text: "banana",
9
Value: "banana",
10
}, {
11
Text: "watermelon",
12
Value: "watermelon",
13
}, {
14
Text: "pear",
15
Value: "pear",
16
},
17
}).
18
// 这里返回一个[]string,对应的值是本列的fruit字段的值,即编辑表单时会显示的对应值
19
FieldDisplay(func(model types.FieldModel) interface{} {
20
return []string{"pear"}
21
})
Copied!

表单选择类型动态加载

从ajax中加载数据:
1
import "github.com/GoAdminGroup/go-admin/template/types/form/select"
2
3
formList.AddField("City", "city", db.Int, form.SelectSingle).
4
// 第一个参数为 ajax 路由
5
// 第二个参数为 路由对应的控制器方法。路由和控制器方法将会被注入到web框架中
6
// 第三个参数为 搜索延时,单位为毫秒,可以不传,不传默认为 500 毫秒
7
FieldOnSearch("/search/city", func(ctx *context.Context) (success bool, msg string, data interface{}, 1000) {
8
return true, "ok", selection.Data{
9
Results: selection.Options{
10
{Text: "广州", ID: "0"},
11
{Text: "深圳", ID: "1"},
12
{Text: "北京", ID: "2"},
13
{Text: "上海", ID: "3"},
14
}
15
}
16
}).
17
FieldOptionInitFn(func(val types.FieldModel) types.FieldOptions {
18
// 编辑时的显示,根据行数据 val 返回options
19
return types.FieldOptions{
20
{Text: val.Value, ID: "0"}
21
}
22
}).
23
// 设置默认值
24
FieldDefault("0")
Copied!
表单联动 API 说明:
1
// 自定义js,选中后触发该js内容
2
func (f *FormPanel) FieldOnChooseCustom(js template.HTML) *FormPanel
3
4
// 选中后触发内容,传入map,格式为:
5
// map[string]types.LinkField{
6
// "men": {Field: "ip", Value:"127.0.0.1"},
7
// "women": {Field: "ip", Hide: true},
8
// "other": {Field: "ip", Disable: true}
9
// }
10
// 意思是选中的值为men,则将ip这个表单项设置为127.0.0.1
11
// 选中的值为women,则将ip这个表单项设置为隐藏
12
// 选中的值为other,则将ip这个表单项设置为禁止输入
13
func (f *FormPanel) FieldOnChooseMap(m map[string]LinkField) *FormPanel
14
15
// 选中后触发,如果选中值为val,则将field这个表单项设置为value
16
func (f *FormPanel) FieldOnChoose(val, field string, value template.HTML) *FormPanel
17
18
// 选中后触发Ajax,选中后将选中的值通过ajax经url发到handler,返回的内容(data)将赋给field这个表单项,
19
// 如果返回的是字符串将直接赋值,如果返回的是对象则会赋为下拉表单的选项。对象格式为:
20
// [{"id":0, "text":"men"}, {"id":1, "text":"women"}]
21
func (f *FormPanel) FieldOnChooseAjax(field, url string, handler Handler) *FormPanel
22
23
// 选中后触发,如果选中值为val,则将对应field的表单项隐藏
24
func (f *FormPanel) FieldOnChooseHide(value string, field ...string) *FormPanel
25
26
// 选中后触发,如果选中值为val,则将对应field的表单项显示
27
func (f *FormPanel) FieldOnChooseShow(value string, field ...string) *FormPanel
28
29
// 选中后触发,如果选中值为val,则将对应field的表单项禁止
30
func (f *FormPanel) FieldOnChooseDisable(value string, field ...string) *FormPanel
Copied!

自定义类型

Custom

自定义表单内容
1
formList.AddField("content", "content", db.Varchar, form.Custom).
2
FieldCustomContent(template.HTML(``)).
3
FieldCustomCss(template.CSS(``)).
4
FieldCustomJs(template.JS(``))
Copied!
以下表单自定义的模板文件结构,设置的CustomContentCustomCssCustomJs将插入到以下对应的位置。
1
{{define "form_custom"}}
2
{{if eq .Must true}}
3
<label for="{{.Field}}" class="col-sm-2 asterisk control-label">{{.Head}}</label>
4
{{else}}
5
<label for="{{.Field}}" class="col-sm-2 control-label">{{.Head}}</label>
6
{{end}}
7
<div class="col-sm-8">
8
<div class="input-group">
9
{{.CustomContent}}
10
</div>
11
</div>
12
{{if .CustomJs}}
13
<script>
14
{{.CustomJs}}
15
</script>
16
{{end}}
17
{{if .CustomCss}}
18
<style>
19
{{.CustomCss}}
20
</style>
21
{{end}}
22
{{end}}
Copied!
CustomContentCustomCssCustomJs中会传入一个FormField类型进行模板渲染,定义如下:
1
type FormField struct {
2
Field string // 字段名
3
TypeName db.DatabaseType
4
Head string // 表单字段头部名
5
FormType form2.Type
6
7
Default template.HTML
8
Value template.HTML // 字段值
9
Value2 string
10
Options FieldOptions
11
DefaultOptionDelimiter string
12
Label template.HTML
13
14
Placeholder string
15
16
CustomContent template.HTML
17
CustomJs template.JS
18
CustomCss template.CSS
19
20
Editable bool
21
NotAllowAdd bool
22
Must bool
23
Hide bool
24
25
Width int
26
27
Join Join
28
29
HelpMsg template.HTML
30
31
OptionExt template.JS
32
OptionInitFn OptionInitFn
33
OptionTable OptionTable
34
35
FieldDisplay
36
PostFilterFn PostFieldFilterFn
37
}
Copied!
因此可以在CustomContent中,使用这样的模板语法来表示编辑时字段的值:{{.Value}}
Last modified 1yr ago