So implementieren Sie das Tabellensuchfeld und die Abfrage in Bootstrap

Dieser Artikel stellt hauptsächlich das Bootstrap-Tabellen-Suchfeld und die Abfragefunktion vor. Es ist sehr gut und hat Referenzwert.

Wissenspunkte BootstrapTable-Aktualisierung und Abfragekonfiguration

2. Verbessern Sie die Leistung des JS-Codes

2. Reduzieren Sie die Suchergebnisse für Dom-Knoten

3

/** 
 * @param col bootstrapTable列表生成配置对象 
 */ 
var searchValue ={};//查询匹配对象 
var $button = $(&#39;<p 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></p>&#39;); 
var $input = $(&#39;<p class="columns pull-right search-input"><input class="form-control" type="text" placeholder="搜索"></p>&#39;); 
var $select = $(&#39;<p class="columns pull-right search-select"><select></select></p>&#39;); 
var addSearchGroup = function(col) 
{ 
   // 插入选项 
   var button ,input,select; 
   button = $button;input = $input;select = $select;////局部变量缓存全局变量 提高代码性能 
   var selectDom = $select.find(&#39;select&#39;);////缓存dom节点查找结果 避免在循环里用 
   for(var i = 0; i < col.length; i++){ 
     if(col[i].visible != false){ 
       var $option = &#39;<option value="&#39;+col[i].field+&#39;">&#39;+col[i].title+&#39;</option>&#39;; 
       selectDom.append($option); 
     } 
   } 
   //插入多选框、输入框、按钮 
   $(&#39;.fixed-table-toolbar&#39;).append(button,input,select); 
} 
/* 
button = $button 
*/ 
searchAction($button); 
function searchAction(button){ 
  //写入上一次查询的条件 
   if(searchValue.select != undefined){ 
     $select.find(&#39;select&#39;).val(searchValue.select); 
   }; 
   if(searchValue.input != undefined){ 
     $input.find(&#39;input&#39;).val(searchValue.input); 
   }; 
   //写入查询条件 
   // 获取查询选项 
   button.click(function(){ 
      var option = $select.find(&#39;select&#39;).val(); 
      var inputval = $input.find(&#39;input&#39;).val(); 
      searchValue.select =option; 
      searchValue.inputval =inputval; 
   //定义刷新参数 
     if(inputval != &#39;&#39;){ 
       var param = { 
         url: sWebRootPath+"/json/getAjaxData.jsp?v="+new Date().getTime(), 
         query: { 
           filters:[ 
             {&#39;colname&#39;:option,&#39;filtertype&#39;:&#39;LIKE&#39;,&#39;filtervalues&#39;:inputval} 
           ] 
         } 
       } 
     }else{ 
       var param = { 
        url: sWebRootPath+"/json/getAjaxData.jsp?v="+new Date().getTime(), 
       } 
     } 
      // 刷新表格 
    $(&#39;#tablelist&#39;).bootstrapTable(&#39;refresh&#39;,param); 
    }); 
}

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So verwenden Sie den Schieberegler, um Datenwerte im WeChat-Miniprogramm festzulegen

So implementieren Sie Pop-ups unten im WeChat-Miniprogramm-Menü

So verwenden Sie das Toastnachrichten-Dialogfeld im WeChat-Miniprogramm

So verwenden Sie die Ladekomponente, um die Ladeanimation anzuzeigen im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Tabellensuchfeld und die Abfrage in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!