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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
js实现简易点击切换显示或隐藏
Nov 29 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 5.0对象模型深度探索之对象复制
2008/03/27 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
php导出生成word的方法
2015/12/25 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
Django admin美化插件suit使用示例
2017/12/12 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
python中正则表达式与模式匹配
2019/05/07 Python
python绘制动态曲线教程
2020/02/24 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
.NET概念性的面试题
2012/02/29 面试题
销售总监岗位职责
2014/01/04 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
个人安全承诺书
2014/05/22 职场文书
班级出游活动计划书
2014/08/15 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js