Bootstrap Table 搜索框和查詢功能
更新時間:2017年11月30日 11:33:27 作者:Alan_阿蘭
這篇文章主要介紹了Bootstrap Table 搜索框和查詢功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
1..知識點bootstrapTable 刷新和查詢配置
2.提升js代碼性能
1.減少全局變量聲明
2.緩存dom節(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)
{
// 插入選項
var button ,input,select;
button = $button;input = $input;select = $select;////局部變量緩存全局變量 提高代碼性能
var selectDom = $select.find('select');////緩存dom節(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);
};
//寫入查詢條件
// 獲取查詢選項
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);
});
}
總結
以上所述是小編給大家介紹的Bootstrap Table 搜索框和查詢功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
JavaScript使用readAsDataURL讀取圖像文件
這篇文章主要為大家詳細介紹了JavaScript使用readAsDataURL讀取圖像文件的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05
詳解ES6 中的Object.assign()的用法實例代碼
這篇文章主要介紹了ES6 Object.assign()的用法及用途,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-01-01
javascript模擬git diff命令實現(xiàn)文本文件差異比較
這篇文章主要為大家詳細介紹了javascript如何模擬git diff命令實現(xiàn)文本文件差異比較效果,文中的示例代碼講解詳細,感興趣的小伙伴可以參考下2023-12-12
JavaScript的ES5實現(xiàn)繼承的4種常用方法小結
繼承是面向對象軟件技術當中的一個概念,這篇文章主要為大家詳細介紹了JavaScript ES5實現(xiàn)繼承的4種常用方法,感興趣的小伙伴可以了解一下2024-03-03

