# 内置组件
内置组件自simplepro 2.0+ 可用，低于2.0 不可用。
以下字段均在demo中有提供例子参考，demo下载 (opens new window)
友情提示：由于django机制问题，simplepro的组件在内联(inline)表单中无法使用，后续我们会继续尝试其他办法来实现。
# 组件列表
| 组件名 | 组件说明 | 版本 |
|---|---|---|
CheckBox | 复选框 | >=2.0 |
Radio | 单选框 | >=2.0 |
Switch | 布尔类型切换框 | >=2.0 |
InputNumber | 带加减的数字输入框 | >=2.0 |
Slider | 滑块 | >=2.0 |
Image | 滑块 | >=2.0 |
IntegerField | int字段 | >=2.0 |
Rate | 评分 | >=2.0 |
Time | 时间选择器 | >=2.0 |
Date | 日期选择器 | >=2.0 |
DateTime | 日期时间选择器 | >=2.0 |
Char | 文本输入框 | >=2.0 |
Foreignkey | 外键字段-select | >=2.0 |
OneToOneField | 一对一字段 | >=2.0 |
ManyToManyField | 多对多字段 | >=2.0 |
Transfer | 穿梭框 | >=2.0 |
Layer | 穿梭layer对话框按钮框 | >=2.1 |
AMap | 高德地图组件 | >=3.1 |
# CheckBox 复选框
复选框组件，一组备选项中进行多选
https://element.eleme.cn/#/zh-CN/component/checkbox (opens new window)
# 效果
# 字段
- 类型
继承自model.CharField字段
- 包
simplepro.components.fields.CheckboxField
# 参数
除了下列参数以外，其他参数与model.CharField一致。
| 参数名 | 类型 | 必选 | 说明 |
|---|---|---|---|
| choices | 元组或数组 | 是 | 为checkbox指定选项 |
# 例子
from django.db import models
from simplepro.components import fields
class CheckBoxModelTest(models.Model):
type_choices = (
(0, '选项1'),
(1, '选项2'),
(2, '选项3'),
(3, '选项4'),
)
# 必须包含 choices 字段，否则报错
f = fields.CheckboxField(choices=type_choices, verbose_name='复选框', default=0, help_text='继承自CharField，逗号分隔',
max_length=128)
class Meta:
verbose_name = 'Checkbox复选框'
verbose_name_plural = 'Checkbox复选框'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Radio 单选框
Radio 单选框，在一组备选项中进行单选
https://element.eleme.cn/#/zh-CN/component/radio (opens new window)
# 效果
# 字段
- 类型
继承自model.IntegerField字段
- 包
simplepro.components.fields.RadioField
# 参数
除了下列参数以外，其他参数与model.IntegerField一致。
| 参数名 | 类型 | 必选 | 说明 |
|---|---|---|---|
| choices | 元组或数组 | 是 | 为checkbox指定选项 |
# 例子
from django.db import models
from simplepro.components import fields
class RadioModel(models.Model):
type_choices = (
(0, '选项1'),
(1, '选项2'),
(2, '选项3'),
(3, '选项4'),
)
# 必须包含 choices 字段，否则报错
f = fields.RadioField(choices=type_choices, verbose_name='单选框', default=0, help_text='继承自IntegerField')
class Meta:
verbose_name = 'Radio单选框'
verbose_name_plural = 'Radio单选框'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Switch
Switch 开关，表示两种相互对立的状态间的切换，多用于触发「开/关」。
https://element.eleme.cn/#/zh-CN/component/switch (opens new window)
# 效果
# 字段
- 类型
继承自model.BooleanField字段
- 包
simplepro.components.fields.SwitchField
# 参数
参数与model.BooleanField一致，无特有参数。
# 例子
from django.db import models
from simplepro.components import fields
class SwitchModel(models.Model):
f = fields.SwitchField(default=False, verbose_name='复选框', help_text='继承自BooleanField')
class Meta:
verbose_name = 'Switch切换'
verbose_name_plural = 'Switch切换'
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# InputNumber
InputNumber 计数器，仅允许输入标准的数字值，可定义范围
https://element.eleme.cn/#/zh-CN/component/input-number (opens new window)
# 效果
# 字段
- 类型
继承自model.IntegerField字段
- 包
simplepro.components.fields.InputNumberField
# 参数
除以下参数外其他参数与model.IntegerField一致
| 参数名 | 类型 | 必选 | 说明 |
|---|---|---|---|
| min_value | Integer | 否 | 最小值 |
| max_value | Integer | 否 | 最大值 |
# 例子
from django.db import models
from simplepro.components import fields
class InputNumberModel(models.Model):
f = fields.InputNumberField(max_value=100, min_value=1, default=1, verbose_name='InputNumber计数器',
help_text='继承自IntegerField')
class Meta:
verbose_name = 'InputNumber计数器'
verbose_name_plural = 'InputNumber计数器'
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Slider滑块
Slider 滑块，通过拖动滑块在一个固定区间内进行选择
https://element.eleme.cn/#/zh-CN/component/slider (opens new window)
# 效果
# 字段
- 类型
继承自model.IntegerField字段
- 包
simplepro.components.fields.SliderField
# 参数
除了下列参数以外，其他参数与model.IntegerField一致。
| 参数名 | 类型 | 必选 | 说明 |
|---|---|---|---|
| min_value | int | 否 | 最小值 |
| max_value | int | 否 | 最大值 |
| input_size | string | 否 | 输入框的尺寸，large / medium / small / mini，默认：small |
| step | int | 否 | 步长，默认：1 |
| show_tooltip | boolean | 否 | 是否显示 tooltip，默认：True |
| vertical | boolean | 否 | 是否竖向模式，默认：False |
| height | string | 否 | Slider竖向模式时高度，默认：100px |
| width | string | 否 | Slider横向模式时宽度，默认：200px |
| show_input | boolean | 否 | 是否显示输入框，默认：False |
# 例子
from django.db import models
from simplepro.components import fields
class SliderModel(models.Model):
# input_size=large / medium / small / mini
# show-tooltip
# vertical=False
f1 = fields.SliderField(show_input=True, max_value=100, min_value=1, step=1, input_size='large', show_tooltip=True,
default=1,
verbose_name='Slider滑块',
help_text='继承自IntegerField')
f2 = fields.SliderField(max_value=1000,
min_value=1,
step=10,
input_size='mini',
width='50%',
default=1,
show_tooltip=False,
verbose_name='Slider滑块',
help_text='继承自IntegerField')
f3 = fields.SliderField(max_value=100,
min_value=1,
step=2,
input_size='medium',
vertical=True,
height='100px',
default=1, verbose_name='Slider滑块',
help_text='继承自IntegerField')
class Meta:
verbose_name = 'Slider滑块'
verbose_name_plural = 'Slider滑块'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
# Image图片上传
通过点击或者拖拽上传文件
https://element.eleme.cn/#/zh-CN/component/upload (opens new window)
# 效果
# 字段
- 类型
继承自model.CharField字段
- 包
simplepro.components.fields.ImageField
# 参数
除了下列参数以外，其他参数与model.CharField一致。
| 参数名 | 类型 | 必选 | 说明 |
|---|---|---|---|
| drag | boolean | 否 | 是否启用拖拽上传图片 |
| action | string | 否 | 指定图片上传的接口 |
# action 说明
配置action后，选择图片后将向该接口上传图片，然后需要返回json串
成功：
{"success": 1, "message": "上传成功！", "url": "/meida//rbwTbhOR.png"}
1
失败：
{"success": 0, "message": "上传失败！"}
1
# 例子
from django.db import models
from simplepro.components import fields
class ImageModel(models.Model):
# drag 是否可拖拽上传文件
f1 = fields.ImageField(drag=True, verbose_name='图片上传', max_length=128)
f2 = fields.ImageField(drag=False,
action='/123', # 可以手动指定一个上传的url地址
verbose_name='图片上传', max_length=128)
class Meta:
verbose_name = 'Image图片上传'
verbose_name_plural = 'Image图片上传'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# IntegerField int字段
基础类型 int字段，如果有choices属性就会渲染成Select 没有就渲染成普通的输入框
# 效果
# 字段
- 类型
继承自model.IntegerField字段
- 包
simplepro.components.fields.IntegerField
# 参数
除了下列参数以外，其他参数与model.IntegerField一致。
| 参数名 | 类型 | 必选 | 说明 |
|---|---|---|---|
| clearable | boolean | 否 | 是否可以清空选项 |
| placeholder | string | 否 | 占位符 |
| filterable | boolean | 否 | 列表过滤搜索 |
# 例子
from django.db import models
from simplepro.components import fields
class IntegerModel(models.Model)
school_choices = (
(0, '北大'),
(1, '清华'),
(2, '复旦'),
(3, '交大'),
(4, '厦大'),
(5, '深大'),
(6, '中山大学'),
(7, '东南大学'),
(8, '南开大学'),
)
school = fields.IntegerField(verbose_name='学校', choices=school_choices, default=0)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Rate 评分
评分组件
https://element.eleme.cn/2.13/#/zh-CN/component/rate (opens new window)
# 效果
# 字段
- 类型
继承自model.FloatField字段
- 包
simplepro.components.fields.RateField
# 参数
除了下列参数以外，其他参数与model.FloatField一致。
| 参数名 | 类型 | 必选 | 说明 |
|---|---|---|---|
| max_value | int | 否 | 评论组件最大星级，默认：5 |
| allow_half | boolean | 否 | 是否允许半选，默认：False |
| disabled | boolean | 否 | 是否为只读，默认：False |
| show_score | boolean | 否 | 是否显示当前分数，默认：True |
# 例子
from django.db import models
from simplepro.components import fields
class RateModel(models.Model):
f1 = fields.RateField(verbose_name='评分1', max_value=5)
# 指定最大值，和允许选半格
f2 = fields.RateField(verbose_name='评分2', max_value=5, allow_half=True, show_score=False)
# disabled 设为默认读
f3 = fields.RateField(verbose_name='评分3', max_value=5, default=3.5, disabled=True)
class Meta:
verbose_name = 'Rate评分'
verbose_name_plural = 'Rate评分'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Time 时间选择器
用于选择或输入时间，小时和分
至于为什么不支持秒，是因为django本身不支持。
https://element.eleme.cn/2.13/#/zh-CN/component/time-picker (opens new window)
# 效果
# 字段
- 类型
继承自model.TimeField字段
- 包
simplepro.components.fields.TimeField
# 参数
除了下列参数以外，其他参数与model.TimeField一致。
| 参数名 | 类型 | 必选 | 说明 |
|---|---|---|---|
| prefix_icon | string | 否 | 输入框靠左图标，默认：el-icon-date |
| clear_icon | string | 否 | 清除按钮图标，默认：el-icon-circle-close |
| align | string | 否 | 对齐方式，默认：left，可选：left / center / right |
| size | string | 否 | 输入框尺寸，可选： medium / small / mini |
| clearable | boolean | 否 | 是否显示清除按钮，默认：True |
| editable | boolean | 否 | 是否文本框可输入，默认：True |
| disabled | boolean | 否 | 禁用，默认：False |
| readonly | boolean | 否 | 完全只读，默认：False |
# 例子
from django.db import models
from simplepro.components import fields
class TimeModel(models.Model):
f1 = fields.TimeField(verbose_name='Time时间选择1')
f2 = fields.TimeField(verbose_name='Time时间选择2', default=timezone.now, clearable=False, help_text='不可清除')
f3 = fields.TimeField(verbose_name='Time时间选择3', default=timezone.now,
align='right', clearable=False, editable=False, readonly=True, help_text='不可编辑')
class Meta:
verbose_name = 'Time时间选择'
verbose_name_plural = 'Time时间选择'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Date 日期选择器
用于选择或输入日期，年月日
https://element.eleme.cn/2.13/#/zh-CN/component/date-picker (opens new window)
# 效果
# 字段
- 类型
继承自model.DateField字段
- 包
simplepro.components.fields.DateField
# 参数
除了下列参数以外，其他参数与model.DateField一致。
| 参数名 | 类型 | 必选 | 说明 |
|---|---|---|---|
| prefix_icon | string | 否 | 输入框靠左图标，默认：el-icon-date |
| clear_icon | string | 否 | 清除按钮图标，默认：el-icon-circle-close |
| align | string | 否 | 对齐方式，默认：left，可选：left / center / right |
| size | string | 否 | 输入框尺寸，可选： medium / small / mini |
| clearable | boolean | 否 | 是否显示清除按钮，默认：True |
| editable | boolean | 否 | 是否文本框可输入，默认：True |
| disabled | boolean | 否 | 禁用，默认：False |
| readonly | boolean | 否 | 完全只读，默认：False |
| options | string/dict | 配置，可以是json字符串，也可以是dict，配置详情 |
# options字段说明
options字段 实际上对应的就是 elementui time、date、datetime这三个的picker-options属性。
例如给选择器增加快捷操作：
options1={
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
}
f1 = fields.DateField(verbose_name='Date日期选择1', options=options1)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 例子
from django.db import models
from simplepro.components import fields
class DateModel(models.Model):
# options1 可以是个dict 也可以是个str，
# 但是最终 是要一个完整的json串，
# 否则可能导致报错控件无法显示出来
options1 = """
{
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
}
"""
# 设置快捷选项
f1 = fields.DateField(verbose_name='Date日期选择1', options=options1)
f2 = fields.DateField(verbose_name='Date日期选择2', default=timezone.now, clearable=False, help_text='不可清除')
f3 = fields.DateField(verbose_name='Date日期选择3', default=timezone.now,
align='right', clearable=False, editable=False, readonly=True, help_text='不可编辑')
class Meta:
verbose_name = 'Date日期选择'
verbose_name_plural = 'Date日期选择'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
# DateTime 日期时间选择器
用于选择或输入日期时间，年-月-日 时:分:秒
https://element.eleme.cn/2.13/#/zh-CN/component/datetime-picker (opens new window)
# 效果
# 字段
- 类型
继承自model.DateTimeField字段
- 包
simplepro.components.fields.DateTimeField
# 参数
除了下列参数以外，其他参数与model.DateTimeField一致。
| 参数名 | 类型 | 必选 | 说明 |
|---|---|---|---|
| prefix_icon | string | 否 | 输入框靠左图标，默认：el-icon-date |
| clear_icon | string | 否 | 清除按钮图标，默认：el-icon-circle-close |
| align | string | 否 | 对齐方式，默认：left，可选：left / center / right |
| size | string | 否 | 输入框尺寸，可选： medium / small / mini |
| clearable | boolean | 否 | 是否显示清除按钮，默认：True |
| editable | boolean | 否 | 是否文本框可输入，默认：True |
| disabled | boolean | 否 | 禁用，默认：False |
| readonly | boolean | 否 | 完全只读，默认：False |
| options | string/dict | 配置，可以是json字符串，也可以是dict，配置详情 |
# datetime_options字段说明
options字段 实际上对应的就是 elementui time、date、datetime这三个的picker-options属性。
例如给选择器增加快捷操作：
options1={
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
}
f1 = fields.DateField(verbose_name='Date日期选择1', options=options1)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 例子
from django.db import models
from simplepro.components import fields
class DateTimeModel(models.Model):
# 可以设置 快捷操作
# options1 可以是个dict 也可以是个str，
# 但是最终 是要一个完整的json串，
# 否则可能导致报错控件无法显示出来
# 文档地址：https://element.eleme.cn/2.13/#/zh-CN/component/datetime-picker
options1 = """
{
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
}
"""
f1 = fields.DateTimeField(verbose_name='DateTime日期时间1', options=options1)
f2 = fields.DateTimeField(verbose_name='DateTime日期时间2', default=timezone.now, clearable=False, help_text='不可清除')
f3 = fields.DateTimeField(verbose_name='DateTime日期时间3', default=timezone.now,
align='right', clearable=False, editable=False, readonly=True, help_text='不可编辑')
class Meta:
verbose_name = 'DateTime日期时间'
verbose_name_plural = 'DateTime日期时间'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
# Char文本输入框
Input 输入框，通过鼠标或键盘输入字符
https://element.eleme.cn/2.13/#/zh-CN/component/input (opens new window)
# 效果
# 字段
- 类型
继承自model.CharField字段
- 包
simplepro.components.fields.CharField
# 参数
除了下列参数以外，其他参数与model.CharField一致。
| 参数名 | 类型 | 必选 | 说明 |
|---|---|---|---|
| input_type | string | 否 | 类型，text，textarea 和其他 原生 input 的 type 值 (opens new window) |
| max_length | int | 否 | 原生属性，最大输入长度 |
| min_length | int | 否 | 原生属性，最小输入长度 |
| placeholder | string | 否 | 输入框占位文本 |
| clearable | boolean | 否 | 是否可清空 |
| show_password | boolean | 否 | 是否显示切换密码图标 |
| disabled | boolean | 否 | 禁用 |
| size | string | 否 | 输入框尺寸，只在 type!="textarea" 时有效， medium / small / mini |
| prefix_icon | string | 否 | 输入框头部图标 (opens new window) |
| suffix_icon | string | 否 | 输入框尾部图标 (opens new window) |
| rows | int | 否 | 输入框行数，只对 type="textarea" 有效 |
| autocomplete | boolean | 否 | 原生属性，自动补全 |
| readonly | boolean | 否 | 原生属性，是否只读 |
| max_value | int | 否 | 原生属性，设置最大值 |
| min_value | int | 否 | 原生属性，设置最小值 |
| step | - | 否 | 原生属性，设置输入字段的合法数字间隔 |
| resize | string | 否 | 控制是否能被用户缩放，取值： none, both, horizontal, vertical |
| autofocus | boolean | 否 | 原生属性，自动获取焦点，True，False |
| show_word_limit | boolean | 否 | 是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效 |
| slot | string | 否 | 复合型输入框头部内容，只对 type="text" 有效，取值：prefix、suffix、prepend、append |
| slot_text | string | 否 | 复合型输入框，相关位置显示的文本 |
| style | string | 否 | 原生属性，样式 |
# 例子
from django.db import models
from simplepro.components import fields
class CharModel(models.Model):
"""
文本输入框，包含：input、password、textarea
"""
# 这里的max_length是数据库字段的长度，也是界面上文本框可输入的长度
# type属性 对应input原生的type
# style 原生属性，可通过width设置宽度
# 普通文本框
f1 = fields.CharField(verbose_name='基础输入框', max_length=128, input_type='text', placeholder='单行输入',
autocomplete=False, style='width:100px;color:red;')
# 多行文本框
# 如果设置了style的高度，就不要设置 rows属性了，不然样式会乱掉
f2 = fields.CharField(verbose_name='多行输入', max_length=128, input_type='textarea', show_word_limit=True,
placeholder='多行输入', clearable=False,
style='width:500px;', rows=20)
# 密码输入框
f3 = fields.CharField(verbose_name='密码', placeholder='请输入密码', max_length=128, show_password=True)
f4 = fields.CharField(verbose_name='左边带图标', suffix_icon="el-icon-date", max_length=128)
f5 = fields.CharField(verbose_name='右边带图标', prefix_icon="el-icon-search", max_length=128)
f6 = fields.CharField(verbose_name='显示可输入长度', max_length=128, show_word_limit=True)
# solt取值：prepend、append
f7 = fields.CharField(verbose_name='复合输入框', max_length=128, slot='prepend', slot_text='https://', null=True,
blank=True)
f8 = fields.CharField(verbose_name='复合输入框', max_length=128, slot='append', slot_text='.com', null=True, blank=True)
class Meta:
verbose_name = 'Char文本输入框'
verbose_name_plural = 'Char文本输入框'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# ForeignKey 外键字段（Select）
ForeignKey 外键字段渲染成下拉框
可以自定义queryset和自定义远程搜索
Django内置的ForeignKey 只支持全部加载数据和autocomplete，而SimplePro 支持自定义url搜索
# 效果
# 字段
- 类型
继承自model.ForeignKey字段
- 包
simplepro.components.fields.ForeignKey
# 参数
除了下列参数以外，其他参数与model.ForeignKey一致。
| 参数名 | 类型 | 必选 | 说明 |
|---|---|---|---|
| disabled | boolean | 否 | 是否禁用 |
| size | string | 否 | 输入框尺寸，medium/small/mini |
| clearable | boolean | 否 | 是否可以清空选项，默认：True |
| placeholder | string | 否 | 占位符 |
| filterable | boolean | 否 | 是否可搜索，默认：True |
| queryset | queryset对象或function | 否 | 可以是一个model的queryset，也可以是一个方法，返回queryset |
| action | string | 否 | 搜索url，远程搜索，filterable=True |
| limit | int | 否 | 限制结果集大小，默认不限制 |
# 关于queryset
如果使用了queryset 可能会遇到一个问题，就是输入框只显示id，而不显示label
这是因为 select的列表中不存在该选项
如果是在admin配置了autocomplete_fields 搜索将由django处理，queryset和limit无效。
# 关于搜索
搜索有3种形式，两种模式。
- 模式1
列表过滤，直接Select进行过滤，返回符合条件的数据，不依赖网络接口。
- 模式2
远程搜索，远程搜索分为内置autocomplete_fields和自定义url的远程搜索
autocomplete_fields是django内置支持的，需要在ModelAdmin 配置
自定义url的远程搜索，是自己在实现的相关业务逻辑，返回特定的参数
例子：
def area_search(request):
# 使用get 请求，参数名是：term ，是为了兼容 autocomplete_fields
term = request.GET.get('term')
rs = []
areas = list(StudentArea.objects.filter(name__icontains=term))
for item in areas:
rs.append({
'id': item.pk,
'text': item.name
})
data = {
'pagination': {
'more': False
},
'results': rs
}
"""
返回 数据格式例子
{
pagination: {more: false},
results:[
{id: "1", text: "20级1班"},
{id: "2", text: "20级2班"},
]
}
"""
return HttpResponse(json.dumps(data), content_type='application/json')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
字段配置：
area = fields.ForeignKey(StudentArea, on_delete=models.SET_NULL, null=True, blank=True,
verbose_name='地区',
help_text='一对多', clearable=True, placeholder='选择地区',
# 指定自定义的url
action='/area/search'
)
1
2
3
4
5
6
7
2
3
4
5
6
7
# 完整例子
from django.db import models
from simplepro.components import fields
# Select，和外键测试
# 这个demo可能有人要问，班级不是class吗？为什么要写成classes，因为class是关键字
class StudentClasses(models.Model):
name = fields.CharField(max_length=32, verbose_name='班级名', show_word_limit=True)
def __str__(self):
return self.name
class StudentArea(models.Model):
name = fields.CharField(max_length=32, verbose_name='地区', show_word_limit=True)
def __str__(self):
return self.name
class StudentOneToOneModel(models.Model):
f = models.CharField(max_length=32, verbose_name='一对一')
def __str__(self):
return self.f
class StudentManyToManyModel(models.Model):
f = models.CharField(max_length=32, verbose_name='多对多')
def __str__(self):
return self.f
# 外键字段可以设置 queryset 来进行数据的筛选
def get_student_class_queryset():
return StudentClasses.objects.order_by('-pk')[:10]
class StudentModel(models.Model):
name = fields.CharField(max_length=128, verbose_name='名字', default='张三')
sex_choices = (
(0, '男'),
(1, '女'),
(2, '未知'),
)
sex = fields.RadioField(verbose_name='性别', default=0, choices=sex_choices)
star = fields.RateField(verbose_name='评价', default=5, help_text='给用户评级')
money = fields.InputNumberField(verbose_name='存款', default=0)
score = fields.SliderField(verbose_name='考试分数', default=100)
# ForeignKey和OneToOneField、ManyToManyField 都支持两个参数
# action 是指 select在搜索的时候 请求的url，后台只需要返回 一个数组就可以搜索数据了。[{'text':'张三','id':'123'}]
# queryset 是指 select 默认展示数据的时候 框架会调用get_queryset 可以进行数据过滤这一类处理。
# 外键字段 如果不指定action，可以在admin中配置：autocomplete_fields = ('classes',) 就可以自动搜索了。不配置两者 就只能列表过滤
classes = fields.ForeignKey(StudentClasses, on_delete=models.SET_NULL, null=True, blank=True,
verbose_name='班级',
help_text='一对多', clearable=True, placeholder='选择班级',
queryset=get_student_class_queryset,
# 这里这里可以传入function，但是返回的必须是个queryset，也可以传入queryset
limit=100,# 这里限制默认显示的结果数量，设置下可以防止爆内存
)
area = fields.ForeignKey(StudentArea, on_delete=models.SET_NULL, null=True, blank=True,
verbose_name='地区',
help_text='一对多', clearable=True, placeholder='选择地区',
# 指定自定义的url
action='/area/search'
)
one_to_one = fields.OneToOneField(StudentOneToOneModel, on_delete=models.SET_NULL, null=True, blank=True,
verbose_name='一对一字段')
many_to_many = fields.ManyToManyField(StudentManyToManyModel, blank=True, verbose_name='多对多字段')
# many_to_many = models.ManyToManyField(StudentManyToManyModel, blank=True, verbose_name='多对多字段')
school_choices = (
(0, '北大'),
(1, '清华'),
(2, '复旦'),
(3, '交大'),
(4, '厦大'),
(5, '深大'),
(6, '中山大学'),
(7, '东南大学'),
(8, '南开大学'),
)
school = models.IntegerField(verbose_name='学校', choices=school_choices, default=0)
class Meta:
verbose_name = 'Select下拉框'
verbose_name_plural = 'Select下拉框'
def __str__(self):
return self.name
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
# OneToOneField 外键字段（Select）
一对一外键字段，渲染成select，除了字段命名不一致外，其他参数均与ForeignKey 外键字段（Select）
# 效果
# 字段
- 类型
继承自model.OneToOneField字段
- 包
simplepro.components.fields.OneToOneField
# 参数
# 例子
# ManyToManyField 多对多字段 多选（Select）
多对多字段，渲染成select，除了字段命名不一致外，其他参数均与ForeignKey 外键字段（Select）
# 效果
# 字段
- 类型
继承自model.ManyToManyField字段
- 包
simplepro.components.fields.ManyToManyField
# 参数
# 例子
# Transfer 穿梭框
穿梭框基于ManyToMany字段，可以进行多选。
# 效果
# 字段
- 类型
继承自model.ManyToManyField字段
- 包
simplepro.components.fields.TransferField
# 参数
除了下列参数以外，其他参数与model.ManyToManyField一致。
| 参数名 | 类型 | 必选 | 说明 |
|---|---|---|---|
| filterable | boolean | 否 | 是否可搜索，默认：True |
| placeholder | string | 否 | 搜索框占位符 |
| titles | array | 否 | 自定义列表标题，['列表 1', '列表 2'] |
| button_texts | array | 否 | 自定义按钮文案，['向左','向右'] |
| format | string | 否 | 列表顶部勾选状态文案， { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
| queryset | queryset或function | 否 | 自定义查询 |
| limit | int | 否 | 限制默认结果大小 |
# 例子
from django.db import models
from simplepro.components import fields
class TransferModel(models.Model):
name = fields.CharField(max_length=32, verbose_name='名字')
transfer = fields.TransferField(TransferManyToManyModel, blank=True, verbose_name='穿梭框',
help_text='基于many_to_many字段',
filterable=True, # 允许列表搜索
placeholder='输入关键字搜索', # 搜索框占位符
titles=['待选', '已选'], # 自定义穿梭框title
button_texts=['往左', '往右'] # 自定义按钮文本
)
def __str__(self):
return self.name
class Meta:
verbose_name = 'Transfer 穿梭框'
verbose_name_plural = 'Transfer 穿梭框'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# layer对话框按钮
在simpleui 2021.1.0版本，以及simplepro2.1 及以上中生效
对话框按钮是在admin中进行配置action，可以自定义输入的字段，然后通过ajax请求到action中进行业务的处理。
需要继承AjaxAdmin 在from simpleui.admin import AjaxAdmin包中
simplepro也会同步支持对话框按钮功能。
# 效果
# 字段说明
下列字段是指action的layer属性
| 字段 | 说明 |
|---|---|
| title | 对话框标题 |
| tips | 对话框提示 |
| confirm_button | 确认按钮文本 |
| cancel_button | 取消按钮文本 |
| width | 对话框宽度，百分比，例如：50% |
| labelWidth | 表格的label宽度，例如：80px |
| params | 对话框表格中的字段，array |
# params字段
| 字段 | 说明 |
|---|---|
| type | 类型，取值为：input原生属性，和elementui的：select、date、datetime、rate、color、slider、switch、input_number、checkbox、radio |
| key | 参数名，post参数中获取的名称 |
| value | 默认值，数组或文本 |
| label | 字段在表格中显示的名称 |
| size | 组件的大小，取值为：medium / small / mini |
| require | 是否必选，取值为：True/False |
| width | 输入框宽度，例如：200px |
| options | 选项，数组，type为select、checkbox、radio的时候可用 |
# options字段
| 字段 | 说明 |
|---|---|
| key | 值 |
| label | 显示文本 |
# 例子
class RecordAdmin(ImportExportActionModelAdmin, AjaxAdmin):
resource_class = ProxyResource
list_display = ('id', 'name', 'type', 'money', 'create_date')
list_per_page = 10
actions = ('layer_input',)
def layer_input(self, request, queryset):
# 这里的queryset 会有数据过滤，只包含选中的数据
post = request.POST
# 这里获取到数据后，可以做些业务处理
# post中的_action 是方法名
# post中 _selected 是选中的数据，逗号分割
if not post.get('_selected'):
return JsonResponse(data={
'status': 'error',
'msg': '请先选中数据！'
})
else:
return JsonResponse(data={
'status': 'success',
'msg': '处理成功！'
})
layer_input.short_description = '弹出对话框输入'
layer_input.type = 'success'
layer_input.icon = 'el-icon-s-promotion'
# 指定一个输入参数，应该是一个数组
# 指定为弹出层，这个参数最关键
layer_input.layer = {
# 弹出层中的输入框配置
# 这里指定对话框的标题
'title': '弹出层输入框',
# 提示信息
'tips': '这个弹出对话框是需要在admin中进行定义，数据新增编辑等功能，需要自己来实现。',
# 确认按钮显示文本
'confirm_button': '确认提交',
# 取消按钮显示文本
'cancel_button': '取消',
# 弹出层对话框的宽度，默认50%
'width': '40%',
# 表单中 label的宽度，对应element-ui的 label-width，默认80px
'labelWidth': "80px",
'params': [{
# 这里的type 对应el-input的原生input属性，默认为input
'type': 'input',
# key 对应post参数中的key
'key': 'name',
# 显示的文本
'label': '名称',
# 为空校验，默认为False
'require': True
}, {
'type': 'select',
'key': 'type',
'label': '类型',
'width': '200px',
# size对应elementui的size，取值为：medium / small / mini
'size': 'small',
# value字段可以指定默认值
'value': '0',
'options': [{
'key': '0',
'label': '收入'
}, {
'key': '1',
'label': '支出'
}]
}, {
'type': 'number',
'key': 'money',
'label': '金额',
# 设置默认值
'value': 1000
}, {
'type': 'date',
'key': 'date',
'label': '日期',
}, {
'type': 'datetime',
'key': 'datetime',
'label': '时间',
}, {
'type': 'rate',
'key': 'star',
'label': '评价等级'
}, {
'type': 'color',
'key': 'color',
'label': '颜色'
}, {
'type': 'slider',
'key': 'slider',
'label': '滑块'
}, {
'type': 'switch',
'key': 'switch',
'label': 'switch开关'
}, {
'type': 'input_number',
'key': 'input_number',
'label': 'input number'
}, {
'type': 'checkbox',
'key': 'checkbox',
# 必须指定默认值
'value': [],
'label': '复选框',
'options': [{
'key': '0',
'label': '收入'
}, {
'key': '1',
'label': '支出'
}, {
'key': '2',
'label': '收益'
}]
}, {
'type': 'radio',
'key': 'radio',
'label': '单选框',
'options': [{
'key': '0',
'label': '收入'
}, {
'key': '1',
'label': '支出'
}, {
'key': '2',
'label': '收益'
}]
}]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
# action 返回结果
{
'status': 'error',
'msg': '请先选中数据！'
}
1
2
3
4
2
3
4
status = success/error
msg = 自定义
# 对话框按钮说明
如果需要作为增加和编辑 需要自己实现业务逻辑，编辑的时候将数据填充到value字段即可。
限制选中后才能提交数据，可以在后台进行限制
2020.1.0 及以上版本生效，需要继承
AjaxAdmin在from simpleui.admin import AjaxAdmin包中。 不继承提交数据会500或者404 例如：
if not post.get('_selected'):
return JsonResponse(data={
'status': 'error',
'msg': '请先选中数据！'
})
1
2
3
4
5
6
7
2
3
4
5
6
7
# layer 文件上传
自2.3+版本开始，支持layer中上传文件
例子：
@admin.register(Layer)
class LayerAdmin(AjaxAdmin):
actions = ('upload_file',)
def upload_file(self, request, queryset):
# 这里的upload 就是和params中配置的key一样
upload= request.FILES['upload']
print(upload)
pass
upload_file.short_description = '文件上传对话框'
upload_file.type = 'success'
upload_file.icon = 'el-icon-upload'
upload_file.enable = True
upload_file.layer = {
'params': [{
'type': 'file',
'key': 'upload',
'label': '文件'
}]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 界面效果图
# 高德地图
字段可以使用高德地图选取坐标和地址
# 效果
# 字段
- 类型
继承自model.CharField字段
- 包
simplepro.components.fields.AMapField
# 参数
除了下列参数以外，其他参数与model.CharField一致。
| 参数名 | 类型 | 必选 | 说明 |
|---|---|---|---|
| api_key | string | 否 | 配置高德地图apikey，需要自行去高德官网申请，如果不填写，将使用simplepro官方申请的默认的，后续如果我们删除了这个key，会造成业务问题。 |
| width | string | 否 | 地图宽度，默认500px |
| height | string | 否 | 地图高度，默认300px |
| style | string | 否 | html中的样式属性，可以设置边框、背景等等，例如：border:#ccc 1px solid;backgroud:#fff; |
| pick_type | string | 否 | 坐标拾取类型，geo返回逗号分隔的经纬度，address返回地址文本，默认为geo |
# 例子
from django.db import models
from simplepro.components import fields
class AMapModel(models.Model):
name = fields.CharField(verbose_name='名称', show_word_limit=True, null=True, blank=True, max_length=64)
geo = fields.AMapField(max_length=32, verbose_name='经纬度', null=True, blank=True, help_text='点击地图获取经纬度')
# pick_type 取值为 geo、address
# geo 获取经纬度
# address 获取地址
address = fields.AMapField(max_length=128, verbose_name='地址', null=True, blank=True, help_text='点击地图获取地址',
pick_type='address')
def __str__(self):
return str(self.name)
class Meta:
verbose_name = '高德地图组件'
verbose_name_plural = '高德地图组件'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22