bootstrap table 前端搜索 - 南开小巷

时间:2024-03-17 14:05:18

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>