Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法
我們想要在bootstrap-table中自定義查詢條件如何實現(xiàn)呢?這些自定義的按鈕、輸入框是定義在哪個位置呢?還記得上一節(jié)中我們在配置中有這樣一個屬性:
//工具按鈕用哪個容器 toolbar: '#toolbar', <div id="toolbar"></div>
我們定義的查詢條件就是放入到這個div中的,先看一下我們期望的效果:

要實現(xiàn)這樣的效果,我們首先要新增查詢表單:
<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">產(chǎn)品線</label>
<div class="input-group">
<div class="input-group-addon">產(chǎn)品線</div>
<select class="form-control" name="product_line" id="productLine">
<option value="">請選擇產(chǎn)品線...</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="請輸入消息名稱或內(nèi)容關(guān)鍵字...">
</div>
</div>
<button type="button" class="btn btn-primary queryButton">查詢</button>
</form>
</div>
<table id="table" ></table>
</div>
</div>
</div>
在請求服務(wù)器中傳遞的參數(shù)中獲取對應(yīng)的值:
//請求服務(wù)器數(shù)據(jù)
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;
}
最后是提交到服務(wù)端:
//查詢
$(document).on('click', ".queryButton",function(){
$('#table').bootstrapTable('refresh');
});
這個refresh官方文檔是這樣描述的:
刷新遠(yuǎn)程服務(wù)器數(shù)據(jù),可以設(shè)置{silent: true}以靜默方式刷新數(shù)據(jù),并設(shè)置{url: newUrl}更改URL。
要提供特定于此請求的查詢參數(shù),請設(shè)置{query: {foo: 'bar'}}。
總結(jié)
以上所述是小編給大家介紹的Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
基于jquery animate操作css樣式屬性小結(jié)
昨天突然有網(wǎng)友問我animate()方法可以來操作所有css屬性嗎?是的,我告訴他可以的。不過,在此有需要注意點需要大家搞清楚。接下來通過本篇文章給大家介紹基于jquery animate操作css樣式屬性小結(jié),對jquery animate css相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-11-11
jquery text(),val(),html()方法區(qū)別總結(jié)
jquery text(),val(),html()方法區(qū)別總結(jié)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11
web開發(fā)人員學(xué)習(xí)jQuery的6大理由及jQuery的優(yōu)勢介紹
jQuery是一個用來簡化HTML客戶端開發(fā)的JS(JavaScrip)庫,它支持HTML DOM處理,同時還融合了部分HTML和CSS2013-01-01
jquery獲取并修改觸發(fā)事件的DOM元素示例【基于target 屬性】
這篇文章主要介紹了jquery獲取并修改觸發(fā)事件的DOM元素,結(jié)合實例形式分析了jQuery基于target 屬性獲取到觸發(fā)該事件的dom并修改的相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
jQuery jqgrid 對含特殊字符json 數(shù)據(jù)的 Java 處理方法
在網(wǎng)頁上使用 json 數(shù)據(jù),如果數(shù)據(jù)中含有特殊字符,會比較麻煩。2011-01-01
jQuery實現(xiàn)form表單基于ajax無刷新提交方法實例代碼
在本篇文章里小編給大家整理了關(guān)于jQuery實現(xiàn)form表單基于ajax無刷新提交方法實例代碼,需要的朋友們參考下。2019-11-11

