# 内置组件

内置组件自simplepro 2.0+ 可用,低于2.0 不可用。

以下字段均在demo中有提供例子参考,demo下载 (opens new window)

# 组件列表

组件名 组件说明 版本
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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 例子


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

# 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

# 例子


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

# 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

# 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处理,querysetlimit无效。

# 关于搜索

搜索有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

字段配置:


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

# 完整例子


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

# OneToOneField 外键字段(Select)

一对一外键字段,渲染成select,除了字段命名不一致外,其他参数均与ForeignKey 外键字段(Select)

# 效果

# 字段

  • 类型

继承自model.OneToOneField字段

simplepro.components.fields.OneToOneField

# 参数

参考 ForeignKey 外键字段 参数

# 例子

参考 ForeignKey 外键字段 例子

# ManyToManyField 多对多字段 多选(Select)

多对多字段,渲染成select,除了字段命名不一致外,其他参数均与ForeignKey 外键字段(Select)

# 效果

# 字段

  • 类型

继承自model.ManyToManyField字段

simplepro.components.fields.ManyToManyField

# 参数

参考 ForeignKey 外键字段 参数

# 例子

参考 ForeignKey 外键字段 例子

# 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

# layer对话框按钮

在simpleui 2021.1.0版本,以及simplepro2.1 及以上中生效

对话框按钮是在admin中进行配置action,可以自定义输入的字段,然后通过ajax请求到action中进行业务的处理。

需要继承AjaxAdminfrom simpleui.admin import AjaxAdmin包中

simplepro也会同步支持对话框按钮功能。

# 效果

layer

# 字段说明

下列字段是指actionlayer属性

字段 说明
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

# action 返回结果

{
    'status': 'error',
    'msg': '请先选中数据!'
}
1
2
3
4

status = success/error

msg = 自定义

# 对话框按钮说明

  1. 如果需要作为增加和编辑 需要自己实现业务逻辑,编辑的时候将数据填充到value字段即可。

  2. 限制选中后才能提交数据,可以在后台进行限制

  3. 2020.1.0 及以上版本生效,需要继承AjaxAdminfrom simpleui.admin import AjaxAdmin包中。 不继承提交数据会500或者404 例如:


 if not post.get('_selected'):
            return JsonResponse(data={
                'status': 'error',
                'msg': '请先选中数据!'
            })

1
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

# 界面效果图

# 高德地图

字段可以使用高德地图选取坐标和地址

# 效果

# 字段

  • 类型

继承自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
更新时间: 9/1/2021, 10:35:55 AM