list_editable模型中的布爾型字段的開/關圖標管理員

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);