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对象在后台转化java对象的问题探讨

    前台js对象在后台转化java对象的问题探讨

    在开发项目中多次遇到前台js对象在后台转化java对象的问题,下面就为大家介绍下前台js对象转后台java对象,感兴趣的朋友可以了解下
    2013-12-12
  • JS跨域解决方案之使用CORS实现跨域

    JS跨域解决方案之使用CORS实现跨域

    正常使用AJAX会需要正常考虑跨域问题,所以伟大的程序员们又折腾出了一系列跨域问题的解决方案,如JSONP、flash、ifame、xhr2等等。本文给大家介绍JS跨域解决方案之使用CORS实现跨域,感兴趣的朋友参考下吧
    2016-04-04
  • JavaScript使用readAsDataURL读取图像文件

    JavaScript使用readAsDataURL读取图像文件

    这篇文章主要为大家详细介绍了JavaScript使用readAsDataURL读取图像文件的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 微信小程序实现聊天室

    微信小程序实现聊天室

    这篇文章主要为大家详细介绍了微信小程序实现聊天室,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 详解ES6 中的Object.assign()的用法实例代码

    详解ES6 中的Object.assign()的用法实例代码

    这篇文章主要介绍了ES6 Object.assign()的用法及用途,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • JS中将图片base64转file文件的两种方式

    JS中将图片base64转file文件的两种方式

    这篇文章主要介绍了JS中图片base64转file文件的两种方式,实现把图片的base64编码转成file文件的功能,然后再上传至服务器,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • javascript模拟git diff命令实现文本文件差异比较

    javascript模拟git diff命令实现文本文件差异比较

    这篇文章主要为大家详细介绍了javascript如何模拟git diff命令实现文本文件差异比较效果,文中的示例代码讲解详细,感兴趣的小伙伴可以参考下
    2023-12-12
  • JavaScript的ES5实现继承的4种常用方法小结

    JavaScript的ES5实现继承的4种常用方法小结

    继承是面向对象软件技术当中的一个概念,这篇文章主要为大家详细介绍了JavaScript ES5实现继承的4种常用方法,感兴趣的小伙伴可以了解一下
    2024-03-03
  • JS获取IMG图片高宽的简单实例

    JS获取IMG图片高宽的简单实例

    下面小编就为大家带来一篇JS获取IMG图片高宽的简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 判断ie的两种简单方法

    判断ie的两种简单方法

    判断ie想必大家都会写吧,如何将判断条件变得简单呢,也许大家并不是很清楚,感兴趣的大家可以参考下本文,或许会有所收获
    2013-08-08

最新评论