Python CRM项目四

实现Django Admin的多对多的复选框效果

效果:左边显示的是未选中的字段,右边显示的是已选中的字段,两边点击的标签可以互相更换

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

 class CustomerAdmin(BaseAdmin):
     list_display = ['qq','name','source','consultant','consult_course','date','status']
     list_filters = ['source','consultant','consult_course','status','date']
     search_fields = ['qq','name','consultant__name']
     list_per_page = 5
     ordering = 'id'
     filter_horizontal = ['tags',]

在views中不需要进行修改

在页面增加复选框的样式和相应的标签

 <div class="col-sm-5" style="width:340px">
                             {% if field.name in admin_class.filter_horizontal %}
 {#                                实现和Django类似的复选框#}
                                 <div class="col-md-4">
                                     {% get_m2m_tags  admin_class field form_obj as m2m_obj_tags%}
                                     <select multiple class="filter-select-box-left" id="id_{{ field.name }}_from">
                                         {% for obj_tag in  m2m_obj_tags%}
                                             <option ondblclick="move_element(this,'id_{{ field.name }}_to','id_{{ field.name }}_from')" value="{{ obj_tag.id }}">{{ obj_tag }}</option>
                                         {% endfor %}
                                     </select>
                                 </div>
                                 <div class="col-md-4">
                                     {% get_m2m_selected_tags form_obj field as select_tags%}
                                     <select tag="choose_list" multiple name="{{ field.name }}"class="filter-select-box-right" id="id_{{ field.name }}_to">
                                         {% for obj_tag in  select_tags %}
                                             <option ondblclick="move_element(this,'id_{{ field.name }}_from','id_{{ field.name }}_to')" value="{{ obj_tag.id }}">{{ obj_tag }}</option>
                                         {% endfor %}
                                     </select>
                                 </div>
                             {% else %}
                                 {{ field }}
                             {% endif %}
                         </div>

在页面的css中修改复选框的样式

 {% block css %}
 <style type="text/css">
     .filter-select-box-left{
         height:160px!important;
         width:120px;
         margin-right:10px;
         border-re
     }
  .filter-select-box-right{
         height:160px!important;
         width:120px;
         margin-left:60px;
     }
 </style>

 {% endblock %}

在页面的js中增加点击事件,点击复选框内的元素可以实现互相转移

思路:将左边复选框中的option节点删除,右边复选框的option节点增加

 function move_element(ths,target_id,new_target_id){
         //移动思路:删除左边当前标签,在右边添加当前标签
         var opt_ele = "<option value='" + $(ths).val() + "' ondblclick=move_element(this,'"+new_target_id+"','"+target_id+"')>" + $(ths).text()+"</option>"

         //$(ele).off().ondblclick();
         //$(ele).appendTo("#"+target_id);
         $('#'+target_id).append(opt_ele);
         $(ths).remove();
     }

同时在提交的时候,将右边的复选框的所有元素全选,然后提交

首先给form表单添加onsubmit事件

     //循环右边所有的元素,然后全选
     function select_all_choose(){
         $('select[tag="choose_list"] option').each(function(){
             $(this).prop("selected",true);
         })
         return true;
     }

在tag自定义标签中,实现后台渲染返回到前端

右边的复选框:返回记录中已选的tags

思路:通过getattr从当前的form_obj.instance和列名中获取到已选的tags对象

 @register.simple_tag
 def get_m2m_selected_tags (form_obj,field):
     #返回已选中的复选框数据
     if form_obj.instance.id:
         field_obj = getattr(form_obj.instance,field.name)
         return field_obj.all()

左边的复选框:返回记录没有选择的tags

思路:获取数据库全部的tags和已选的tags,然后循环,如果不是已选的tags则放入到一个新的列表,返回

 @register.simple_tag
 def get_m2m_tags(admin_class,field,form_obj):
     #返回多对多所有待选数据

     #表结构对象的多对多字段
     all_field_obj = getattr(admin_class.model,field.name)
     #全部多对多字段
     all_field_list = all_field_obj.rel.to.objects.all()

     if form_obj.instance.id:#判断记录是否有多对多对象,如果没有则是新建,有就是修改
         # 已选数据的多对多对象
         choose_field_obj = getattr(form_obj.instance, field.name)
         #已选数据的多对多字段
         selected_obj_list = choose_field_obj.all()
     else: #表示创建新的记录
         return all_field_list

     standby_obj_list = []
     for obj in all_field_list:
         if obj not in selected_obj_list:
             standby_obj_list.append(obj)

     return standby_obj_list