【问题标题】:Django crispy form tabDjango 脆皮表单选项卡
【发布时间】:2017-04-09 14:58:07
【问题描述】:


我现在正在学习Django form。现在我专注于crispy form

现在很脆,然后在我掌握 form 之后,我将继续使用 Django Admin formDjango admin model form

Django 1.10
Python 3.6.0

我正在关注这些教程:
https://blog.bixly.com/awesome-forms-django-crispy-forms
http://django-crispy-forms.readthedocs.io/en/latest/layouts.html#
https://godjango.com/29-crispy-forms/

这是我的源代码:

views.py:

from django.views.generic import FormView
from apps.colors.forms import PersonDetailForm

class ColorStudyView(FormView):
    template_name = 'colors/study.html'
    form_class = PersonDetailForm
    success_url = '/'

forms.py:

from crispy_forms.bootstrap import Tab, TabHolder
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Layout
from django import forms


class NoFormTagCrispyFormMixin(object):
    @property
    def helper(self):
        if not hasattr(self, '_helper'):
            self._helper = FormHelper()
            self._helper.form_tag = False
        return self._helper


class PersonDetailForm(forms.Form):
    name = forms.CharField(max_length=100)
    age = forms.IntegerField(required=False)
    address1 = forms.CharField(max_length=50, required=False)
    address2 = forms.CharField(max_length=50, required=False)
    city = forms.CharField(max_length=50, required=False)
    state = forms.CharField(max_length=50, required=False)

    mobile = forms.CharField(max_length=32, required=False)
    home = forms.CharField(max_length=32, required=False)
    office = forms.CharField(max_length=32, required=False)
    twitter = forms.CharField(max_length=100, required=False)

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            TabHolder(
                Tab('Information',
                    'name',
                    'age'
                    ),
                Tab('Address',
                    'address1',
                    'address2',
                    'city',
                    'state'
                ),
                Tab('Contact',
                    'mobile',
                    'home',
                    'office',
                    'twitter',
                )
            )
        )
        self.helper.layout.append(Submit('submit', 'Submit'))

study.html:

{% load crispy_forms_tags %}


<!DOCTYPE html>
<html lang="en">
<head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <meta charset="UTF-8">
    <title>Study</title>
    <form action="" method="POST">
    {% crispy form %}
    </form>
</head>
<body>

</body>
</html>

问题:
标签不会改变。
我错过了什么吗?
很抱歉提出非常基本的问题,但这是我与Django frontend@的第一天

这是我的照片。标签 AddressContact 不起作用。

更新: Zollie 解决了我的问题。这是我的study.html

{% load staticfiles %}
{% load crispy_forms_tags %}


<!DOCTYPE html>
<html lang="en">
<head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <meta charset="UTF-8">
    <title>Study</title>
    <form action="" method="POST">
    {% crispy form %}
    </form>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js">
</script>
<script type="text/javascript" src="{% static 'bootstrap-tab.js' %}">  </script>

</body>
</html>

这是我的文件系统配置

/Users/el/Code/siam-sbrand/static
(siam-sbrand) Sarits-MacBook-Air-2:static el$ ls
admin           django_extensions   img
bootstrap-tab.js    file.txt        js
dist            font            rest_framework

