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 不间断的图片滚动并可点击
Jan 15 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
javascript实现复选框选中属性
Mar 25 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
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
第二节 对象模型 [2]
2006/10/09 PHP
php中用文本文件做数据库的实现方法
2008/03/27 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
PHP7 windows支持
2021/03/09 PHP
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
python操作gmail实例
2015/01/14 Python
Python判断Abundant Number的方法
2015/06/15 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
html5绘制时钟动画
2014/12/15 HTML / CSS
教师专业理论水平的自我评价分享
2013/11/09 职场文书
最新创业融资计划书
2014/01/19 职场文书
求职信怎么写范文
2014/05/26 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
先进学校事迹材料
2014/12/30 职场文书
妈妈别哭观后感
2015/06/08 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
springboot读取nacos配置文件
2022/05/20 Java/Android
分享几个实用的CSS代码块
2022/06/10 HTML / CSS