Bootstrap table中toolbar新增条件查询及refresh参数使用方法


Posted in Javascript onMay 18, 2018

我们想要在bootstrap-table中自定义查询条件如何实现呢?这些自定义的按钮、输入框是定义在哪个位置呢?还记得上一节中我们在配置中有这样一个属性:

//工具按钮用哪个容器
  toolbar: '#toolbar', 
<div id="toolbar"></div>

我们定义的查询条件就是放入到这个div中的,先看一下我们期望的效果:

Bootstrap table中toolbar新增条件查询及refresh参数使用方法

要实现这样的效果,我们首先要新增查询表单:

<div class="container">
 <div class="row">
  <div class="table-responsive">
   <div id="toolbar">
    <form class="form-inline">
     <div class="form-group">
     <label class="sr-only" for="product_line">产品线</label>
     <div class="input-group">
      <div class="input-group-addon">产品线</div>
      <select class="form-control" name="product_line" id="productLine">
       <option value="">请选择产品线...</option>
      </select>
     </div>
     </div>
     <div class="form-group">
     <label class="sr-only" for="msg_type">消息类型</label>
     <div class="input-group">
      <div class="input-group-addon">消息类型</div>
      <select class="form-control" name="msg_type" id="msgType">
       <option value="">请选择消息类型...</option>
      </select>
     </div>
     </div>
     <div class="form-group">
     <label class="sr-only" for="msg_type">消息类型</label>
     <div class="input-group">
      <div class="input-group-addon">消息类型</div>
      <input type="text" class="form-control" name="searchTexts" id="searchText" placeholder="请输入消息名称或内容关键字...">
     </div>
     </div>
     <button type="button" class="btn btn-primary queryButton">查询</button>
    </form>
   </div>
   <table id="table" ></table>
  </div>
 </div>
</div>

在请求服务器中传递的参数中获取对应的值:

//请求服务器数据
  queryParams: function queryParams(params){
   var param = { 
     pageNumber: params.pageNumber, 
     pageSize: params.pageSize,
     sortName: params.sortName,
     sortOrder: params.sortOrder,
     searchText: $("#searchText").val(),
     msgType: $("#msgType").val(),
     productLine: $("#productLine").val()
    }; 
    return param; 
  }

最后是提交到服务端:

//查询
 $(document).on('click', ".queryButton",function(){
   $('#table').bootstrapTable('refresh');
 });

这个refresh官方文档是这样描述的:

刷新远程服务器数据,可以设置{silent: true}以静默方式刷新数据,并设置{url: newUrl}更改URL。

要提供特定于此请求的查询参数,请设置{query: {foo: 'bar'}}。

总结

以上所述是小编给大家介绍的Bootstrap table中toolbar新增条件查询及refresh参数使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
js图片自动切换效果处理代码
May 07 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
iview table高度动态设置方法
Mar 14 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
JavaScript点击按钮生成4位随机验证码
Jan 28 Javascript
webpack4 css打包压缩问题的解决
May 18 #Javascript
微信小程序实现长按删除图片的示例
May 18 #Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 #Javascript
Vue数据双向绑定原理及简单实现方法
May 18 #Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 #Javascript
Vue中对比scoped css和css module的区别
May 17 #Javascript
vue引用js文件的多种方式(推荐)
May 17 #Javascript
You might like
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php中apc缓存使用示例
2013/12/25 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
PDO::errorCode讲解
2019/01/28 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
javascript 树形导航菜单实例代码
2013/08/13 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
如何基于python实现归一化处理
2020/01/20 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android