当前位置：文江博客话题详情

Django admin Many2Many 小部件定制

发布于 2024-10-03 11:18:40 字数 255 浏览 1 评论 0原文

我需要自定义 Django Admin 的 m2m 小部件的显示方式，但我有点不知从哪里开始。我尝试从 django.forms 和 django.contrib.admin.wigets 中继承几个小部件，但似乎没有任何效果。

这是我正在寻找的内容的描述 https://i.sstatic.net/81AY3.png。

任何帮助表示赞赏。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

GRAY°灰色天空 2024-10-10 11:18:40

这看起来像是只用 JavaScript 就可以实现的事情。要将您自己的 JavaScript 添加到 Django 管理，请参阅 ModelAdmin 媒体定义。

回复收藏 0 原文

白昼 2024-10-10 11:18:40

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

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

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

This is what I came up with. It does most of the work. However, the list does not get updated when a new item is added and changing an item does not redirect back to the original page.

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

As you can see, the above script uses some hardcoded paths. Any improvement would be helpful.

回复收藏 0 原文

~没有更多了~