Question

我需要自定义如何显示Django Admin的m2m小部件，但我有点难以从哪里开始。我试过从django.forms和django.contrib.admin.wigets继承几个小部件，但似乎没有任何工作。

以下是我正在寻找的内容的描述http://i.stack.imgur.com/81AY3.png。

任何帮助表示感谢。

Answer 1

这看起来就像单独使用JavaScript可以实现的那样。要将自己的JavaScript添加到Django管理员，请参阅ModelAdmin media definitions的文档。

Answer 2

这就是我想出的。它完成了大部分工作。但是，添加新项目时，列表不会更新，并且更改项目不会重定向回原始页面。

/your_app/forms.py

class ProductForm(forms.ModelForm):
    class Media:
        js = ('js/custom_m2m.js',)

    class Meta:
        model = Product

/your_media/js/custom_m2m.js

django.jQuery(function() {
    var $ = django.jQuery;

    // Add a new place holder div to hold the m2m list
    $('div.options div').append('<div class="newdiv"></div>');

    // Assign some variables
    var target = "options"; // <-- Target Field
    var newdiv = $('div.newdiv');
    var next_page = window.location.pathname;
    var add_link = $('div.'+target+' div a#add_id_'+target);
    var edit_img = "/static/media_admin/img/admin/icon_changelink.gif";
    var add_img = "/static/media_admin/img/admin/icon_addlink.gif";

    // Make the placeholder div bit nicer
    newdiv.attr("style", "line-height:20px; margin-left:105px;");

    // Iterate through select options and append them to 'newdiv'
    $('select#id_'+target+' option[selected="selected"]').each(function() {
        newdiv.append('<a href="/admin/shop/option/'+$(this).val()+'/?next='+next_page+'">'+$(this).text()+' <img src="'+edit_img+'" /></a><br />');
    });

    // Add a 'Add new' link after the option list
    add_link.html('<strong>Add new</strong> ' + add_link.html());
    add_link.appendTo(newdiv);

    // Show the 'newdiv' and hide the original dropdown
    $('select#id_'+target).after(newdiv);
    $('select#id_'+target).css("display", "none");
    $('div.'+target+' p[class="help"]').css("display", "none");
});

如您所见，上面的脚本使用了一些硬编码路径。任何改进都会有所帮助。

Django管理员Many2Many小部件定制

2 个答案: