Question

嘿，我一直在尝试添加带有复选框的下拉列表，但是我只能到here为止，在该点窗口小部件未应用来自sumoselect.html的样式表。我要去的是this。

这是我尝试使用的https://github.com/HemantNegi/jquery.sumoselect的sumoselect的存储库，这是我的层次结构：

Top Level
---|core
---|workItem
---|static
    ---|js
        ---|jquery-3.3.1.js
        ---|sumoselect folder

有人知道如何解决此问题以应用sumoselect文件夹中的样式表

sumoselect.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="{% static 'js/sumoselect/jquery.sumoselect.js' %}"> 
</script>
    <link rel="stylesheet" href="{% static 'js/sumoselect/sumoselect.css' 
%}"/>

    <script type="text/javascript">
        $(document).ready(function () {
            window.test = $('.testsel').SumoSelect({okCancelInMulti:true,
                captionFormatAllSelected: "Yeah, OK, so everything." });
        });
    </script>

    <style type="text/css">
        body{font-family: 'Helvetica Neue',
        Helvetica, Arial,
        sans-serif;
        color:#444;
        font-size:13px;}

        p,div,ul,li{padding:0px; margin:0px;}
    </style>
</head>
<body>
    <form method="get">
    <br />
    <select multiple="multiple" placeholder="Hello im from placeholder"  
class="testsel">
    <option selected value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option disabled="disabled" value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
    <option value="porsche">Porche</option>
    <option value="ferrari">Ferrari</option>
    <option class="someclass" value="audi">Audi</option>
    <option class="someclass" value="bmw">BMW</option>
    <option class="someclass" value="porsche">Porche</option>
    <option value="ferrari">Ferrari</option>
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
    <option value="porsche">Porche</option>
    <option value="ferrari">Ferrari</option>
    <option value="hyundai">Hyundai</option>
    <option value="mitsubishi">Mitsubishi</option>
    </select>
    </form>
    <br>

    </body>
</html>

backlog.html

{% extends 'base.html' %}

{% load django_tables2 %}
{% load static %}
<!doctype html>

{% block content %}
    <html>
        <head>
            <link rel="stylesheet" href="{% static 
'django_tables2/themes/paleblue/css/screen.css' %}" />
        </head>
        <body>
            <h3>Work Items in Backlog using django_tables2</h3>
            {% render_table table %}
            {% include 'sumo.html' %}

        </body>
     </html>
{% endblock %}

在我的base.html中，确保添加了我的jquery路径 base.html

    <script type="text/javascript" 
        src="{{ STATIC_URL }} js/jquery-3.3.1.js">
    </script>

将SumoSelect（jQuery插件）添加到Django

0 个答案: