如何添加'；崩塌'；到Django StackedInline

通过同样的方式，您可以将'classes'：['collapse']添加到您的一个ModelAdmin字段集，我希望能够使内联模型管理员是可折叠的

这张票，正好讨论了我想要实现的目标。但与此同时，在我们等待下一个版本时，什么是最好的解决方案

---

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

我是这样解决的，但这感觉太像一个黑客了

我使用从GoogleAPI托管的jQuery修改DOM，利用Django自己的“show/hide”脚本。如果查看管理页面的html源，最后加载的脚本如下：

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

然后在引用的javascript文件中：

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

//addCollapseToAllStackedLines.js
$（文档）.ready（函数（）{
$（“div.inline-group”）.wrapInner（“”）；
});

---

最终结果仅适用于StackedLine，而不适用于TablerLine。

我使用jQuery提出了这个解决方案，它适用于

TablerLine

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");
});

var selector=“h2:contains（'TITLE_OF_INLINE_BLOCK'）”；
$（选择器）.parent（）.addClass（“折叠”）；
$（选择器）。追加（“”）；
$（“#customcollapser”）。单击（函数（）{
$（选择器）.parent（）.toggleClass（“折叠”）；
});

对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();
});
});

$（文档）.ready（函数（）{
var tabNames=['Inline Name 1'、'Inline Name 2'、'Inline Name 3']；
for（选项卡名中的变量x）
{
var selector=“h2:包含（“+tabNames[x]+”）；
$（选择器）.parent（）.addClass（“折叠”）；
$（选择器）。追加（“”）；
};    
$（“.collapse toggle”）。单击（函数（e）{
$（this.parent（）.parent（）.toggleClass（“折叠”）；
var text=$（this.html（）；
如果（文本==“显示”）{
$（this.html（'Hide'）；
}
否则{
$（this.html（'Show'）；
};
e、 预防默认值（）；
});
});

您可以使用支持折叠字段集的grappelli。它使用的解决方案与上面提到的解决方案非常相似，但是javascript/编码已经完成了-您只需将“类”：（折叠关闭），）添加到您的字段集（请参阅）

例如：

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',)

---

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

• 仅塌陷堆叠的进水口
• 不折叠包含错误的内联线
• 不会折叠“空”内联

这是一个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();
});

$（函数（）{
//查找所有堆叠的内联线（它们有一个h3，带有span.inline_标签）。
//添加链接以切换折叠状态。
$（'.inline group h3.inline_label'）。追加（'（）'）；
//折叠堆叠内联（非表格）中的所有字段集
$（'.inline group:not（.tabular）fieldset'）。addClass（'collapsed'）；
//单击处理程序：切换相关字段集和链接的内容。
$（'.inline group h3.inline_label.collapse toggle'）。打开（'click'，函数（evt）{
$（this）.closest（'.inline-related'）.find（'fieldset'）.toggleClass（'collapsed'）；
text=$（this.html（）；
如果（文本=='Show'）{
$（this.html（'Hide'）；
}否则{
$（this.html（'Show'）；
};
evt.preventDefault（）；
evt.stopPropagation（）；
});
//取消折叠空表单，否则只需单击两次即可创建新表单。
$（'.empty form.collapse toggle'）。单击（）；
//取消折叠任何有错误的对象。
$（'.inline group.errors'）。最近（'.inline related'）。查找（'.collapse toggle'）。单击（）；
});

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

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

---

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

class FooInline(admin.StackedInline):
     model = Foo
     classes = ['collapse']

---

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

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"
    )}),
)

---

这取决于javascript的执行顺序（在django之前），并且不会一直工作。请注意，在JS中执行此操作的解决方案（以及我当前的解决方案）不应该折叠其中有错误的字段集！

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"
    )}),
)