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

這是大體的效果圖：

頁面的html代碼

采購部門：

{foreach name="ware_list" item="vo" }

{$vo.warehouse_name}

{/foreach}

單據日期：

--

查 詢

下面為請求數據：

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='審核中(查看進度)';

}else if(value==2){

thisStr='審核通過(查看進度)';

}

else if(value==3){

thisStr='已拒絕(查看進度)';

}

return thisStr;

}

},

{

title:'操作',

field:'id',

formatter:function(value,row,index){

var thisStr='查看詳情';

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);

}

如果采購部門不選擇，那就是查詢時間段內所有的信息，實現效果圖：

總結

以上是生活随笔為你收集整理的bootstraptable查看详情_bootstrap-table前端实现多条件时间段查询数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。