bootstrap table 前端搜索 - 南开小巷
bootstrap table 前端搜索
1.bootstrap-table对于前端的搜索可以通过官网设置，但发现前端搜索出现bug，网上找到一个bootstrap-table的扩充js bootstrap-table-mytoolbar.js，可以通过结合bootstrap-table简单的配置就可以进行使用，结合实例说明：
bootstrap-table的扩充js内容:
1 /**
2 * @author: aperez <aperez@datadec.es>
3 * @version: v2.0.0
4 *
5 * @update Dennis Hernández <http://djhvscf.github.io/Blog>
6 */
7
8 !function($) {
9 \'use strict\';
10
11 var firstLoad = false;
12
13 var sprintf = $.fn.bootstrapTable.utils.sprintf;
14
15 var showAvdSearch = function(that) {
16 var timeoutId=0;
17 $(\'#\'+ that.options.idTable).off(\'keyup blur\', \'input\').on(\'keyup blur\', \'input\', function (event) {
18 clearTimeout(timeoutId);
19 timeoutId = setTimeout(function () {
20 that.onColumnAdvancedSearch(event);
21 }, that.options.searchTimeOut);
22 });
23 };
24
25 $.extend($.fn.bootstrapTable.defaults, {
26 advancedSearch: false,
27 actionForm: \'\',
28 idTable: undefined,
29 onColumnAdvancedSearch: function (field, text) {
30 return false;
31 }
32 });
33
34 $.extend($.fn.bootstrapTable.defaults.icons, {
35 advancedSearchIcon: \'glyphicon-chevron-down\'
36 });
37
38 $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
39 \'column-advanced-search.bs.table\': \'onColumnAdvancedSearch\'
40 });
41
42 $.extend($.fn.bootstrapTable.locales, {
43 formatAdvancedSearch: function() {
44 return \'Advanced search\';
45 },
46 formatAdvancedCloseButton: function() {
47 return "Close";
48 }
49 });
50
51 $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);
52
53 var BootstrapTable = $.fn.bootstrapTable.Constructor,
54 _initToolbar = BootstrapTable.prototype.initToolbar,
55 _load = BootstrapTable.prototype.load,
56 _initSearch = BootstrapTable.prototype.initSearch;
57
58 BootstrapTable.prototype.initToolbar = function() {
59 _initToolbar.apply(this, Array.prototype.slice.apply(arguments));
60
61 /*if (!this.options.search) {
62 return;
63 }*/
64
65 if (!this.options.advancedSearch) {
66 return;
67 }
68
69 if (!this.options.idTable) {
70 return;
71 }
72
73 var that = this;
74 showAvdSearch(that);
75 };
76
77 BootstrapTable.prototype.load = function(data) {
78 _load.apply(this, Array.prototype.slice.apply(arguments));
79
80 if (!this.options.advancedSearch) {
81 return;
82 }
83
84 if (typeof this.options.idTable === \'undefined\') {
85 return;
86 } else {
87 if (!firstLoad) {
88 var height = parseInt($(".bootstrap-table").height());
89 height += 10;
90 $("#" + this.options.idTable).bootstrapTable("resetView", {height: height});
91 firstLoad = true;
92 }
93 }
94 };
95
96 BootstrapTable.prototype.initSearch = function () {
97 _initSearch.apply(this, Array.prototype.slice.apply(arguments));
98
99 if (!this.options.advancedSearch) {
100 return;
101 }
102
103 var that = this;
104 var fp = $.isEmptyObject(this.filterColumnsPartial) ? null : this.filterColumnsPartial;
105
106 this.data = fp ? $.grep(this.data, function (item, i) {
107 for (var key in fp) {
108 var fval = fp[key].toLowerCase();
109 var value = item[key];
110 value = $.fn.bootstrapTable.utils.calculateObjectValue(that.header,
111 that.header.formatters[$.inArray(key, that.header.fields)],
112 [value, item, i], value);
113
114 if (!($.inArray(key, that.header.fields) !== -1 &&
115 (typeof value === \'string\' || typeof value === \'number\') &&
116 (value + \'\').toLowerCase().indexOf(fval) !== -1)) {
117 return false;
118 }
119 }
120 return true;
121 }) : this.data;
122 };
123
124 BootstrapTable.prototype.onColumnAdvancedSearch = function (event) {
125 var text = $.trim($(event.currentTarget).val());
126 var $field = $(event.currentTarget)[0].id;
127
128 if ($.isEmptyObject(this.filterColumnsPartial)) {
129 this.filterColumnsPartial = {};
130 }
131 if (text) {
132 this.filterColumnsPartial[$field] = text;
133 } else {
134 delete this.filterColumnsPartial[$field];
135 }
136
137 this.options.pageNumber = 1;
138 this.onSearch(event);
139 this.updatePagination();
140 this.trigger(\'column-advanced-search\', $field, text);
141 };
142
143 }(jQuery);配置bootstrap-table的js文件:
1 $("#listTable").bootstrapTable({
2 columns:[
3 {
4 title: \'序号\',
5 align: \'center\',
6 valign: \'bottom\',
7 //field : \'id\',
8 formatter:function(value,row,index){
9 return index+1;
10 }
11 },{
12 title: \'客户ID\',
13 align: \'center\',
14 field: \'orgId\',
15 visible: false
16 },{
17 title : \'客户名称\',
18 align : \'center\',
19 field : \'orgName\',
20 searchable : true
21 },{
22 title : \'户号\',
23 align : \'center\',
24 field : \'account_num\'
25 },{
26 title : \'月份\',
27 align : \'center\',
28 field : \'ele_date\'
29
30 },{
31 title : \'用电量需求（单位：兆瓦时）\',
32 align : \'center\',
33 field : \'ele_need_mount\'
34 },{
35 title : \'意向成交价差 （单位：元/兆瓦时）\',
36 align : \'center\',
37 field : \'intent_ele_price\'
38 },{
39 title : \'查看\',
40 align : \'center\',
41 field : \'fj\'
42 }],
43 striped: true, //隔行变色
44 strictSearch: true,
45 clickToSelect: true,
46 cache:false,
47 showRefresh: true,
48 pagination: false,
49 pageNumber:1,
50 pageSize: 15,
51 pageList: [5, 10, 15, 20, 25],
52 showExport: true,//显示导出按钮
53 exportDataType: "basic",//导出类型
54 sidePagination: "client",
55 advancedSearch:true,//允许外部搜索 这个是扩充的js里面的属性
56 idTable:"abc",//搜索input的父级id
57 searchOnEnterKey:false,
58 strictSearch:false,
59 queryParamsType : "limit",
60 //search : true,
61 // searchText : "客户名称",
62 //toolbar: \'#toolbar\',
63 data:tableData
64 });
65
344 //search下面的内容除了选择器都是固定的
345 $("#listTable").on(\'post-body.bs.table\', function () {
346 //debugger;
347 console.log($("#listTable").data);
348 var $search = $("#listTable").data(\'bootstrap.table\').$toolbar.find(\'.search input\');
349 $search.attr(\'placeholder\', \'客户名称\');
350 $search.parents(".fixed-table-toolbar").css({position:\'absolute\',top: \'-53px\',right: \'16px\'});
351 });
352
353 });对应的html页面是:
<div class="row">
<div class="ibox-title">
<h5>
<i class="fa fa-sitemap"></i> 月度交易结果分配详情列表 <span class=\'sfont\'>（电量单位：兆瓦时
）</span>
</h5>
<div class="fright" >
<button class="btn btn-w-m btn-primary editBtn" type="button"
ng-click="editOperater()">编辑</button>
<span class="tit_inputbox" > <input type="text" //这里的id值是abc 和bootstrap-table设置的需要一样
placeholder="客户名称" />
</span>
</div>
</div>
<div class="col-md-12 ibox-content">
<table
class="table table-striped table-bordered table-hover dataTables-example"
></table>
</div>
</div>
