Bootstrap Table 搜索框和查询功能


Posted in Javascript onNovember 30, 2017

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

Javascript 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
Jquery性能优化详解
May 15 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 #Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 #Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 #Javascript
微信小程序支付及退款流程详解
Nov 30 #Javascript
windows下更新npm和node的方法
Nov 30 #Javascript
实例教学如何写vue插件
Nov 30 #Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 #Javascript
You might like
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
python自动裁剪图像代码分享
2017/11/25 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
python循环输出三角形图案的例子
2019/11/22 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Python实现自动访问网页的例子
2020/02/21 Python
python实现数字炸弹游戏
2020/07/17 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
毕业自荐信
2013/12/16 职场文书
创业计划书模版
2014/02/05 职场文书
安全生产管理责任书
2014/04/16 职场文书
施工安全生产承诺书
2014/05/23 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
药品开票员岗位职责
2015/04/15 职场文书
上下班时间调整通知
2015/04/23 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书