bootstraptable查看详情_bootstrap-table前端实现多条件时间段查询数据
實現思路：通過正則匹配到字段是否符合條件，時間段轉換為時間戳比對。
這是大體的效果圖：
頁面的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前端实现多条件时间段查询数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android 名片识别 简书,iOS
- 下一篇： hbuilder边框代码是什么_看懂HT