Django:bootstrap table自定義查詢實現

時間 2019-11-11

標籤 django bootstrap table 自定義查詢實現欄目 Python 简体版

原文原文鏈接

參考：https://jalena.bcsytv.com/archives/tag/bootstrapjavascript

背景：css

　　bootstrap table在客戶端分頁方式下，自帶有簡易的搜索功能，可是功能太單一，須要定製化組合搜索html

前端：前端

　　注意前端的加大加粗的部分，就是爲了自定義查詢新增的java

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
 <head>
        <meta charset="UTF-8" />
        <title>項目列表</title>

        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

 </head>

    <body> {# 自定義搜索條件區域#} <div> <input id="search-keyword" placeholder="請輸入編號查詢"> <button id="search-button">查詢</button> </div>



{#        bootstrap table自動渲染區域#}
        <table id="mytab" class="table table-hover"></table>

    </body><script type="text/javascript">

                    $('#mytab').bootstrapTable({
                        {#所有參數#}
                        {#url: "{% static 'guchen_obj.json' %}",     //請求後臺的URL（*）或者外部json文件，json內容若爲json數組[{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]，#}
                                                                        //且鍵的名字必須與下方columns的field值同樣，同時sidePagination須要設置爲client或者直接註釋掉，這樣前臺才能讀取到數據，且分頁正常。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//當json文件內容爲json對象時：{"total": 2,"rows": [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]}，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//分頁要寫爲server，可是server若是沒有處理的話,會在第一頁顯示全部的數據，分頁插件不會起做用

                        url:"/getdata",                     //從後臺獲取數據時，能夠是json數組，也能夠是json對象
                        dataType: "json",
                        method: 'get',                      //請求方式（*）
                        toolbar: '#toolbar',                //工具按鈕用哪一個容器
                        striped: true,                      //是否顯示行間隔色
                        cache: false,                       //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
                        pagination: true,                   //是否顯示分頁（*）
                        sortable: true,                     //是否啓用排序
                        sortOrder: "asc",                   //排序方式
                        {#queryParams: oTableInit.queryParams,//傳遞參數（*）#}
                        {#sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）,數據爲json數組時寫client，json對象時（有total和rows時）這裏要爲server方式，寫client列表無數據#}
                        pageNumber: 1,                       //初始化加載第一頁，默認第一頁
                        pageSize: 10,                       //每頁的記錄行數（*）
                        pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
                        search: true,                       //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大
                        strictSearch: true,
                        showColumns: true,                  //是否顯示全部的列
                        showRefresh: true,                  //是否顯示刷新按鈕
                        minimumCountColumns: 2,             //最少容許的列數
                        clickToSelect: true,                //是否啓用點擊選中行
                        {#height: 500,                        //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度#}
                        uniqueId: "ID",                     //每一行的惟一標識，通常爲主鍵列
                        showToggle: false,                    //是否顯示詳細視圖和列表視圖的切換按鈕
                        cardView: false,                    //是否顯示詳細視圖
                        detailView: false,                   //是否顯示父子表

                     //獲得查詢的參數  queryParams: function (params) { //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的 var query_params = { rows: params.limit, //頁面大小  page: (params.offset / params.limit) + 1, //頁碼  sort: params.sort, //排序列名  sortOrder: params.order, //排位命令（desc，asc） //查詢框中的參數傳遞給後臺  search_kw: $('#search-keyword').val(), // 請求時向服務端傳遞的參數  }; return query_params; },



                        columns: [
                            {
                                checkbox:true  //第一列顯示覆選框
                            },

                            {
                                field: 'id',  //返回數據rows數組中的每一個字典的鍵名與此處的field值要保持一致
                                title: '構建序號'
                            },
                            {
                                field: 'name',
                                title: '用例總數'
                            },
                            {
                                field: 'price',
                                title: '經過率'
                            },
                            {
                                field: 'operate',
                                title: '操做',
                                width: 120,
                                align: 'center',
                                valign: 'middle',
                                formatter: actionFormatter,
                             },

                        ],
                    });


                //操做欄的格式化
                function actionFormatter(value, row, index) {
                    var id = value;
                    var result = "";
                    result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
                    result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>";
                    result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='刪除'><span class='glyphicon glyphicon-remove'></span></a>";
                    return result;
                }


                // 搜索查詢按鈕觸發事件  $(function() { $("#search-button").click(function () { $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！  $('#search-keyword').val() }) }) </script>


</html>

F12抓包：能夠看到搜索的關鍵詞「ABC」已經做爲參數發送到服務端了，下來只要服務端接收該參數，並查詢對應sql返回mysql

後端：jquery

def getdata(request):

    # 接收url傳遞來的search_kw參數值
    search_kw = request.GET.get('search_kw')
    print 'search_kw的值爲：%s' % search_kw
    
    db = pymysql.connect("192.168.207.160", "root", "123qwe!@#", "autotest", charset='utf8')
    cursor = db.cursor()
    rows = []
    # 根據是否存在搜索關鍵字執行不一樣sql,用來返回符合條件的數據
    if search_kw:
        saasCount = "select id,total,succ,fail,percent from saas where id like '%%%s%%'" % search_kw
    else:
        saasCount = "select id,total,succ,fail,percent from saas"
    cursor.execute(saasCount)
    saas_results = cursor.fetchall()
    print list(saas_results)
    for i in list(saas_results):
        print i
        # 將數組中的每一個元素提取出來拼接爲rows的內容
        rows.append({"id": i[0], "name": i[1], "price": i[4]})
    print rows
    # rows返回爲json數組
    return HttpResponse(json.dumps(rows))