【Django】bootstrapselect使用方法

一、引入所需文件

1.引入本地文件

第一种方式是将所需文件下载到本地&＃xff0c;再进行引用。
文件下载&＃xff1a;bootstrap-select

Bootstrap 的所有 Javascript 插件都依赖 jQuery&＃xff0c;所以必须放在前边。然后再引入插件的文件。

<link rel&＃61;"stylesheet" href&＃61;"/static/css/bootstrap.min.css"><link rel&＃61;"stylesheet" href&＃61;"/static/css/bootstrap-select.min.css"><script src&＃61;"/static/js/jquery-3.1.1.min.js">script><script src&＃61;"/static/js/bootstrap.min.js">script><script src&＃61;"/static/js/bootstrap-select.min.js">script>


2.引入网络文件

<link href&＃61;"https://cdn.jsdelivr.net/npm/bootstrap&＃64;3.3.7/dist/css/bootstrap.min.css" rel&＃61;"stylesheet"><link href&＃61;"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel&＃61;"stylesheet"><script src&＃61;"https://cdn.jsdelivr.net/npm/jquery&＃64;1.12.4/dist/jquery.min.js">script><script src&＃61;"https://cdn.jsdelivr.net/npm/bootstrap&＃64;3.3.7/dist/js/bootstrap.min.js">script><script src&＃61;"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js">script>


不建议使用低版本比如1.0&＃xff0c;js取值赋值等写法会有所不同。

二、使用方法

1.基本使用方法

样式仅需class&＃61;"selectpicker"即可&＃xff0c;form-control是后添加的。
multiple是多选&＃xff0c;没有的话就是单选。
title&＃61;&＃39;请输入参数&＃39;是未选择时显示的文字。
data-live-search &＃61;“true”点开列表会有一个搜索框&＃xff0c;可以查找选项内容。

<select name&＃61;"pparameter" class&＃61;"form-control selectpicker" title&＃61;&＃39;请输入相关工艺参数&＃39; data-live-search &＃61;“true” multiple><option value&＃61;"参数1">参数1option><option value&＃61;"参数2">参数2option><option value&＃61;"参数3">参数3option><option value&＃61;"参数4">参数4option>
select>


其他用法可以参考Bootstrap-select中文网的例子

2.Django中进行取值&＃xff08;添加功能例子&＃xff09;

若选项数据量大&＃xff0c;需要动态修改&＃xff0c;建议创建单独的数据库表进行存储。

1. 定义表结构 (models.py)

from django.db import models# Create your models here.
class Pparameter(models.Model): # 相关工艺参数name &＃61; models.CharField(max_length&＃61;100)def __str__(self):return self.name


2. 路由配置 (urls.py)

urlpatterns &＃61; [...path(&＃39;add&＃39;, views.add, name&＃61;&＃39;add&＃39;),...
]


3. 视图层 实现功能 (views.py)

from django.shortcuts import render
from .models import Poem,Pparameterdef add(request):pparameters &＃61; Pparameter.objects.all()return render(request, &＃39;add.html&＃39;, {&＃39;pparameters&＃39;: pparameters})


4. 前台模版 (add.html)

<form action&＃61;"{% url &＃39;svc_add&＃39; %}" method&＃61;"post">...<select name&＃61;"pparameter" class&＃61;"form-control selectpicker" title&＃61;&＃39;请输入相关工艺参数&＃39; data-live-search &＃61;“true” multiple>{% for i in pparameters %}<option value&＃61;"{{ i.name }}">{{ i.name }}option>{% endfor %}select>...
form>


后台获取(views.py)

from django.shortcuts import render
from .models import Poem,Pparameter
from django.http import HttpResponseRedirect
from django.urls import reverse...
def svc_add(request):# 获得form提交的数据 通过POST# 获取复选框的值,是一个选中的数组pparameter &＃61; request.POST.getlist(&＃39;pparameter&＃39;)# 将数组转化为字符串pparameter &＃61; &＃39;,&＃39;.join(pparameter)...


2.Django中进行赋值&＃xff08;修改功能例子&＃xff09;

1. 路由配置 (urls.py)

urlpatterns &＃61; [...path(&＃39;add&＃39;, views.add, name&＃61;&＃39;add&＃39;),...
]


2. 视图层 实现功能 (views.py)

from django.shortcuts import render
from .models import Poem,Pparameterdef edit(request, id):# 获得要修改的数据poem &＃61; Poem.objects.get(pk&＃61;id)# 获得相关工艺参数pparameters &＃61; Pparameter.objects.all()# 渲染修改页面return render(request, &＃39;edit.html&＃39;, {&＃39;poem&＃39;: poem, &＃39;pparameters&＃39;: pparameters})


3. 前台赋值 (edit.html)
   $(&＃39;#ppselect&＃39;).selectpicker(&＃39;val&＃39;, 数组类型的值).trigger("change");数据库存入的是字符串类型&＃xff0c;将字符串转化为数组&＃xff0c;再赋值给select组件。

<form action&＃61;"{% url &＃39;svc_edit&＃39; poem.id %}" method&＃61;"post">...相关工艺参数&＃xff1a;<select id&＃61;"ppselect" name&＃61;"pparameter" class&＃61;"form-control selectpicker" title&＃61;&＃39;请输入相关工艺参数&＃39;data-live-search&＃61;“true” multiple>{% for i in pparameters %}<option value&＃61;"{{ i.name }}">{{ i.name }}option>{% endfor %}select>...
form>
<script>$(function () {var pp &＃61; &＃39;{{poem.pparameter}}&＃39;;$(&＃39;#ppselect&＃39;).selectpicker(&＃39;val&＃39;, pp.split(&＃39;,&＃39;)).trigger("change");})
script>


后台获取部分与添加相似&＃xff0c;使用getlist()进行获取即可。