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 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
如何快速上手Vuex
Feb 14 Javascript
js实现省市级联效果分享
Aug 10 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
基于JavaScript实现留言板功能
Mar 16 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实现图片简单上传
2006/10/09 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
用Python逐行分析文件方法
2019/01/28 Python
微信小程序python用户认证的实现
2019/07/29 Python
下载官网python并安装的步骤详解
2019/10/12 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
tensorflow 查看梯度方式
2020/02/04 Python
python如何求100以内的素数
2020/05/27 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
python3字符串输出常见面试题总结
2020/12/01 Python
中学家长会邀请函
2014/02/03 职场文书
小学生评语集锦
2014/04/18 职场文书
监察建议书格式
2014/05/19 职场文书
护士医德医风自我评价
2014/09/15 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
Python自动化测试PO模型封装过程详解
2021/06/22 Python
分享几种python 变量合并方法
2022/03/20 Python
MySQL查询日期时间
2022/05/15 MySQL