Cách thêm 'thu gọn' vào một Django StackedInline

Question

Trong cùng một cách bạn có thể thêm 'các lớp': ['thu gọn'] vào một trong các trường mẫu ModelAdmin của bạn, tôi muốn có một Quản trị viên Mô hình Nội tuyến có thể đóng lại được.

Vé này, Collapse in admin interface for inline related objects, thảo luận chính xác những gì tôi muốn thực hiện. Nhưng trong thời gian đó, công việc tốt nhất là gì trong khi chờ đợi bản phát hành tiếp theo?

FYI: Tôi đã đưa ra một giải pháp, nhưng tôi nghĩ rằng một giải pháp tốt hơn tồn tại. Tôi sẽ để cho việc bỏ phiếu chăm sóc nó.

Answer 1

Đây là cách tôi giải quyết nó, nhưng nó cảm thấy quá giống như một hack (cho một hack).

Tôi đã sử dụng jQuery được lưu trữ từ các API của Google để sửa đổi DOM, tận dụng lợi thế của tập lệnh 'show/hide' của Django. Nếu bạn nhìn vào các nguồn html của một trang admin, kịch bản cuối cùng được tải là thế này:

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

Các bình luận trong tập tin đó đã cho tôi ý tưởng: Đòn bẩy ModelAdmin media definitions để tải riêng kịch bản dom làm thay đổi tôi.

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') 
# ..... 

Và sau đó bên trong các tập tin tham chiếu javascript:

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

Kết quả cuối cùng chỉ hoạt động trên StackedInline, KHÔNG TabularInline.

Answer 2

tôi đã đưa ra giải pháp này sử dụng jQuery hoạt động trên 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"); 
}); 

Answer 3

Một vài cải tiến về câu trả lời của gerdemb. Thêm 'Hiển thị' và 'Ẩn' text một cách thích hợp, đồng thời cho phép bạn chỉ định tên inline bảng trong danh sách trước:

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

Answer 4

Bạn có thể sử dụng Grappelli - mà hỗ trợ sụp đổ fieldsets. Nó sử dụng một giải pháp giống như các giải pháp được đề cập ở trên, nhưng javascript/mã hóa đã được thực hiện - bạn chỉ cần thêm 'classes' :(collapse đóng cửa '), vào fieldset của bạn (xem http://readthedocs.org/docs/django-grappelli/en/latest/customization.html)

ví dụ:

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

Answer 5

giải pháp hiện tại của tôi, dựa vào người khác được liệt kê ở đây, có các tính năng sau:

• Chỉ sụp đổ inlines Stacked
• không sụp đổ inlines có chứa một lỗi
• Không thu gọn nội dòng 'trống'.

Đó là giải pháp Javascript, có nghĩa là nó cần được đưa vào trang/mẫu của bạn bằng cách nào đó.

Nó yêu cầu jQuery được tải trên trang trước khi nó được thực hiện. Phiên bản hiện đại của Django có này.

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

Answer 6

Từ django 1.10, Bây giờ chúng tôi có thể thêm lớp css bổ sung vào InlineModelAdmin.

Danh sách hoặc bộ chứa các lớp CSS bổ sung để áp dụng cho fieldset được hiển thị cho nội tuyến. Mặc định là Không. Giống như với các lớp được định cấu hình trong các trường, các dòng nội tuyến có lớp thu gọn sẽ bị thu gọn ban đầu và tiêu đề của chúng sẽ có liên kết "hiển thị" nhỏ.

Docs