list_editableのブール値フィールドのオン/オフアイコンmodelAdmin

Question

ブール値フィールドをlist_editableに配置すると、niceオン/オフアイコンからレガシーチェックボックスにアイコンが変わります。素敵なアイコンで編集可能なフィールドを維持する方法はありますか？ 私はすでにこれをしていると思いますが、どういうことを覚えていないと思います...

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