如何將'collapse'添加到Django StackedInline

以同樣的方式，您可以將'classes'：['collapse']添加到您的某個ModelAdmin字段集，我希望能夠將Inline Model Admin可摺疊。如何將'collapse'添加到Django StackedInline

這張票，Collapse in admin interface for inline related objects，正好討論我想完成。但同時，在等待下一個版本發佈時，最好的解決方案是什麼？

僅供參考：我想出了一個解決方案，但我認爲存在一個更好的解決方案。我會讓投票來照顧它。

2010-01-08 Daniel Rhoden

。注意，爲此在JS（和我目前的一個一樣）應該沒有倒塌的是在他們的錯誤字段設置解決方案！ – 2012-08-28 06:00:54

下面是我如何解決它，但它感覺太像一個黑客（對於黑客）。

我使用由Google API託管的jQuery來利用Django自己的「顯示/隱藏」腳本來修改DOM。如果你看一個管理頁面的HTML源代碼，加載的最後一個腳本是這樣的：

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

在該文件中的註釋給了我的想法：利用ModelAdmin media definitions加載我自己的DOM-改變腳本。

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-08 04:59:16

這依賴於JavaScript執行的命令（這在django之前），並不總是工作。 – ionelmc 2011-07-08 20:55:35

我想出了使用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-01 19:51:27 user27478

一對夫婦的改善工程上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-30 19:16:19 nosforz

您可以使用格拉佩利 - 它支持摺疊字段集。它使用與上述解決方案非常類似的解決方案，但javascript /編碼已經完成 - 您只需將'classes':(摺疊關閉）添加到您的字段集（請參閱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-01 23:57:18 danbgray

我目前的解決方案的基礎上，在這裏列出他人，具有以下特點：

只有坍塌堆積的內嵌
不垮含錯誤的內嵌
不折疊'空'內聯。

這是一個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-28 06:07:12

從django 1.10開始，我們現在可以在InlineModelAdmin中添加額外的css類。

包含額外CSS類的列表或元組應用於爲內聯呈現的字段集。默認爲None。與在字段集中配置的類一樣，具有摺疊類的內聯將首先摺疊，並且其標題將具有小的「顯示」鏈接。

Docs

來源

2016-09-23 15:31:15 Sagar

如何將'collapse'添加到Django StackedInline

回答

相關問題