Question

刚开始将JQuery UI融入我的应用程序。显然，滑块仅适用于div元素。我有一个基于模型（ModelForm）的表单。其中一个字段是十进制字段，如下所示：

class mymodel(models.Model):
    rating = models.DecimalField(max_digits = 5, decimal_places = 2)
    ...

像这样创建：

class modelCreate(generic.CreateView):
    template_name = 'form.html'
    model = mymodel

form.html：

{% extends "base.html" %}

{% block content %}
{% load staticfiles %}
    <!--<script src='http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js'></script>-->

    <link rel="stylesheet" href="{% static 'Content/css/startTheme/jquery-ui-1.10.4.custom.css' %}" />
    <script src={% static 'Scripts/js/jquery-1.10.2.js' %} ></script>
    <script src={% static 'Scripts/js/jquery-ui-1.10.4.custom.js' %} ></script>

    <div class="form_container">
        <form action="" id="myform" method="post">{% csrf_token %}
            {{ form.non_field_errors }}
            <table>
                <tr class="fieldWrapper">
                    <td class="label">
                        <label for="id_rating">Your number:</label>
                    </td>
                    <td class="field">
                        {{ form.rating }}
                        <div class="error">
                                {{ form.rating.errors }}
                        </div>                            
                    </td>
                </tr>
                <tr>
                    <td colspan="2">            
                        <div class="btnContainer">
                            <input type="submit" class='btn' value="Create" />    
                        </div>         
                    </td>
                </tr>
            </table>           
        </form>
    </div>
{% endblock %}

使用我创建的普通div上的滑块正常工作。

但是如果在输入元素上使用它，则只更改输入框边框的颜色。它成为一个美化的输入框。

我想到的另一种方法是删除页面上的十进制字段，替换为div，并在提交之前将该值保存到模型中（通过Form_valid（））。

但我将这个解决方案作为最后的手段。

可自定义的滑块对于此应用非常重要。任何帮助将不胜感激。

Answer 1

最简单的方法是隐藏rating输入字段，并为更新<div>值的滑块添加rating。我已经创建了一个简单的演示（下面）来演示这个想法。

注意：该演示的最大值为5.但是，声明您的字段DecimalField(max_digits=5, decimal_places=2)可以存储最多999的数字。这显然会让您难以获得使用滑块确切的数字。

DEMO

更具体地针对您的form.html：

...
<td class="field">
    {{ form.rating.as_hidden }}
    <div id="rating_slide"></div>
    <div class="error">
        {{ form.rating.errors }}
    </div>                            
</td>
...

如果您想要更多集成的方法，可以为视图创建mixin课程，或为模板创建inclusion-tag。

对于Django中的模型，不能为DecimalField实现Jquery Ui滑块

1 个答案:

DEMO