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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yaomingyang/article/details/80346678

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

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

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

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

<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'}}。

这就是一个简单的新增查询条件的过程,有不足之处请指出。

阅读更多

扫码向博主提问

随风yy

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • java
  • mongodb
  • play
去开通我的Chat快问
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页