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高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
基于axios 的responseType类型的设置方法
Oct 29 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 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
编译问题
2006/10/09 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
简单实现python收发邮件功能
2018/01/05 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
python将数组n等分的实例
2019/12/02 Python
Django ORM filter() 的运用详解
2020/05/14 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
有针对性的求职自荐信
2013/11/14 职场文书
会议活动邀请函
2014/01/27 职场文书
求职信范文大全
2014/05/26 职场文书
通信工程专业求职信
2014/06/04 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python
Elasticsearch 数据类型及管理
2022/04/19 Python
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers