Explication détaillée du champ de recherche et de la fonction de requête de la table Bootstrap

Cet article présente principalement le champ de recherche et la fonction de requête Bootstrap Table. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Points de connaissance Actualisation de bootstrapTable et configuration des requêtes

2. Améliorer les performances du code js

1. Réduire les déclarations de variables globales

2. résultats de la recherche

3. Les variables locales mettent en cache les variables globales

/** 
 * @param col bootstrapTable列表生成配置对象 
 */ 
var searchValue ={};//查询匹配对象 
var $button = $('<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>'); 
var $input = $('<p class="columns pull-right search-input"><input class="form-control" type="text" placeholder="搜索"></p>'); 
var $select = $('<p class="columns pull-right search-select"><select></select></p>'); 
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 = &#39;<option value="&#39;+col[i].field+&#39;">'+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); 
    }); 
}

Recommandations associées :

Explication détaillée de la façon dont PHP implémente une fonction d'invite automatique de champ de recherche simple

jquery implémente un champ de recherche similaire à Baidu

HTML implémente un champ de recherche translucide flottant fixe mobile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!