bootstraptable查看详情_bootstrap-table前端实现多条件时间段查询数据
實(shí)現(xiàn)思路：通過正則匹配到字段是否符合條件，時(shí)間段轉(zhuǎn)換為時(shí)間戳比對(duì)。
這是大體的效果圖：
頁面的html代碼
采購部門：
{foreach name="ware_list" item="vo" }
{$vo.warehouse_name}
{/foreach}
單據(jù)日期：
--
查 詢
下面為請(qǐng)求數(shù)據(jù)：
var productList=[]; //訂單數(shù)據(jù)
//生成訂單數(shù)據(jù)
$.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, //高度調(diào)整
striped: true, //是否顯示行間隔色
pagination: true, //是否顯示分頁(*)
sortable: true, //是否啟用排序
pageSize:10, //單頁記錄數(shù)
pageList:[5,10,20,30], //分頁步進(jìn)值
columns:[
{
title:'制單日期',
field:'arrive_time',
formatter:function(value,row,index){
var thisStr=changeTime(value*1000);
return thisStr;
}
},
{
title:'單據(jù)號(hào)',
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:'金額總計(jì)',
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:'狀態(tài)',
field:'audit_status',
formatter:function(value,row,index){
var thisStr='';
if(value==0){
thisStr='待審核(查看進(jìn)度)';
}else if(value==1){
thisStr='審核中(查看進(jìn)度)';
}else if(value==2){
thisStr='審核通過(查看進(jìn)度)';
}
else if(value==3){
thisStr='已拒絕(查看進(jìn)度)';
}
return thisStr;
}
},
{
title:'操作',
field:'id',
formatter:function(value,row,index){
var thisStr='查看詳情';
return thisStr;
}
}
]
});
}
});
首先實(shí)現(xiàn)一個(gè)單據(jù)號(hào)單條件查詢，遍歷查詢單據(jù)號(hào)字段，有符合條件的添加到newArry中，遍歷完畢之后表格加載newArry數(shù)據(jù)展現(xiàn)查詢結(jié)果：
//點(diǎn)擊搜索單據(jù)號(hào)
$('#sn-btn').click(function(){
var snVal=$('#sn-val').val();
searchFun(snVal,'sn');
});
查詢實(shí)現(xiàn)：
// 查詢單據(jù)號(hào)
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); //匹配當(dāng)前單據(jù)號(hào)是否符合條件
if(isHasName){
newArry.push(productList[i]); //符合條件添加到newArry中
}
}
$('#tb_data').bootstrapTable('load',newArry); //加載數(shù)據(jù)
}
下面我們用采購部門和時(shí)間段聯(lián)合查詢
//時(shí)間段查詢采購部門
$('#searchware').bind('click',function(){
var wareId=$('#purchaseSearch').val();
var startTime=getTimeStamp($('#startData').val()); //獲取開始時(shí)間戳
var endTime=getTimeStamp($('#endData').val()); //獲取結(jié)束時(shí)間戳
searchTimeFun(wareId,'warehouse_id',startTime,endTime,'arrive_time');
});
因?yàn)槲覀儷@取到的時(shí)間是2018-08-31格式的時(shí)間，所以我們需要把時(shí)間轉(zhuǎn)換為時(shí)間戳：
// 獲取時(shí)間戳
function getTimeStamp(val){
val=val+' 00:00:00'
var getTimes=new Date(val),
getTimes=getTimes.getTime()/1000;
return getTimes;
}
因?yàn)楹笈_(tái)給我返回的時(shí)間是時(shí)間戳，所以匹配的時(shí)候時(shí)間不用轉(zhuǎn)換，查詢實(shí)現(xiàn)：
// 時(shí)間段查詢采購部門
function searchTimeFun(wareId,wareIdStr,startTime,endTime,makeTimeStr){ //wareId采購部門ID,wareIdStr采購部門字段,startTime查詢開始時(shí)間,endTime開始結(jié)束時(shí)間,makeTimeStr匹配的時(shí)間字段
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);
}
如果采購部門不選擇，那就是查詢時(shí)間段內(nèi)所有的信息，實(shí)現(xiàn)效果圖：
總結(jié)
以上是生活随笔為你收集整理的bootstraptable查看详情_bootstrap-table前端实现多条件时间段查询数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android 名片识别 简书,iOS
- 下一篇： 炁体源流 鸿蒙,一人之下：八绝技中最强被