CRM客戶關系管理系統（六）

第六章、排序和搜索功能開發

 6.1.排序功能開發

（1）kingadmin_tags.py

@register.simple_tag
def get_sorted_column(column,sorted_column,forloop):
    '''排序'''
    if column in sorted_column:    #如果這一列被排序了
        #要判斷上一次排序是按什么順序，本次取反
        last_sort_index = sorted_column[column]
        if last_sort_index.startswith('-'):
            #利用切片，去掉‘-’
            this_time_sort_index = last_sort_index.strip('-')
        else:
            #加上 '-'
            this_time_sort_index = '-%s'% last_sort_index
        return this_time_sort_index
    else:
        return forloop

（2）kingadmin/views.py

def get_orderby_result(request,querysets,admin_class):
    '''排序'''

    current_ordered_column = {}
    #通過前端獲取到要排序的字段的索引（是個字符串）
    orderby_index = request.GET.get('_o')
    if orderby_index:
        #通過索引找到要排序的字段,因為索引有可能是負數也有可能是負數，要用絕對值，否則負值的時候取到了其它字段了
        orderby_key = admin_class.list_display[abs(int(orderby_index))]
        #記錄下當前是按什么排序字段的
        current_ordered_column[orderby_key] = orderby_index
        if orderby_index.startswith('-'):
            orderby_key = '-' + orderby_key

        return querysets.order_by(orderby_key),current_ordered_column
    else:
        return querysets,current_ordered_column

 

（3）table_obj_list.html

<th><a href="?_o={% get_sorted_column column sorted_column forloop.counter0 %}">{{ column }}</a></th>

 

 （4）添加正序倒序的圖標

Boorstrap組件：https://v3.bootcss.com/components/

 

把bootstrap的fonts靜態文件放到kingadmin/staic/fonts下面

 

（5）kingadmin_tags.py

@register.simple_tag
def render_sorted_arrow(column,sorted_column):
    '''排序的圖標'''

    if column in sorted_column:
        last_sort_index = sorted_column[column]
        if last_sort_index.startswith('-'):
            arrow_direction = 'bottom'

        else:
            arrow_direction = 'top'
        ele = '''<span class="glyphicon glyphicon-triangle-%s" aria-hidden="true"></span>'''% arrow_direction
        return mark_safe(ele)

    return ''

（6）table_obj_list.html

<th><a href="?_o={% get_sorted_column column sorted_column forloop.counter0 %}">
                                {{ column }}{% render_sorted_arrow column sorted_column %}
                            </a></th>

 

 效果：

 

6.2.分頁、排序和過濾組合使用

 （1）排序和過濾組合

table_obj_list.html

 

 （2）kingamdin_tags.py

@register.simple_tag
def render_filtered_args(admin_class):
    '''拼接過濾的字段'''
    if admin_class.filter_conditions:
        ele = ''
        for k,v in admin_class.filter_conditions.items():
            ele += '&%s=%s'%(k,v)
        return mark_safe(ele)
    else:
        return ''

現在過濾和排序的組合沒有問題，但是分頁還沒有組合到一起

 （3）過濾和分頁組合

table_obj_list.html

 kingadmin_tags.py

 

def render_paginator先添加一個參數admin_class

 

（4）分頁、排序、過濾組合

table_obj_list.py

 

 kingadmin_tag.py

@register.simple_tag
def get_current_sorted_column_index(sorted_column):
    #三元運算，如果為True執行左邊的，為False，執行右邊的（''）
    return list(sorted_column.values())[0] if sorted_column else ''

 table_obj_list.py

 

 kingadmin_tag.py

 

 

現在排序、過濾和分頁組合就沒有問題了

 

6.3.搜索功能開發

全局搜索 

（1）table_obj_list.html

 

 

 （2）kingadmin/views.py

 

from django.db.models import Q

def get_searched_result(request,querysets,admin_class):
    '''搜索'''

    search_key = request.GET.get('_q')
    if search_key:
        q = Q()
        q.connector = 'OR'

        for search_field in admin_class.search_fields:
            q.children.append(("%s__contains"%search_field,search_key))

        return querysets.filter(q)
    return querysets

現在實現的是全局搜索功能（不能過濾的同時搜索）， 下面添加 過濾+搜索的功能

 

 過濾+搜索

 只需要添加一個隱藏標簽就可以

kingadmin/vies.py

 

 table_obj_list.html

 

 效果：

 

 

功能優化

（1）用戶並不知道可以通過哪些字段去搜索，在搜索框里添加提示（placeholder）

 <form action="">
            <input type="search" placeholder="{% for s in admin_class.search_fields %}{{ s }},{% endfor %}" name="_q" value="{{ admin_class.search_key }}">
            <input type="submit" value="Search">
            {% for k,v in admin_class.filter_conditions.items %}
                <input type="hidden" name="{{ k }}" value="{{ v }}">
            {% endfor %}
        </form>

 

 （2）添加Bootstrap樣式

 過濾字段提示和美化

table_obj_list.html

“過濾”按鈕

kingadmin_tags.py

過濾字段提示+添加框的美化樣式

 

末尾要加</div>閉合

 

顯示效果：