【问题讨论】:

    标签: python django forms


    【解决方案1】:

    当我第一次想以酥脆的形式使用标签时,我遇到了同样的问题。不幸的是,这个包的文档很薄弱。

    为什么 TabHolder 和 Tabs 不起作用的答案是,因为您必须在 html 模板头中包含 jquery 和 javascript。此外,您必须下载 bootstrap-tab.js 并将其放在 bootstrap 子文件夹中的“静态”文件夹中,即,您还必须在 html 中包含它的路径。

    因此,仅在 html 头部包含 Bootstrap 或 bootstrap.css 是不够的。 这是一个示例:

      <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js">
    </script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js">
    </script>
    <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap-tab.js' %}">  </script>
    

    【讨论】:

    • 非常感谢您的回复。因为我的问题现在已经很老了。我必须挖掘我的目录并重新开始学习。我会尽快回复你
    • 嗨@Sarit,只是对您的更新的一个小更正:在您更新的html中,
    • 这对我来说是新知识。我在公司的例子我只在底部看到了
    • 对不起,我回复你的速度也太快了。 当然也保留在 html 的 中。 <form> 在 中。 ;)(这里是一大早 :))我的意思是: {% block content %} <h1>New Person Form</h1> {% crispy form %} {% endblock %} </form>
    • ...在 中有 到 css 文件, 等等....然后是 <scripts>。首先是 jquery,然后是 javascripts。只是为了让其他读者清楚。;)</scripts>
    【解决方案2】:

    检查这些事情:

    1. 在 settings.py 你应该有CRISPY_TEMPLATE_PACK = 'bootstrap3'
    2. 在您的静态文件中,您应该有一个 bootstrap-tab.js

    【讨论】:

    • 第一个我已经有了。但是第二个我没有。所以问题来自我的系统中缺少bootstrap-tab.js
    • 我确实在 settings.py 中收集了静态和 bootstrap3bootstrap4。完全没有影响
    【解决方案3】:

    虽然这个问题已经过时且已解决,但我发现添加更多观察结果可能是值得的:我遇到了问题并找到了另一个原因。

    首先,我检查并确认我已包含已接受答案中提到的 .js 文件。但是标签仍然不起作用。

    我找到了一些引导选项卡示例,例如https://mdbootstrap.com/docs/jquery/components/tabs/。我得出的结论是,要使标签正常工作,应该确保“标签标题”的 href attr 和“标签正文”的 id attr 之间存在一对一的关系。像这样:

    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
          aria-selected="true">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
          aria-selected="false">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
          aria-selected="false">Contact</a>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">A Tab</div>
      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">B tab</div>
      <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">C tab</div>
    </div>
    

    注意:注意'a'元素的href属性和'div'元素的id属性。

    我做了一些实验,得出的结论是:一旦相关的 .js 和其他文件被导入并正确设置了 href 和 id 属性,选项卡就可以工作了。

    现在问题变成了“如何正确设置脆皮”。

    我检查了以下文件: 1. /root/.pyenv/versions/3.7.3/lib/python3.7/site-packages/crispy_forms/bootstrap.py

    class Tab(Container):
        """
        Tab object. It wraps fields in a div whose default class is "tab-pane" and
        takes a name as first argument. Example::
    
            Tab('tab_name', 'form_field_1', 'form_field_2', 'form_field_3')
        """
        css_class = 'tab-pane'
        link_template = '%s/layout/tab-link.html'
    
        def render_link(self, template_pack=TEMPLATE_PACK, **kwargs):
            """
            Render the link for the tab-pane. It must be called after render so css_class is updated
            with active if needed.
            """
            link_template = self.link_template % template_pack
            return render_to_string(link_template, {'link': self})
    
    1. /root/.pyenv/versions/3.7.3/lib/python3.7/site-packages/crispy_forms/templates/bootstrap3/layout/tab-link.html
    <li class="tab-pane{% if 'active' in link.css_class %} active{% endif %}"><a href="#{{ link.css_id }}" data-toggle="tab">{{ link.name|capfirst }}{% if tab.errors %}!{% endif %}</a></li>
    

    我注意到 css_id 属性。而且我猜如果正确设置了一个“css_id”,那么剩下的可能就是crispy。我试过了。它就像一个魅力。

    也许清晰的文档需要改进。

    【讨论】:

      猜你喜欢
      • 2020-08-21
      • 2014-02-28
      • 2019-07-27
      • 2014-12-17
      • 2014-10-27
      • 2015-01-07
      • 2013-12-06
      • 2020-06-25
      • 2017-07-22
      相关资源
      最近更新 更多