bootstrap-table前端实现多条件时间段查询数据

时间:2024-01-21 12:07:58

实现思路:通过正则匹配到字段是否符合条件,时间段转换为时间戳比对。

这是大体的效果图:

 

页面的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);
}

  如果采购部门不选择,那就是查询时间段内所有的信息,实现效果图: