Bootstrap Table 搜索框和查询功能

 更新时间:2017年11月30日 11:33:27   作者:Alan_阿兰  
这篇文章主要介绍了Bootstrap Table 搜索框和查询功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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 搜索框和查询功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)

    利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)

    我们开发的人来说经常要加个判断,要不可能某些功能没法正常使用。要是没加个判断就会给大家带来些麻烦
    2013-11-11
  • Bootstrap布局之栅格系统详解

    Bootstrap布局之栅格系统详解

    这篇文章主要为大家详细介绍了Bootstrap布局之栅格系统,小编对Bootstrap栅格系统(布局)也很陌生,特分享整理这篇文章,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • JS脚本实现定时到网站上签到/签退功能

    JS脚本实现定时到网站上签到/签退功能

    这篇文章主要介绍了JS脚本实现定时到网站上签到/签退功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 显示/隐藏侧边栏

    显示/隐藏侧边栏

    显示/隐藏侧边栏...
    2006-10-10
  • 2019 年编写现代 JavaScript 代码的5个小技巧(小结)

    2019 年编写现代 JavaScript 代码的5个小技巧(小结)

    这篇文章主要介绍了2019 年编写现代 JavaScript 代码的5个小技巧,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • JavaScript实现MD5加密的六种方式实例

    JavaScript实现MD5加密的六种方式实例

    这篇文章主要给大家介绍了关于JavaScript实现MD5加密的六种方式,在JS中可以实现MD5加密算法,可以使用第三方库或者自己编写代码实现,需要的朋友可以参考下
    2023-09-09
  • Javascript中的apply()方法浅析

    Javascript中的apply()方法浅析

    这篇文章主要介绍了Javascript中的apply()方法浅析,本文讲解了apply vs call、Javascript apply 方法等内容,需要的朋友可以参考下
    2015-03-03
  • 浅析javascript中的DOM

    浅析javascript中的DOM

    本文主要给大家简单介绍了是什么是DOM、动态操作DOM元素的方法、使用jsjs操作样式以及Form对象的简介,是个人对于javascript中的DOM的理解的总结,推荐给小伙伴们。
    2015-03-03
  • JavaScript给按钮绑定点击事件(onclick)的方法

    JavaScript给按钮绑定点击事件(onclick)的方法

    这篇文章主要介绍了JavaScript给按钮绑定点击事件(onclick)的方法,涉及javascript绑定onclick的基本技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 分享10个原生JavaScript技巧

    分享10个原生JavaScript技巧

    本文给大家分享的是个人总结的10条非常常用的原生javascript的小技巧,都是平时项目中用到的,这里总结记录下来,有需要的小伙伴可以参考下。
    2015-04-04

最新评论