Django Admin FilteredSelectMultiple 小部件选择不起作用

Posted

技术标签:

【中文标题】Django Admin FilteredSelectMultiple 小部件选择不起作用【英文标题】:Django Admin FilteredSelectMultiple Widget selection doesn't work 【发布时间】:2021-09-15 20:23:18 【问题描述】:

我正在尝试使用管理小部件库中的 FilteredSelectMultiple 小部件。我能够让小部件显示在网页上。但是,我无法获得将选择移至“已选择”框的按钮。

这是我的代码:

forms.py

from django.contrib.admin.widgets import FilteredSelectMultiple
from .models import *
from django import forms

# Create your views here.
class ExampleForm(forms.Form):
    example_selector =  forms.ModelMultipleChoiceField(queryset=Example.objects.all(), widget=FilteredSelectMultiple("Example", is_stacked=False))
    class Media:
                css = 
                    'all': ('/static/admin/css/widgets.css',),
                
                js = ('/admin/jsi18n',)

    class Meta:
        model = Example

models.py

from django.db import models

# Create your models here. 
class Example(models.Model):
        example_id = models.AutoField(primary_key=True)
        example_name = models.CharField(max_length=45, blank=False, null=False)
    
        def __str__(self):
            return self.example_name

index.html

% load static %
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

</head>
<body>
    example.as_p

<script src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script src="/static/admin/js/jquery.init.js"></script>
<script src="/static/admin/js/SelectFilter2.js"></script>
    example.media
</body>
</html>

url.py

from django.contrib import admin
from django.urls import path, include
from django import views as django_views
from django.conf.urls import url

urlpatterns = [
    path('admin/', admin.site.urls),
    path('example/', include('example.urls')),
    url(r'^jsi18n/$', django_views.i18n.javascriptCatalog.as_view(), name='jsi18n'),
]

我检查了浏览器控制台,当我尝试点击按钮时,出现以下错误:

Uncaught TypeError: Cannot read property 'addEventListener' of null
at Object.init (VM427 SelectFilter2.js:148)
    at VM427 SelectFilter2.js:233
    at NodeList.forEach (<anonymous>)
    at VM427 SelectFilter2.js:231
init @ SelectFilter2.js:148
(anonymous) @ VM427 SelectFilter2.js:233
(anonymous) @ VM427 SelectFilter2.js:231
load (async)
(anonymous) @ VM427 SelectFilter2.js:230

我还验证了必要的css和js文件,如下所示:

【问题讨论】:

【参考方案1】:
form.media

结果在我的情况下:

<script src="/static/admin/js/core.js"></script>
<script src="/admin/jsi18n/"></script>
<script src="/static/admin/js/SelectBox.js"></script>
<script src="/static/admin/js/SelectFilter2.js"></script>

我也不使用你的网址:

url(r'^jsi18n/$', django_views.i18n.JavaScriptCatalog.as_view(), name='jsi18n'),

这绝对是 jquery 的问题。我还在模板库中手动加载 jquery,所以在 gnereted 页面的源视图中我也有:

  <script src="/static/js/jquery.min.js"></script>
  <link rel="stylesheet" href="/static/css/widgets_group_form.css">
 

应该这样做。我还包括 bootstrap4(不知道是否需要)和 popper。

可能是导入(它不会按时加载)

【讨论】:

我试过这段代码。不幸的是,这对我不起作用。 我可以说,当我第一次尝试使用这个小部件时,我也遇到了很多问题。主要是 css 和 jquery。我的 widgets_group_form.css 只是管理小部件的副本,其中元素的高度/宽度值发生了变化

以上是关于Django Admin FilteredSelectMultiple 小部件选择不起作用的主要内容,如果未能解决你的问题,请参考以下文章

django 配置管理后台,出现多个 admin/admin/admin

django1.6 admin不能登录

django 自带的admin登录页面可以换自己做的登录页面吗?

django admin能加逻辑操作吗?

django的admin界面怎么没有样式

怎么使用django里面admin的部分内容