這篇文章將為大家詳細講解有關(guān)如何使用bootstrap-table插件來實現(xiàn)查詢功能,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)是一家專業(yè)提供固鎮(zhèn)企業(yè)網(wǎng)站建設,專注與網(wǎng)站制作、成都網(wǎng)站制作、H5頁面制作、小程序制作等業(yè)務。10年已為固鎮(zhèn)眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設公司優(yōu)惠進行中。實現(xiàn)查詢思路:
1.定義一個局左的Toolbar包含 新建、保存和新建的按鈕
2.定義一個局右的QueryForm 包含查詢條件 和 查詢清除按鈕
3.定義一個Table
實現(xiàn)如下:
' type="text" style="float:left;width:150px;margin-right:5px;" v-model="lookupType" class="form-control">' type="text" style="float:left;width:150px;margin-right:5px;" v-model="description" class="form-control">
查詢函數(shù)實現(xiàn)
實現(xiàn)思路:獲取查詢塊中所有的對象,動態(tài)存放在查詢返回的參數(shù)中
需要注意:
當查詢沒有值的之后,不能放入到查詢參數(shù)中,否則會把數(shù)據(jù)當做空來查詢,從而導致無法查詢到數(shù)據(jù)
function queryParams(params) { var param = {}; $('#query-form').find('[name]').each(function () { var value = $(this).val(); if (value != '') { param[$(this).attr('name')] = value; } }); param['pageSize'] = params.limit; //頁面大小 param['pageNumber'] = params.offset; //頁碼 return param;}function customSearch(text) { $table.bootstrapTable('refresh');//刷新Table,Bootstrap Table 會自動執(zhí)行重新查詢}
重置函數(shù)的實現(xiàn)
實現(xiàn)思路:循環(huán)獲取query-form的控件,并把其值置空
function resetSearch() { $('#query-form').find('[name]').each(function () { $(this).val(''); });}
關(guān)于“如何使用bootstrap-table插件來實現(xiàn)查詢功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。