首页 web前端 Bootstrap教程 Bootstrap table中toolbar新增条件查询及refresh参数使用方法

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

Aug 20, 2019 pm 04:42 PM

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

  这篇文章主要介绍了Bootstrap table中toolbar新增条件查询及refresh参数使用方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下。

推荐教程:Bootstrap图文教程

  我们想要在bootstrap-table中自定义查询条件如何实现呢?这些自定义的按钮、输入框是定义在哪个位置呢?

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

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

bootstrap81.jpg

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

<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(&#39;click&#39;, ".queryButton",function(){
   $(&#39;#table&#39;).bootstrapTable(&#39;refresh&#39;);
 });
登录后复制

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

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

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

总结

  以上所述是小编给大家介绍的Bootstrap table中toolbar新增条件查询及refresh参数使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。

以上是Bootstrap table中toolbar新增条件查询及refresh参数使用方法的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何使用最新的Bootstrap版本和更新保持最新状态? 如何使用最新的Bootstrap版本和更新保持最新状态? Mar 14, 2025 pm 07:40 PM

本文讨论了保持自举新版本,访问官方文档,最佳集成实践以及社区资源讨论的策略。

Bootstrap框架(网格系统,版式,组件,实用程序)的关键组成部分是什么? Bootstrap框架(网格系统,版式,组件,实用程序)的关键组成部分是什么? Mar 14, 2025 pm 07:42 PM

文章讨论了关键的引导组件:网格系统,版式,组件和实用程序。专注于增强响应式设计和交互式UI创建。

如何在不修改核心框架文件的情况下覆盖Bootstrap的样式? 如何在不修改核心框架文件的情况下覆盖Bootstrap的样式? Mar 14, 2025 pm 07:44 PM

本文讨论了使用自定义CSS覆盖Bootstrap样式的方法,专注于创建单独的文件,使用特定性和组织的最佳实践。

如何自定义Bootstrap组件的外观和行为? 如何自定义Bootstrap组件的外观和行为? Mar 18, 2025 pm 01:06 PM

文章讨论了使用CSS变量,SASS,自定义CSS,JavaScript和组件修改的自定义Bootstrap的外观和行为。它还涵盖了修改样式和确保跨设备响应能力的最佳实践。

如何使用Bootstrap的网格系统为不同的屏幕尺寸创建响应式布局? 如何使用Bootstrap的网格系统为不同的屏幕尺寸创建响应式布局? Mar 14, 2025 pm 07:43 PM

文章讨论了使用Bootstrap的网格系统进行跨设备的响应布局,详细的结构,自定义和测试工具。

在哪里可以找到自举模板和主题? 在哪里可以找到自举模板和主题? Mar 14, 2025 pm 07:39 PM

本文讨论了自由和高级的引导模板和主题的来源。它涵盖了自定义,并列出了知名的下载网站。

我如何为引导社区做出贡献? 我如何为引导社区做出贡献? Mar 14, 2025 pm 07:38 PM

本文概述了为引导程序做出贡献的方法,包括代码提交,文档改进,错误报告和社区参与。它提供了提交拉的请求和报告问题的详细步骤。

Bootstrap图片居中可以用inline-block吗 Bootstrap图片居中可以用inline-block吗 Mar 04, 2025 pm 03:06 PM

本文探讨了将内联块用于引导程序内的图像的有效性。 它认为,尽管在技术上可行,但由于实现响应迅速的垂直中心和维护的复杂性,这种方法是不切实际的

See all articles