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 相关文章推荐
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
javascript 计算两个整数的百分比值
Dec 26 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
Openlayers实现地图全屏显示
Sep 28 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 switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
详解Python3中yield生成器的用法
2015/08/20 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
Python Selenium参数配置方法解析
2020/01/19 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
品恩科技软件测试面试题
2014/10/26 面试题
社区健康教育实施方案
2014/03/18 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js