当前位置：首页 > news >正文

bootstrap-table 怎么自定义搜索按钮实现点击按钮进行查询

news 来源：原创 2024/5/20 22:37:26

bootstrap-table自带搜索框感觉有点丑，我们可以把搜索功能单独拉出来放到页面的某一个位置。

首先我们看一下官方演示：

如果你感觉集成的检索框不太好看，而且我们也不想让搜索框和列表放到一块去。那我们怎么来自定义一个属于自己的搜索框吧！
首先我们看看这段代码：
BootstrapTable.prototype.resetSearch = function (text) {
var $search = this.$toolbar.find('.search input');
$search.val(text || '');
this.onSearch({currentTarget: $search});
};
如果在表格toolbar里面是没问题的，因为它找到 search样式下面的一个输入框。
因为我们自己定义的肯定是没有这些属性的，也会找不到这个搜索class.

我们改成：
BootstrapTable.prototype.loadAddSearch = function (text) {
this.onCustomizeSearch(text);
};

我们直接在这个加载搜索条件的方法中加入需要查询的内容即可：

接着我们继续找到自带的搜索事件：
BootstrapTable.prototype.onSearch = function (event) {
var text = $.trim($(event.currentTarget).val());

// trim search input
if (this.options.trimOnSearch && $(event.currentTarget).val() !== text) {
$(event.currentTarget).val(text);
}

if (text === this.searchText) {
return;
}
this.searchText = text;
this.options.searchText = text;

this.options.pageNumber = 1;
this.initSearch();
this.updatePagination();
this.trigger('search', text);
};

我们把它改一下

BootstrapTable.prototype.onCustomizeSearch = function (text) {
this.searchText = text;
this.options.searchText = text;
this.options.pageNumber = 1;
this.initSearch();
this.updatePagination();
this.trigger('search', text);
};

然后我们在bootstrap默认方法中添加一下方法：
// BOOTSTRAP TABLE PLUGIN DEFINITION
// =======================

var allowedMethods = [
'getOptions',
'getSelections', 'getAllSelections', 'getData',
'load', 'append', 'prepend', 'remove', 'removeAll',
'insertRow', 'updateRow', 'updateCell', 'updateByUniqueId', 'removeByUniqueId',
'getRowByUniqueId', 'showRow', 'hideRow', 'getHiddenRows',
'mergeCells',
'checkAll', 'uncheckAll', 'checkInvert',
'check', 'uncheck',
'checkBy', 'uncheckBy',
'refresh',
'resetView',
'resetWidth',
'destroy',
'showLoading', 'hideLoading',
'showColumn', 'hideColumn', 'getHiddenColumns', 'getVisibleColumns',
'showAllColumns', 'hideAllColumns',
'filterBy',
'scrollTo',
'getScrollPosition',
'selectPage', 'prevPage', 'nextPage',
'togglePagination',
'toggleView',
'refreshOptions',
'loadAddSearch',
'resetSearch',
'expandRow', 'collapseRow', 'expandAllRows', 'collapseAllRows',
'updateFormatText'
];

然后保存文件即可

前端页面javascript
$(function () {
//查询搜索

$('#btnSearch').on('click', function () {
var keyvalue = $("#search-input").val();
$table.bootstrapTable("loadAddSearch", keyvalue);
});

});

页面文本框和按钮：
<input type="text" class="form-control" id="search-input" placeholder="检索 ..." style="height: 30px; margin-top: 20px; margin-left: 1px" size="40" />

最终在页面上展示：

参考地址：

Bootstrap中文网：http://www.bootcss.com/
Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html
Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
Bootstrap Table源码：https://github.com/wenzhixin/bootstrap-table
Bootstrap DataPicker：http://www.bootcss.com/p/bootstrap-datetimepicker/
Boostrap Table 扩展API：http://bootstrap-table.wenzhixin.net.cn/extensions/

转载于:https://www.cnblogs.com/angelasp/p/bootstrap-table.html