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" style="margin-top: -8px;">
<button class="btn btn-w-m btn-primary editBtn" type="button" style="margin-right: 5px;"
id="edit_btn_input" ng-click="editOperater()">编辑</button>
<span class="tit_inputbox" id="abc"> <input type="text" //这里的id值是abc 和bootstrap-table设置的需要一样
id="orgName" placeholder="客户名称" />
</span>
</div>
</div>
<div class="col-md-12 ibox-content">
<table
class="table table-striped table-bordered table-hover dataTables-example"
id="sitemap_table"></table>
</div>
</div>