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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
完整显示当前日期和时间的JS代码
Sep 17 Javascript
Javascript 写的简单进度条控件
Jan 22 Javascript
js+css在交互上的应用
Jul 18 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
jquery插件格式实例分析
Jun 16 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
详解Node.js串行化流程控制
May 04 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
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
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
php google或baidu分页代码
2009/11/26 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
PHP实现验证码校验功能
2017/11/16 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
js实现表格字段排序
2014/02/19 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Python深入学习之上下文管理器
2014/08/31 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
垃圾回收的优点和原理
2014/05/16 面试题
学前教育专业毕业生自荐信
2013/10/03 职场文书
通信工程毕业生求职信
2013/11/16 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
小学班级口号大全
2015/12/25 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL