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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 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
浅析PHP水印技术
2007/02/14 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
js实现表格字段排序
2014/02/19 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
js实现一键复制功能
2017/03/16 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
Python中%r和%s的详解及区别
2017/03/16 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
Python随机数函数代码实例解析
2020/02/09 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
Python实现一个论文下载器的过程
2021/01/18 Python
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
应届生如何写自荐信
2014/01/05 职场文书
中年人生感言
2014/02/04 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
防卫过当辩护词
2015/05/21 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers