Bootstrap Table 搜索框和查詢功能
更新時間:2017年11月30日 11:33:27 作者:Alan_阿蘭
這篇文章主要介紹了Bootstrap Table 搜索框和查詢功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
1..知識點bootstrapTable 刷新和查詢配置
2.提升js代碼性能
1.減少全局變量聲明
2.緩存dom節(jié)點查找結(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é)點查找結(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); }); }
總結(jié)
以上所述是小編給大家介紹的Bootstrap Table 搜索框和查詢功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript中for與forEach分別如何跳出循環(huán)
forEach的優(yōu)勢一個是它的回調(diào)函數(shù)形成了一個作用域,它的curItem和i不會像for循環(huán)一樣污染全局變量,這篇文章主要給大家介紹了關(guān)于JavaScript中for與forEach分別如何跳出循環(huán)的相關(guān)資料,需要的朋友可以參考下2024-01-01妙用Bootstrap的 popover插件實現(xiàn)校驗表單提示功能
最近使用bootstrap開發(fā)項目比較多,在表單校驗功能中用popover插件實現(xiàn)出錯提示功能很方面,下面小編給大家?guī)砹艘黄P(guān)于Bootstrap的 popover插件實現(xiàn)校驗表單提示功能的實現(xiàn)代碼,非常不錯,感興趣的朋友一起看看吧2016-08-08js中int和string數(shù)據(jù)類型互相轉(zhuǎn)化實例
在本篇文章里小編給大家分享了關(guān)于js中int和string數(shù)據(jù)類型互相轉(zhuǎn)化實例和代碼,需要的朋友們學(xué)習(xí)下。2019-01-01