十四.在頁面上增加查詢功能



在此章中，我們建立一個搜索功能，可以通過搜索來對錶格進行篩選。

 

由於之前，我們在res_list.html中預留了search這個block，因此，我們只需要在具體頁面中來填充完這個search block就可以了。隨後，在views.py中list函數中，完善search功能。

 

對於三個元素，node,line,device，我們都進行相應的搜索框設置。

 

1.在views.py中，增加搜索功能。在此，對原先的list函數進行更改，更改如下：

#顯示各列表信息
def lists(request, table):
    #從根據不同的請求，來獲取相應的數據,並跳轉至相應頁面
    if table == 'node':
        #將原先的data更名爲raw_data
        raw_data = Node.objects.all()
        list_template = 'node_list.html'
        sub_title = '節點信息'
    if table == 'line':
        raw_data = Line.objects.all()
        list_template = 'line_list.html'
        sub_title = '線路信息'
    if table == 'device':
        raw_data = Device.objects.all()
        list_template = 'device_list.html'
        sub_title = '設備信息'

    #通過GET方法從提交的URL來獲取相應參數
    if request.method == 'GET':
        #建立一個空的參數的字典
        kwargs = {}
        #建立一個空的查詢語句
        query = ''
        #提交過來的GET值是一個迭代的鍵值對
        for key, value in request.GET.iteritems():
            #刨去其中的token和page選項
            if key != 'csrfmiddlewaretoken' and key != 'page':
                #由於線路和設備的外鍵均與node表格有關，當查詢線路中的用戶名稱或設備信息中的使用部門時，可以直接通過以下方式跨表進行查找
                if key == 'node':
                    kwargs['node__node_name__contains'] = value
                    #該query用於頁面分頁跳轉時，能附帶現有的搜索條件
                    query += '&' + key + '=' + value
                #其餘的選項均通過key來辨別
                else:
                    kwargs[key + '__contains'] = value
                    #該query用於頁面分頁跳轉時，能附帶現有的搜索條件
                    query += '&' + key + '=' + value
        #通過元始數據進行過濾，過濾條件爲健對值的字典
        data = raw_data.filter(**kwargs)
    #如果沒有從GET提交中獲取信息，那麼data則爲元始數據
    else:
        data = raw_data

    #將分頁的信息傳遞到展示頁面中去
    data_list, page_range, count, page_nums = pagination(request, data)
    #建立context字典，將值傳遞到相應頁面
    context = {
        'data': data_list,
        'table': table,
        'query': query,
        'page_range': page_range,
        'count': count,
        'page_nums': page_nums,
        'sub_title': sub_title,
    }
    #跳轉到相應頁面，並將值傳遞過去
    return render(request,list_template,context)

2.修改相應頁面，首先是節點頁面，搜索對象爲

名稱	Name值
節點名稱	Node_name
節點地址	Node_address
節點類型	Node_type

Node_list.html:

{% block search %}
    <div class="col-sm-3">
                        <div class="input-group">
                            <span class="input-group-addon" id="node_name" >節點名稱</span>
                         <!-- 如果之前已經寫入了node_name的信息，那麼頁面重新加載後保留-->
                            <input type="text" class="form-control" placeholder="" aria-describedby="node_name" name="node_name"
                                    {% if request.GET.node_name %}value = {{ request.GET.node_name }}{% endif %}>
                        </div>
                     </div>

                     <div class="col-sm-3">
                        <div class="input-group">
                            <span class="input-group-addon" id="node_address">節點地址</span>
                            <input type="text" class="form-control" placeholder="" aria-describedby="node_address" name = "node_address"
                                    {% if request.GET.node_address %}value = {{ request.GET.node_address }}{% endif %}>
                        </div>
                     </div>

                     <div class="col-sm-3">
                         <div class="input-group">
                             <span class="input-group-addon" id="node_type">節點類型</span>
                             <select class="form-control" name="node_type">
                                 <option value="">所有類型</option>
                                 <option value="總部" {% if request.GET.node_type and request.GET.node_type == '總部'%} selected{% endif %}>總部</option>
                                 <option value="分部" {% if request.GET.node_type and request.GET.node_type == '分部'%} selected{% endif %}>分部</option>
                            </select>
                             </div>
                    </div>
{% endblock %}

3.修改相應line_list頁面，首先是line頁面，搜索對象爲

名稱	Name值
線路編號	Line_code
用戶名稱	Node
運營商	Line_spname

Line_list.html：

{% block search %}

                     <div class="col-sm-3">
                        <div class="input-group">
                            <span class="input-group-addon" id="line_code" >線路編號</span>
                            <input type="text" class="form-control"  aria-describedby="line_code" name="line_code"
                             {% if request.GET.line_code %}value = {{ request.GET.line_code }}{% endif %}      >
                        </div>
                     </div>

                     <div class="col-sm-3">
                        <div class="input-group">
                            <span class="input-group-addon" id="node">用戶名稱</span>
                            <input type="text" class="form-control"  aria-describedby="node_name" name="node"
                                     {% if request.GET.node %}value = {{ request.GET.node }}{% endif %}  >
                        </div>
                     </div>

                     <div class="col-sm-3">
                         <div class="input-group">
                             <span class="input-group-addon" id="sp_name">運營商</span>
                             <select class="form-control" name="line_spname">
                                 <option value="">所有運營商</option>
                                 <option value="中國電信" {% if request.GET.line_spname and request.GET.line_spname == '中國電信'%} selected{% endif %}>中國電信</option>
                                 <option value="電信信網" {% if request.GET.line_spname and request.GET.line_spname == '電信信網'%} selected{% endif %}>電信信網</option>
                                 <option value="中國移動" {% if request.GET.line_spname and request.GET.line_spname == '中國移動'%} selected{% endif %}>中國移動</option>
                                <option value="中國聯通"  {% if request.GET.line_spname and request.GET.line_spname == '中國聯通'%} selected{% endif %}>中國聯通</option>
                                <option value="其他"  {% if request.GET.line_spname and request.GET.line_spname == '其他'%} selected{% endif %}>其他</option>

                            </select>
                             </div>
                    </div>                   

{% endblock %}

4.修改device_list頁面，爲設備增加搜索項：

名稱	Name值
設備名稱	Device_caption
管理地址	Device_ip
使用部門	Node

Device_list.html:

{% block search %}

                     <div class="col-sm-3">
                        <div class="input-group">
                            <span class="input-group-addon" id="device_caption" >設備名稱</span>
                            <input type="text" class="form-control" placeholder="" aria-describedby="node_name" name="device_caption">
                        </div>
                     </div>
    

                    <div class="col-sm-3">
                        <div class="input-group">
                            <span class="input-group-addon" id="device_ip">管理地址</span>
                            <input type="text" class="form-control" placeholder="" aria-describedby="node_address" name = "device_ip">
                        </div>
                     </div>

                    <div class="col-sm-3">
                        <div class="input-group">
                            <span class="input-group-addon" id="node">使用部門</span>
                            <input type="text" class="form-control" placeholder="" aria-describedby="node_address" name = "node">
                        </div>
                     </div>

{% endblock %}

5.以線路搜索爲例的頁面顯示：

可以發現不僅頁面顯示的內容符合搜索項的內容，而且相關的分頁信息也隨之變化。而且在翻頁時，相關搜索內容會保留。