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 相关文章推荐
jQuery前台数据获取实现代码
Mar 16 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
如何用javascript控制上传文件的大小
2006/10/26 Javascript
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
npm全局环境变量配置详解
2020/12/15 Javascript
python提取页面内url列表的方法
2015/05/25 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python扩展内置类型详解
2018/03/26 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
python对常见数据类型的遍历解析
2019/08/27 Python
Python版中国省市经纬度
2020/02/11 Python
基于python实现操作git过程代码解析
2020/07/27 Python
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
汽车驾驶求职信
2013/10/25 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
客户接待方案
2014/02/26 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
初中新生军训方案
2014/05/13 职场文书
工会工作先进事迹
2014/08/18 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
营业用房租赁协议书
2014/11/26 职场文书