Bootstrap Table 搜索框和查詢功能
1..知識點(diǎn)bootstrapTable 刷新和查詢配置
2.提升js代碼性能
1.減少全局變量聲明
2.緩存dom節(jié)點(diǎn)查找結(jié)果
3.局部變量緩存全局變量
/**
* @param col bootstrapTable列表生成配置對象
*/
var searchValue ={};//查詢匹配對象
var $button = $('<div class="columns pull-right search-button"><button class="btn btn-default" type="button" name="refresh" title="查詢"><i class="glyphicon glyphicon-search icon-search"></i></button></div>');
var $input = $('<div class="columns pull-right search-input"><input class="form-control" type="text" placeholder="搜索"></div>');
var $select = $('<div class="columns pull-right search-select"><select></select></div>');
var addSearchGroup = function(col)
{
// 插入選項(xiàng)
var button ,input,select;
button = $button;input = $input;select = $select;////局部變量緩存全局變量 提高代碼性能
var selectDom = $select.find('select');////緩存dom節(jié)點(diǎn)查找結(jié)果 避免在循環(huán)里用
for(var i = 0; i < col.length; i++){
if(col[i].visible != false){
var $option = '<option value="'+col[i].field+'">'+col[i].title+'</option>';
selectDom.append($option);
}
}
//插入多選框、輸入框、按鈕
$('.fixed-table-toolbar').append(button,input,select);
}
/*
button = $button
*/
searchAction($button);
function searchAction(button){
//寫入上一次查詢的條件
if(searchValue.select != undefined){
$select.find('select').val(searchValue.select);
};
if(searchValue.input != undefined){
$input.find('input').val(searchValue.input);
};
//寫入查詢條件
// 獲取查詢選項(xiàng)
button.click(function(){
var option = $select.find('select').val();
var inputval = $input.find('input').val();
searchValue.select =option;
searchValue.inputval =inputval;
//定義刷新參數(shù)
if(inputval != ''){
var param = {
url: sWebRootPath+"/json/getAjaxData.jsp?v="+new Date().getTime(),
query: {
filters:[
{'colname':option,'filtertype':'LIKE','filtervalues':inputval}
]
}
}
}else{
var param = {
url: sWebRootPath+"/json/getAjaxData.jsp?v="+new Date().getTime(),
}
}
// 刷新表格
$('#tablelist').bootstrapTable('refresh',param);
});
}
總結(jié)
以上所述是小編給大家介紹的Bootstrap Table 搜索框和查詢功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JS跨域解決方案之使用CORS實(shí)現(xiàn)跨域
正常使用AJAX會需要正??紤]跨域問題,所以偉大的程序員們又折騰出了一系列跨域問題的解決方案,如JSONP、flash、ifame、xhr2等等。本文給大家介紹JS跨域解決方案之使用CORS實(shí)現(xiàn)跨域,感興趣的朋友參考下吧2016-04-04
JavaScript使用readAsDataURL讀取圖像文件
這篇文章主要為大家詳細(xì)介紹了JavaScript使用readAsDataURL讀取圖像文件的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05
詳解ES6 中的Object.assign()的用法實(shí)例代碼
這篇文章主要介紹了ES6 Object.assign()的用法及用途,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-01-01
JS中將圖片base64轉(zhuǎn)file文件的兩種方式
這篇文章主要介紹了JS中圖片base64轉(zhuǎn)file文件的兩種方式,實(shí)現(xiàn)把圖片的base64編碼轉(zhuǎn)成file文件的功能,然后再上傳至服務(wù)器,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02
javascript模擬git diff命令實(shí)現(xiàn)文本文件差異比較
這篇文章主要為大家詳細(xì)介紹了javascript如何模擬git diff命令實(shí)現(xiàn)文本文件差異比較效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考下2023-12-12
JavaScript的ES5實(shí)現(xiàn)繼承的4種常用方法小結(jié)
繼承是面向?qū)ο筌浖夹g(shù)當(dāng)中的一個概念,這篇文章主要為大家詳細(xì)介紹了JavaScript ES5實(shí)現(xiàn)繼承的4種常用方法,感興趣的小伙伴可以了解一下2024-03-03

