bootstrap-table前端實現多條件時間段查詢數據

實現思路：經過正則匹配到字段是否符合條件，時間段轉換爲時間戳比對。

這是大致的效果圖：

 

頁面的html代碼

<div class="content-head mgb10">
                            <div class="form-group">
                                <label  class="sr-only"></label>
                                <input type="text" class="form-control" id="sn-val" placeholder="請輸入單據號">
                            </div>
                            <div class="form-group">
                                <a href="javascript:;" class="btn btn-default btn-sm" id="sn-btn">
                                    <i class="fa fa-search"></i>
                                </a>
                            </div>
                            <div class="form-group">
                                <label >採購部門：</label>
                                <select name="warehouse_name" class="form-control" id="purchaseSearch">
                                    {foreach name="ware_list" item="vo" }
                                    <option value="{$vo.warehouse_id}">{$vo.warehouse_name}</option>
                                    {/foreach}
                                </select>
                            </div>
                            <div class="form-group">
                                <label  class="date-label">單據日期：</label>
                                <div class="date-container">
                                    <i class="fa fa-calendar date-icon"></i>
                                    <input type="text" id="startData" class="form-control date-input">
                                </div>

                            </div>
                            <div class="form-group">
                                <label  class="date-label">--</label>
                                <div class="date-container">
                                    <i class="fa fa-calendar date-icon"></i>
                                    <input type="text" id="endData" class="form-control date-input">
                                </div>
                            </div>
                            <div class="form-group">
                                <a href="javascript:;" id="searchware" class="btn btn-default btn-sm"><i class="fa fa-search"></i>查 詢</a>
                            </div>
                    </div>
                    <div class="tb-container">
                        <table id="tb_data" data-mobile-responsive="true"></table>
                    </div>

　　

下面爲請求數據：

var productList=[];　　//訂單數據
//生成訂單數據
    $.ajax({
        url:dataUrl,
        type:'get',
        async:false,
        success:function(res){
            var response=JSON.parse(decodeURIComponent(res));
            productList=response;
            $('#tb_data').bootstrapTable({
                data:response,
                height:base.countTbodyHeight("#tb_data") + 100, //高度調整
                striped: true,                          //是否顯示行間隔色
                pagination: true,                       //是否顯示分頁（*）
                sortable: true,                         //是否啓用排序
                pageSize:10,                            //單頁記錄數
                pageList:[5,10,20,30],                  //分頁步進值
                columns:[
                    {
                        title:'制單日期',
                        field:'arrive_time',
                        formatter:function(value,row,index){
                            var thisStr=changeTime(value*1000);
                            return thisStr;
                        }
                    },
                    {
                        title:'單據號',
                        field:'sn',
                    },
                    {
                        title:'採購部門',
                        field:'warehouse_name',
                    },
                    {
                        title:'制單人',
                        field:'operator',
                    },
                    {
                        title:'貨品條目',
                        field:'product_detail_id',
                        formatter:function(value,row,index){
                            var AllNum=0;
                            var valueArry=JSON.parse(value);
                            for(var i in valueArry){
                                var thisNum=parseFloat(valueArry[i].num);
                                AllNum+=thisNum;
                            }
                            return AllNum;
                        }
                    },
                    {
                        title:'金額總計',
                        field:'product_detail_id',
                        formatter:function(value,row,index){
                            var AllPrice=0;
                            var valueArry=JSON.parse(value);
                            for(var i in valueArry){
                                var thisPrice=parseFloat(valueArry[i].purchase_price);
                                AllPrice+=thisPrice;
                            }
                            return AllPrice;
                        }
                    },
                    {
                        title:'狀態',
                        field:'audit_status',
                        formatter:function(value,row,index){
                            var thisStr='';
                            if(value==0){
                                thisStr='待審覈（查看進度）';
                            }else if(value==1){
                                thisStr='<span class="ex-cur">審覈中</span>（查看進度）';
                            }else if(value==2){
                                thisStr='<span class="ex-suc">審覈經過</span>（查看進度）';
                            }
                            else if(value==3){
                                thisStr='<span class="ex-err">已拒絕</span>（查看進度）';
                            }
                            return thisStr;
                        }
                    },
                    {
                        title:'操做',
                        field:'id',
                        formatter:function(value,row,index){
                            var thisStr='<a href="/view/purchase_detail?id='+value+'">查看詳情</a>';
                            return thisStr;
                        }
                    }
                ]
            });
        }
    });

　　首先實現一個單據號單條件查詢，遍歷查詢單據號字段，有符合條件的添加到newArry中，遍歷完畢以後表格加載newArry數據展示查詢結果：

//點擊搜索單據號
$('#sn-btn').click(function(){
    var snVal=$('#sn-val').val();
    searchFun(snVal,'sn');
});

　　查詢實現：

// 查詢單據號
function searchFun(searchVal,snNameStr){ 　　//searchVal爲用戶輸入的搜索值，snNameStr爲搜索的字段
    var newArry=[];
    for(var i in productList){
        var snName=productList[i][snNameStr];
        searchVal=new RegExp(searchVal);
        var isHasName=searchVal.test(snName);　　//匹配當前單據號是否符合條件
        if(isHasName){
            newArry.push(productList[i]);　　　　//符合條件添加到newArry中　
        }
    }
    $('#tb_data').bootstrapTable('load',newArry);　　//加載數據
}

　　

　　下面咱們用採購部門和時間段聯合查詢

//時間段查詢採購部門
$('#searchware').bind('click',function(){
    var wareId=$('#purchaseSearch').val();
    var startTime=getTimeStamp($('#startData').val());　　//獲取開始時間戳
    var endTime=getTimeStamp($('#endData').val());　　　　 //獲取結束時間戳
    searchTimeFun(wareId,'warehouse_id',startTime,endTime,'arrive_time');
});

　　由於咱們獲取到的時間是2018-08-31格式的時間，因此咱們須要把時間轉換爲時間戳：

// 獲取時間戳
function getTimeStamp(val){
    val=val+' 00:00:00'
    var getTimes=new Date(val),
    getTimes=getTimes.getTime()/1000;
    return getTimes;
}

　　由於後臺給我返回的時間是時間戳，因此匹配的時候時間不用轉換，查詢實現：

// 時間段查詢採購部門
function searchTimeFun(wareId,wareIdStr,startTime,endTime,makeTimeStr){     //wareId採購部門ID,wareIdStr採購部門字段,startTime查詢開始時間,endTime開始結束時間,makeTimeStr匹配的時間字段
    console.log(wareId,wareIdStr,startTime,endTime,makeTimeStr)
    var newArry=[];
    for(var i in productList){
        var warehouseId=productList[i][wareIdStr];
        wareId=new RegExp(wareId)
        var isHasName=wareId.test(warehouseId);
        var makeTime=productList[i][makeTimeStr];
        var isTimeSlot=false;
        console.log(makeTime,startTime)
        if(makeTime>=startTime && makeTime<=endTime){
            console.log('true')
            isTimeSlot=true;
        }
        if(isHasName && isTimeSlot){
            newArry.push(productList[i]);
        }
    }
    $('#tb_data').bootstrapTable('load',newArry);
}

　　若是採購部門不選擇，那就是查詢時間段內全部的信息，實現效果圖：