我們想要在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'}}。
總結
以上所述是小編給大家介紹的Bootstrap table中toolbar新增條件查詢及refresh參數使用方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
