首页 > 其他分享 >bootstrap-select的使用

bootstrap-select的使用

时间:2022-11-03 22:33:20浏览次数:52  
标签:bootstrap forms field attrs 使用 true class select

引入css

<link rel="stylesheet" href="{% static 'plugin/bootstrap-select/css/bootstrap-select.min.css' %}">

引入js

<script src="{% static 'plugin/bootstrap-select/js/bootstrap-select.min.js' %}"></script>
<script src="{% static 'plugin/bootstrap-select/js/i18n/defaults-zh_CN.min.js' %}"></script>

后端modelform处理自定义标签

forms/issues.py

class IssuesModelForm(BootStrapModelForm, forms.ModelForm):
    class Meta:
        model = models.Issues
        exclude = ['project', 'creator', 'create_datetime', 'latest_update_datetime']
        widgets = {
            # 给前端下拉框标签添加bootstrap-select属性,使其支持但多选,关键字搜索,全选/全不选功能
            'assign': forms.Select(attrs={'class': 'selectpicker', 'data-live-search': 'true'}),
            'attention': forms.SelectMultiple(attrs={'class': 'selectpicker', 'data-live-search': 'true', 'data-actions-box': 'true'}),
            "parent": forms.Select(attrs={'class': "selectpicker", "data-live-search": "true"}),
            "start_date": forms.DateTimeInput(attrs={'autocomplete': "off"}),
            "end_date": forms.DateTimeInput(attrs={'autocomplete': "off"})
        }

forms/bootstrap.py

class BootStrapModelForm(object):
    bootstrap_exclude_list = []  # 自定制排除bootstrap样式列表

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for name, field in self.fields.items():
            if name in self.bootstrap_exclude_list:
                continue
            # 若自己的插件有自定制class属性,则使用旧属性,否则添加form-control属性
            old_class = field.widget.attrs.get('class')
            field.widget.attrs['class'] = '{} form-control'.format(old_class)
            field.widget.attrs['placeholder'] = f'请输入{field.label}'

标签:bootstrap,forms,field,attrs,使用,true,class,select
From: https://www.cnblogs.com/fuminer/p/16856086.html

相关文章

  • Vivado使用指南之:三、如何设置VIVADO压缩BIT文件
      在调试VIVADO 过程中,由于生成的BIT文件过大,而我使用的FLASH又是32MBIT的,出现了FLASH过小,无法烧录的情况。网上搜索到的方法都是说“generateprogammingfile下会有......
  • 使用docker-compose部署ELK
    文件目录结构elkdocker-compose.ymlelasticsearch.ymlkibana.ymllogstash.ymllogstash.conffilebeat.ymldata/elasticsearch/logs/password.txtdata/e......
  • 使用HDFS做一个记事本功能
       pom.xml<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchem......
  • 3.9 使用Python操作Excel表格的样式1
    #获取表格单元格,修改字体样式修改字体样式 Font(name=字体名称,size=字体大小,bold=是否加粗,italic=是否斜体,color=字体颜色)获取表格中字体的样式cell.font.属性......
  • Typora安装和使用
    Typora是一款非常高效的文件编辑软件。软件的下载地址:​​​https://typora.io/#windows​​升级改造的功能:1、增加导出word的功能下载并安装pandoc-2.11.0.2-windows-x8......
  • 2.Vue的快速使用
    1.vue的导入1.1源码下载引入下载地址:vue3:https://unpkg.com/[email protected]/dist/vue.global.jsvue2:https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js1.2CDN引入<s......
  • 协程的async使用
    async与launch一样都是开启一个协程,但是async会返回一个Deferred对象,该Deferred也是一个job async函数类似于launch函数.它启动了一个单独的协程,这是一个轻量级的线程......
  • oracle 存储过程使用
    创建存储过程createprocedureWMSendObj(orginvarchar2,deptinvarchar2)ascursorcurssis(selectdistinctcnofromHR_ARC_DISPAT......
  • 使用Wireshark完成实验3-IP
    1、使用Wireshark打开ip-ethereal-trace-1,如图 电脑IP地址为192.168.1.1022、如图,IP包头中上层协议字段的值为1,代表为ICMP 3、如图,IP头中有20字节  IP数据......
  • 使用注解实现加解密方式
    /***对象隐私数据加解密工具类.**@authord*@since2018年05月22日*/publicfinalclassPrivacyDataHandler{privatestaticConcurrentHashMap<Str......