17

'classes': ['collapse'] を ModelAdmin フィールドセットの 1 つに追加できるのと同じ方法で、Inline Model Admin を折りたたみ可能にしたいと考えています。

このチケット、Collapse in admin interface for inline related objectsでは、私が達成したいことを正確に説明しています。しかし、それまでの間、次のリリースを待つ間の最善の回避策は何ですか?

参考までに: 私は解決策を思いつきましたが、より良い解決策が存在すると思います。投票に任せます。

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 に答える
3

django 1.10 から、追加の css クラスを InlineModelAdmin にも追加できるようになりました。

インライン用にレンダリングされるフィールドセットに適用する追加の CSS クラスを含むリストまたはタプル。デフォルトはなしです。フィールドセットで構成されたクラスと同様に、折りたたみクラスを持つインラインは最初に折りたたまれ、ヘッダーに小さな「表示」リンクが表示されます。

ドキュメント

于 2016-09-23T15:31:15.290 に答える
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 に答える
2

これが私が解決した方法ですが、ハックのように感じます（ハックの場合）。

Django 独自の「表示/非表示」スクリプトを利用して、Google API からホストされた jQuery を使用して DOM を変更しました。管理ページの 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>");
});

最終結果は、TabularInline ではなく、StackedInline でのみ機能します。

于 2010-01-08T04:59:16.087 に答える
2

gerdemb's answer のいくつかの改善。'Show' および 'Hide' テキストを適切に追加し、リスト内の表形式のインライン名を事前に指定できるようにします。

$(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 に答える