Bootstrap Table 搜索框和查詢(xún)功能
1..知識(shí)點(diǎn)bootstrapTable 刷新和查詢(xún)配置
2.提升js代碼性能
1.減少全局變量聲明
2.緩存dom節(jié)點(diǎn)查找結(jié)果
3.局部變量緩存全局變量
/** * @param col bootstrapTable列表生成配置對(duì)象 */ var searchValue ={};//查詢(xún)匹配對(duì)象 var $button = $('<div class="columns pull-right search-button"><button class="btn btn-default" type="button" name="refresh" title="查詢(xún)"><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){ //寫(xiě)入上一次查詢(xún)的條件 if(searchValue.select != undefined){ $select.find('select').val(searchValue.select); }; if(searchValue.input != undefined){ $input.find('input').val(searchValue.input); }; //寫(xiě)入查詢(xún)條件 // 獲取查詢(xún)選項(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 搜索框和查詢(xún)功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript中for與forEach分別如何跳出循環(huán)
forEach的優(yōu)勢(shì)一個(gè)是它的回調(diào)函數(shù)形成了一個(gè)作用域,它的curItem和i不會(huì)像for循環(huán)一樣污染全局變量,這篇文章主要給大家介紹了關(guān)于JavaScript中for與forEach分別如何跳出循環(huán)的相關(guān)資料,需要的朋友可以參考下2024-01-01妙用Bootstrap的 popover插件實(shí)現(xiàn)校驗(yàn)表單提示功能
最近使用bootstrap開(kāi)發(fā)項(xiàng)目比較多,在表單校驗(yàn)功能中用popover插件實(shí)現(xiàn)出錯(cuò)提示功能很方面,下面小編給大家?guī)?lái)了一篇關(guān)于Bootstrap的 popover插件實(shí)現(xiàn)校驗(yàn)表單提示功能的實(shí)現(xiàn)代碼,非常不錯(cuò),感興趣的朋友一起看看吧2016-08-08老生常談jacascript DOM節(jié)點(diǎn)獲取
下面小編就為大家?guī)?lái)一篇老生常談jacascript DOM節(jié)點(diǎn)獲取。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04變量聲明時(shí)命名與變量作為對(duì)象屬性時(shí)命名的區(qū)別解析
這篇文章主要介紹了變量聲明時(shí)命名與變量作為對(duì)象屬性時(shí)命名的區(qū)別。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12js中int和string數(shù)據(jù)類(lèi)型互相轉(zhuǎn)化實(shí)例
在本篇文章里小編給大家分享了關(guān)于js中int和string數(shù)據(jù)類(lèi)型互相轉(zhuǎn)化實(shí)例和代碼,需要的朋友們學(xué)習(xí)下。2019-01-01