17

以同样的方式，您可以将 'classes': ['collapse'] 添加到您的 ModelAdmin 字段集之一，我希望能够让 Inline Model Admin 可折叠。

这张票，在管理界面中折叠内联相关对象，准确地讨论了我想要完成的事情。但与此同时，在我们等待下一个版本时，最好的解决方法是什么？

仅供参考：我想出了一个解决方案，但我认为存在更好的解决方案。我会让投票来处理它。

4

8 回答 8

5

您可以使用 grappelli - 它支持折叠字段集。它使用的解决方案与上面提到的解决方案非常相似，但 javascript / 编码已经完成 - 您只需将 'classes':(collapse closed',) 添加到您的字段集（请参阅http://readthedocs.org/docs /django-grappelli/en/latest/customization.html )

例如：

class ModelOptions(admin.ModelAdmin):
    fieldsets = (
        ('', {
            'fields': ('title', 'subtitle', 'slug', 'pub_date', 'status',),
        }),
        ('Flags', {
            'classes': ('grp-collapse grp-closed',),
            'fields' : ('flag_front', 'flag_sticky', 'flag_allow_comments', 'flag_comments_closed',),
        }),
        ('Tags', {
            'classes': ('grp-collapse grp-open',),
            'fields' : ('tags',),
        }),
    )

class StackedItemInline(admin.StackedInline):
    classes = ('grp-collapse grp-open',)

class TabularItemInline(admin.TabularInline):
    classes = ('grp-collapse grp-open',)
于 2012-06-01T23:57:18.040 回答
4

我想出了这个使用 jQuery 的解决方案TabularInline

var selector = "h2:contains('TITLE_OF_INLINE_BLOCK')";
$(selector).parent().addClass("collapsed");
$(selector).append(" (<a class=\"collapse-toggle\" id=\"customcollapser\" href=\"#\"> Show </a>)");
$("#customcollapser").click(function() {
    $(selector).parent().toggleClass("collapsed");
});
于 2010-07-01T19:51:27.193 回答
4

在现代 Django 中，这很简单，如下所示：

class FooInline(admin.StackedInline):
     model = Foo
     classes = ['collapse']
于 2019-01-07T07:00:05.033 回答
3

基于此处列出的其他解决方案，我当前的解决方案具有以下功能：

  • 仅折叠堆叠的内联
  • 不折叠包含错误的内联
  • 不折叠“空”内联。

这是一个 Javascript 解决方案，这意味着它需要以某种方式注入到您的页面/模板中。

它要求在执行时将 jQuery 加载到页面上。现代版本的 Django 有这个。

$(function(){
  // Find all stacked inlines (they have an h3, with a span.inline_label).
  // Add a link to toggle collapsed state.
  $('.inline-group h3 .inline_label').append(' (<a class="collapse-toggle" href="#">Show</a>)');
  // Collapse all fieldsets that are in a stacked inline (not .tabular)
  $('.inline-group :not(.tabular) fieldset').addClass('collapsed');
  // Click handler: toggle the related fieldset, and the content of our link.
  $('.inline-group h3 .inline_label .collapse-toggle').on('click', function(evt) {
    $(this).closest('.inline-related').find('fieldset').toggleClass('collapsed');
    text = $(this).html();
    if (text=='Show') {
      $(this).html('Hide');
    } else {
      $(this).html('Show');
    };
    evt.preventDefault();
    evt.stopPropagation();
  });
  // Un-collapse empty forms, otherwise it's 2 clicks to create a new one.
  $('.empty-form .collapse-toggle').click();
  // Un-collapse any objects with errors.
  $('.inline-group .errors').closest('.inline-related').find('.collapse-toggle').click();
});
于 2012-08-28T06:07:12.757 回答
3

从 django 1.10 开始，我们现在也可以向 InlineModelAdmin 添加额外的 css 类。

包含额外 CSS 类的列表或元组，以应用于为内联呈现的字段集。默认为无。与在字段集中配置的类一样，带有折叠类的内联最初将被折叠，并且它们的标题将有一个小的“显示”链接。

文档

于 2016-09-23T15:31:15.290 回答
2

gerdemb 的答案有一些改进。适当地添加“显示”和“隐藏”文本，并允许您预先在列表中指定表格内联名称：

$(document).ready(function(){
var tabNames = ['Inline Name 1', 'Inline Name 2', 'Inline Name 3'];
for (var x in tabNames)
{
    var selector = "h2:contains(" + tabNames[x] + ")";
    $(selector).parent().addClass("collapsed");
    $(selector).append(" (<a class=\"collapse-toggle\" id=\"customcollapser\""+ x + " href=\"#\"> Show </a>)");
};    
$(".collapse-toggle").click(function(e) {
    $(this).parent().parent().toggleClass("collapsed");
    var text = $(this).html();
    if (text==' Show ') {
        $(this).html(' Hide ');
        }
    else {
        $(this).html(' Show ');
    };
    e.preventDefault();
});
});
于 2010-07-30T19:16:19.360 回答
2

这是我解决它的方法，但感觉太像黑客（对于黑客）。

我使用从 Google API 托管的 jQuery 来修改 DOM，利用 Django 自己的“显示/隐藏”脚本。如果您查看管理页面的 html 源代码，最后加载的脚本是这样的：

<script type="text/javascript" src="/media/admin/js/admin/CollapsedFieldsets.js"></script>

该文件中的注释给了我一个想法：利用ModelAdmin 媒体定义来加载我自己的 dom-altering 脚本。

from django.contrib import admin
from django.contrib.admin.sites import AdminSite
from myapp.models import *
import settings
media = settings.MEDIA_URL

class MyParticularModelAdmin(admin.ModelAdmin):
    # .....
    class Media:
          js = ('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js',
              media+'js/addCollapseToAllStackedInlines.js')
# .....

然后在引用的 javascript 文件中：

// addCollapseToAllStackedInlines.js
$(document).ready(function() {
  $("div.inline-group").wrapInner("<fieldset class=\"module aligned collapse\"></fieldset>");
});

最终结果仅适用于 StackedInline，而不适用于 TabularInline。

于 2010-01-08T04:59:16.087 回答
0

如果你想要可折叠的内联模型，

class AAAAdmin(admin.StackedInline):
    model = AAA
    classes = ['collapse', 'show']

如果您想要可折叠的字段分组，

fieldsets = (
    ("Basic Details", {'fields': (
        "title", "street_line1", "street_line2", "city", "state", "country", "zipcode",
        "additional_code", "zone", "contact_no"
    )}),
    ("Google Map Related Details", {"classes": ['collapse', 'show'], 'fields': (
        "location", "longitude", "latitude", "google_map_link"
    )}),
)
于 2020-08-26T12:25:12.997 回答