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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
IE 下的只读 innerHTML
Aug 21 Javascript
javascript getElementsByTagName
Jan 31 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
javascript基本类型详解
Nov 28 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 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
php木马攻击防御之道
2008/03/24 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
新党员入党决心书
2015/09/22 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
volatile保证可见性及重排序方法
2022/08/05 Java/Android