實現Django Admin的多對多的復選框效果

效果:左邊顯示的是未選中的字段,右邊顯示的是已選中的字段,兩邊點擊的標簽可以互相更換

首先在king_admin.py中增加filter_horizontal字段

1 class CustomerAdmin(BaseAdmin):
2     list_display = [‘qq‘,‘name‘,‘source‘,‘consultant‘,‘consult_course‘,‘date‘,‘status‘]
3     list_filters = [‘source‘,‘consultant‘,‘consult_course‘,‘status
 
‘,‘date‘]
4     search_fields = [‘qq‘,‘name‘,‘consultant__name‘]
5     list_per_page = 5
6     ordering = ‘id‘
7     filter_horizontal = [‘tags‘,]

在views中不需要進行修改

在頁面增加復選框的樣式和相應的標簽

 1 <div class="col-sm-5" style="width:340px">
 2                             {% if field.name in admin_class.filter_horizontal %}
 
 3 {#                                實現和Django類似的復選框#}
 4                                 <div class="col-md-4">
 5                                     {% get_m2m_tags  admin_class field form_obj as m2m_obj_tags%}
 6                                     <select multiple class="filter-select-box-left
 
" id="id_{{ field.name }}_from">
 7                                         {% for obj_tag in  m2m_obj_tags%}
 8                                             <option ondblclick="move_element(this,‘id_{{ field.name }}_to‘,‘id_{{ field.name }}_from‘)" value="{{ obj_tag.id }}">{{ obj_tag }}</option>
 9                                         {% endfor %}
10                                     </select>
11                                 </div>
12                                 <div class="col-md-4">
13                                     {% get_m2m_selected_tags form_obj field as select_tags%}
14                                     <select tag="choose_list" multiple name="{{ field.name }}"class="filter-select-box-right" id="id_{{ field.name }}_to">
15                                         {% for obj_tag in  select_tags %}
16                                             <option ondblclick="move_element(this,‘id_{{ field.name }}_from‘,‘id_{{ field.name }}_to‘)" value="{{ obj_tag.id }}">{{ obj_tag }}</option>
17                                         {% endfor %}
18                                     </select>
19                                 </div>
20                             {% else %}
21                                 {{ field }}
22                             {% endif %}
23                         </div>

在頁面的css中修改復選框的樣式

 1 {% block css %}
 2 <style type="text/css">
 3     .filter-select-box-left{
 4         height:160px!important;
 5         width:120px;
 6         margin-right:10px;
 7         border-re
 8     }
 9  .filter-select-box-right{
10         height:160px!important;
11         width:120px;
12         margin-left:60px;
13     }
14 </style>
15 
16 {% endblock %}

在頁面的js中增加點擊事件,點擊復選框內的元素可以實現互相轉移

思路:將左邊復選框中的option節點刪除,右邊復選框的option節點增加

1 function move_element(ths,target_id,new_target_id){
2         //移動思路:刪除左邊當前標簽,在右邊添加當前標簽
3         var opt_ele = "<option value=‘" + $(ths).val() + "‘ ondblclick=move_element(this,‘"+new_target_id+"‘,‘"+target_id+"‘)>" + $(ths).text()+"</option>"
4 
5         //$(ele).off().ondblclick();
6         //$(ele).appendTo("#"+target_id);
7         $(‘#‘+target_id).append(opt_ele);
8         $(ths).remove();
9     }

同時在提交的時候,將右邊的復選框的所有元素全選,然後提交

首先給form表單添加onsubmit事件

1     //循環右邊所有的元素,然後全選
2     function select_all_choose(){
3         $(‘select[tag="choose_list"] option‘).each(function(){
4             $(this).prop("selected",true);
5         })
6         return true;
7     }

在tag自定義標簽中,實現後臺渲染返回到前端

右邊的復選框:返回記錄中已選的tags

思路:通過getattr從當前的form_obj.instance和列名中獲取到已選的tags對象

1 @register.simple_tag
2 def get_m2m_selected_tags (form_obj,field):
3     #返回已選中的復選框數據
4     if form_obj.instance.id:
5         field_obj = getattr(form_obj.instance,field.name)
6         return field_obj.all()

左邊的復選框:返回記錄沒有選擇的tags

思路:獲取數據庫全部的tags和已選的tags,然後循環,如果不是已選的tags則放入到一個新的列表,返回

 1 @register.simple_tag
 2 def get_m2m_tags(admin_class,field,form_obj):
 3     #返回多對多所有待選數據
 4 
 5     #表結構對象的多對多字段
 6     all_field_obj = getattr(admin_class.model,field.name)
 7     #全部多對多字段
 8     all_field_list = all_field_obj.rel.to.objects.all()
 9 
10     if form_obj.instance.id:#判斷記錄是否有多對多對象,如果沒有則是新建,有就是修改
11         # 已選數據的多對多對象
12         choose_field_obj = getattr(form_obj.instance, field.name)
13         #已選數據的多對多字段
14         selected_obj_list = choose_field_obj.all()
15     else: #表示創建新的記錄
16         return all_field_list
17 
18     standby_obj_list = []
19     for obj in all_field_list:
20         if obj not in selected_obj_list:
21             standby_obj_list.append(obj)
22 
23 
24     return standby_obj_list

Python CRM項目四