1..知識點bootstrapTable 刷新和查詢配置
2.提升js代碼性能
1.減少全局變量聲明
2.緩存dom節點查找結果
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節點查找結果 避免在循環里用 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; //定義刷新參數 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 搜索框和查詢功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com