Question

当我将我的布尔字段放入list_editable时，它的图标从漂亮的开/关图标变为旧复选框。有没有办法用漂亮的图标保持字段可编辑？我想我已经这样做了，但不记得怎么做了......

Answer 1

使用您自己的JavaScript将复选框替换为相应的图像，并使用单击事件更改图像并相应地设置复选框。

CSS

.hidden {
    position:absolute;
    left:-99999px;
    width:0;
    height:0;
    overflow:hidden;
}

JS

(function($){
    var on_image = '/static/admin/img/admin/icon-yes.gif';
    var off_image = '/static/admin/img/admin/icon-no.gif';

    $(document).ready(function(){
        var $checkbox = $('.checkbox_field input');
        // Can't simply `hide()` as its value will not be posted
        $checkbox.addClass('hidden');
        var $img = $('<img/>');
        if ($checkbox.attr('checked')) {
            $img.attr('href', on_image);
            $img.attr('alt', 'On');
        } else {
            $img.attr('href', off_image);
            $img.attr('alt', 'Off');
        }
        $img.insertAfter($checkbox);

        $img.click(function(){
            var $img = $(this);
            var $checkbox = $img.siblings('input');

            if ($img.attr('href') == on_image) {
                $img.attr('href', off_image);
                $img.attr('alt', 'Off');
                $checkbox.attr('checked', false);
            } else {
                $img.attr('href', on_image);
                $img.attr('alt', 'On');
                $checkbox.attr('checked', true);
            }
        });
    });
)(django.jQuery);

list_editable modelAdmin中boolean字段的On / Off图标

1 个答案: