十四.在页面上增加查询功能



在此章中，我们建立一个搜索功能，可以通过搜索来对表格进行筛选。

 

由于之前，我们在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.以线路搜索为例的页面显示：

可以发现不仅页面显示的内容符合搜索项的内容，而且相关的分页信息也随之变化。而且在翻页时，相关搜索内容会保留。