【Django】bootstrap-select 使用方法

一、引入所需文件

1.引入本地文件

第一种方式是将所需文件下载到本地，再进行引用。
文件下载：bootstrap-select

Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边。然后再引入插件的文件。

	<!-- css -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-select.min.css">
    <!-- js -->
    <script src="/static/js/jquery-3.1.1.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/bootstrap-select.min.js"></script>

2.引入网络文件

	<!-- css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet">
    <!-- js -->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

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

二、使用方法

1.基本使用方法

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

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

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

2.Django中进行取值（添加功能例子）

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

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

from django.db import models


# Create your models here.
class Pparameter(models.Model):  # 相关工艺参数
    name = models.CharField(max_length=100)

    def __str__(self):
        return self.name

2. 路由配置 (urls.py)

urlpatterns = [
    ...
    path('add', views.add, name='add'),
	...
]

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

from django.shortcuts import render
from .models import Poem,Pparameter

def add(request):
    pparameters = Pparameter.objects.all()
    return render(request, 'add.html', {'pparameters': pparameters})

4. 前台模版 (add.html)

<form action="{% url 'svc_add' %}" method="post">
	...
	<select name="pparameter" class="form-control selectpicker" title='请输入相关工艺参数' data-live-search =“true” multiple>
	     {% for i in pparameters %}
	         <option value="{{ 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 = request.POST.getlist('pparameter')
    # 将数组转化为字符串
    pparameter = ','.join(pparameter)
    ...

2.Django中进行赋值（修改功能例子）

1. 路由配置 (urls.py)

urlpatterns = [
    ...
    path('add', views.add, name='add'),
	...
]

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

from django.shortcuts import render
from .models import Poem,Pparameter


def edit(request, id):
    # 获得要修改的数据
    poem = Poem.objects.get(pk=id)
    # 获得相关工艺参数
    pparameters = Pparameter.objects.all()
    # 渲染修改页面
    return render(request, 'edit.html', {'poem': poem, 'pparameters': pparameters})

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

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

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