Bootstrap에서 테이블 검색 상자 및 쿼리를 구현하는 방법

이 글은 주로 부트스트랩 테이블 검색창과 쿼리 기능을 소개합니다. 매우 훌륭하고 참고할 만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있습니다.

1. 지식 포인트 부트스트랩 테이블 새로 고침 및 쿼리 구성

2.

1. 전역 변수 선언 줄이기

2. DOM 노드 검색 결과 캐시

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); 
    }); 
}

위 내용은 나중에 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

WeChat 미니 프로그램에서 슬라이더를 사용하여 데이터 값을 설정하는 방법

WeChat 미니 프로그램에서 팝업 하단 메뉴를 구현하는 방법

토스트 메시지 대화 상자를 사용하는 방법 WeChat 미니 프로그램

WeChat 미니 프로그램에서 로딩 애니메이션을 표시하기 위해 로딩 컴포넌트를 사용하는 방법

위 내용은 Bootstrap에서 테이블 검색 상자 및 쿼리를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!