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

我们想要在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'}}。

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