审查视图

public/assets/js/bootstrap-table-commonsearch.js 19.9 KB
1 2 3 4 5
/**
 * @author: pppscn <35696959@qq.com>
 * @version: v0.0.1
 *
 * @update 2017-05-07 <http://git.oschina.net/pp/fastadmin>
Karson authored
6
 * @update 2017-09-17 <http://git.oschina.net/karson/fastadmin>
7 8 9 10 11
 */

!function ($) {
    'use strict';
12
    var ColumnsForSearch = [];
13 14 15

    var sprintf = $.fn.bootstrapTable.utils.sprintf;
Karson authored
16
    var initCommonSearch = function (pColumns, that) {
17
        var vFormCommon = createFormCommon(pColumns, that);
18
19
        var vModal = sprintf("<div class=\"commonsearch-table %s\">", that.options.searchFormVisible ? "" : "hidden");
20 21
        vModal += vFormCommon.join('');
        vModal += "</div>";
22
        that.$container.prepend($(vModal));
23 24
        that.$commonsearch = $(".commonsearch-table", that.$container);
        var form = $("form.form-commonsearch", that.$commonsearch);
25
26 27
        //绑定日期时间元素事件
        if ($(".datetimepicker", form).size() > 0) {
Karson authored
28
29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
            require(['bootstrap-datetimepicker'], function () {
                $('.datetimepicker', form).parent().css('position', 'relative');
                $('.datetimepicker', form).datetimepicker({
                    //format: 'YYYY-MM-DD',
                    icons: {
                        time: 'fa fa-clock-o',
                        date: 'fa fa-calendar',
                        up: 'fa fa-chevron-up',
                        down: 'fa fa-chevron-down',
                        previous: 'fa fa-chevron-left',
                        next: 'fa fa-chevron-right',
                        today: 'fa fa-history',
                        clear: 'fa fa-trash',
                        close: 'fa fa-remove'
                    },
                    showTodayButton: true,
                    showClose: true
                });
            });
        }
Karson authored
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
        if ($(".datetimerange", form).size() > 0) {
            var ranges = {};
            ranges[__('Today')] = [Moment().startOf('day'), Moment().endOf('day')];
            ranges[__('Yesterday')] = [Moment().subtract(1, 'days').startOf('day'), Moment().subtract(1, 'days').endOf('day')];
            ranges[__('Last 7 Days')] = [Moment().subtract(6, 'days').startOf('day'), Moment().endOf('day')];
            ranges[__('Last 30 Days')] = [Moment().subtract(29, 'days').startOf('day'), Moment().endOf('day')];
            ranges[__('This Month')] = [Moment().startOf('month'), Moment().endOf('month')];
            ranges[__('Last Month')] = [Moment().subtract(1, 'month').startOf('month'), Moment().subtract(1, 'month').endOf('month')];
            var options = {
                timePicker: false,
                autoUpdateInput: false,
                timePickerSeconds: true,
                timePicker24Hour: true,
                autoApply: true,
                locale: {
                    format: 'YYYY-MM-DD HH:mm:ss',
                    customRangeLabel: __("Custom Range"),
                    applyLabel: __("Apply"),
                    cancelLabel: __("Clear"),
                },
                ranges: ranges,
            };
            var callback = function (start, end) {
                $(this.element).val(start.format(options.locale.format) + " - " + end.format(options.locale.format));
            };
            var column, index;
            require(['bootstrap-daterangepicker'], function () {
76
                $(".datetimerange", form).each(function () {
Karson authored
77 78 79 80 81 82 83 84 85 86 87 88
                    $(this).on('apply.daterangepicker', function (ev, picker) {
                        callback.call(picker, picker.startDate, picker.endDate);
                    });
                    $(this).on('cancel.daterangepicker', function (ev, picker) {
                        $(this).val('');
                    });
                    index = $(this).data("index");
                    column = pColumns[index];
                    $(this).daterangepicker($.extend({}, options, column.options || {}), callback);
                });
            });
        }
89
Karson authored
90 91
        // 表单提交
        form.on("submit", function (event) {
92
            event.preventDefault();
93
            that.onCommonSearch();
Karson authored
94
            return false;
95 96 97
        });

        // 重置搜索
98
        form.on("click", "button[type=reset]", function (event) {
Karson authored
99
            form[0].reset();
100
            that.onCommonSearch();
101 102 103 104 105 106
        });

    };

    var createFormCommon = function (pColumns, that) {
        var htmlForm = [];
107
        var opList = ['=', '>', '>=', '<', '<=', '!=', 'FIND_IN_SET', 'LIKE', 'LIKE %...%', 'NOT LIKE', 'IN', 'NOT IN', 'IN(...)', 'NOT IN(...)', 'BETWEEN', 'NOT BETWEEN', 'RANGE', 'NOT RANGE', 'IS NULL', 'IS NOT NULL'];
108
        htmlForm.push(sprintf('<form class="form-horizontal form-commonsearch" action="%s" >', that.options.actionForm));
109 110 111
        htmlForm.push('<fieldset>');
        if (that.options.titleForm.length > 0)
            htmlForm.push(sprintf("<legend>%s</legend>", that.options.titleForm));
112
        htmlForm.push('<div class="row">');
113 114
        for (var i in pColumns) {
            var vObjCol = pColumns[i];
115
            if (!vObjCol.checkbox && vObjCol.field !== 'operate' && vObjCol.searchable && vObjCol.operate !== false) {
Karson authored
116 117 118
                var query = Backend.api.query(vObjCol.field);
                query = query ? query : '';
                vObjCol.defaultValue = that.options.renderDefault && query != '' ? query : (typeof vObjCol.defaultValue === 'undefined' ? '' : vObjCol.defaultValue);
119
                ColumnsForSearch.push(vObjCol);
120 121 122 123 124

                htmlForm.push('<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-3">');
                htmlForm.push(sprintf('<label for="%s" class="control-label col-xs-4">%s</label>', vObjCol.field, vObjCol.title));
                htmlForm.push('<div class="col-xs-8">');
125
                vObjCol.operate = (typeof vObjCol.operate === 'undefined' || $.inArray(vObjCol.operate.toUpperCase(), opList) === -1) ? '=' : vObjCol.operate.toUpperCase();
Karson authored
126
                htmlForm.push(sprintf('<input type="hidden" class="form-control operate" name="field-%s" data-name="%s" value="%s" readonly>', vObjCol.field, vObjCol.field, vObjCol.operate));
127
128
                var style = typeof vObjCol.style === 'undefined' ? '' : sprintf('style="%s"', vObjCol.style);
129
                if (vObjCol.searchList) {
130 131
                    if (typeof vObjCol.searchList === 'object' && typeof vObjCol.searchList.then === 'function') {
                        htmlForm.push(sprintf('<select class="form-control" name="%s" %s>%s</select>', vObjCol.field, style, sprintf('<option value="">%s</option>', that.options.formatCommonChoose())));
132
                        (function (vObjCol, that) {
133
                            $.when(vObjCol.searchList).done(function (ret) {
134
135
                                var isArray = false;
136
                                if (ret.data && ret.data.searchlist && $.isArray(ret.data.searchlist)) {
137
                                    var resultlist = {};
138
                                    $.each(ret.data.searchlist, function (key, value) {
139
                                        resultlist[value.id] = value.name;
140
                                    });
141 142 143
                                } else if (ret.constructor === Array || ret.constructor === Object) {
                                    var resultlist = ret;
                                    isArray = ret.constructor === Array ? true : isArray;
144
                                }
145 146 147 148 149 150
                                var optionList = [];
                                $.each(resultlist, function (key, value) {
                                    var isSelect = (isArray ? value : key) == vObjCol.defaultValue ? 'selected' : '';
                                    optionList.push(sprintf("<option value='" + (isArray ? value : key) + "' %s>" + value + "</option>", isSelect));
                                });
                                $("form.form-commonsearch select[name='" + vObjCol.field + "']", that.$container).append(optionList.join(''));
151
                            });
152
                        })(vObjCol, that);
153
                    } else if (typeof vObjCol.searchList == 'function') {
154 155 156 157
                        htmlForm.push(vObjCol.searchList.call(this, vObjCol));
                    } else {
                        var isArray = vObjCol.searchList.constructor === Array;
                        var searchList = [];
158
                        searchList.push(sprintf('<option value="">%s</option>', that.options.formatCommonChoose()));
159
                        $.each(vObjCol.searchList, function (key, value) {
160
                            var isSelect = (isArray ? value : key) == vObjCol.defaultValue ? 'selected' : '';
Karson authored
161
                            searchList.push(sprintf("<option value='" + (isArray ? value : key) + "' %s>" + value + "</option>", isSelect));
162
                        });
163
                        htmlForm.push(sprintf('<select class="form-control" name="%s" %s>%s</select>', vObjCol.field, style, searchList.join('')));
164 165
                    }
                } else {
166 167 168 169
                    var placeholder = typeof vObjCol.placeholder === 'undefined' ? vObjCol.title : vObjCol.placeholder;
                    var type = typeof vObjCol.type === 'undefined' ? 'text' : vObjCol.type;
                    var addclass = typeof vObjCol.addclass === 'undefined' ? 'form-control' : 'form-control ' + vObjCol.addclass;
                    var data = typeof vObjCol.data === 'undefined' ? '' : vObjCol.data;
Karson authored
170 171
                    var defaultValue = typeof vObjCol.defaultValue === 'undefined' ? '' : vObjCol.defaultValue;
                    if (/BETWEEN$/.test(vObjCol.operate)) {
172 173
                        var defaultValueArr = defaultValue.toString().match(/\|/) ? defaultValue.split('|') : ['', ''];
                        var placeholderArr = placeholder.toString().match(/\|/) ? placeholder.split('|') : [placeholder, placeholder];
Karson authored
174
                        htmlForm.push('<div class="row row-between">');
175 176
                        htmlForm.push(sprintf('<div class="col-xs-6 11"><input type="%s" class="%s" name="%s" value="%s" placeholder="%s" id="%s" data-index="%s" %s %s></div>', type, addclass, vObjCol.field, defaultValueArr[0], placeholderArr[0], vObjCol.field, i, style, data));
                        htmlForm.push(sprintf('<div class="col-xs-6 22"><input type="%s" class="%s" name="%s" value="%s" placeholder="%s" id="%s" data-index="%s" %s %s></div>', type, addclass, vObjCol.field, defaultValueArr[1], placeholderArr[1], vObjCol.field, i, style, data));
177
                        htmlForm.push('</div>');
Karson authored
178
                    } else {
Karson authored
179
                        htmlForm.push(sprintf('<input type="%s" class="%s" name="%s" value="%s" placeholder="%s" id="%s" data-index="%s" %s %s>', type, addclass, vObjCol.field, defaultValue, placeholder, vObjCol.field, i, style, data));
180
                    }
181 182 183
                }

                htmlForm.push('</div>');
184
                htmlForm.push('</div>');
185 186
            }
        }
187
        htmlForm.push('<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-3">');
188
        htmlForm.push(createFormBtn(that).join(''));
189 190
        htmlForm.push('</div>');
        htmlForm.push('</div>');
191 192 193 194 195 196 197 198 199 200
        htmlForm.push('</fieldset>');
        htmlForm.push('</form>');

        return htmlForm;
    };

    var createFormBtn = function (that) {
        var htmlBtn = [];
        var searchSubmit = that.options.formatCommonSubmitButton();
        var searchReset = that.options.formatCommonResetButton();
201
        htmlBtn.push('<div class="col-sm-8 col-xs-offset-4">');
202 203
        htmlBtn.push(sprintf('<button type="submit" class="btn btn-success" >%s</button> ', searchSubmit));
        htmlBtn.push(sprintf('<button type="reset" class="btn btn-default" >%s</button> ', searchReset));
204 205 206 207
        htmlBtn.push('</div>');
        return htmlBtn;
    };
Karson authored
208
    var isSearchAvailble = function (that) {
209
Karson authored
210 211 212 213 214 215 216 217
        //只支持服务端搜索
        if (!that.options.commonSearch || that.options.sidePagination != 'server' || !that.options.url) {
            return false;
        }

        return true;
    };
218
    var getSearchQuery = function (that, removeempty) {
Karson authored
219 220
        var op = {};
        var filter = {};
221 222
        var value = '';
        $("form.form-commonsearch input.operate", that.$commonsearch).each(function (i) {
Karson authored
223
            var name = $(this).data("name");
224
            var sym = $(this).val().toUpperCase();
225
            var obj = $("[name='" + name + "']", that.$commonsearch);
Karson authored
226 227 228 229 230
            if (obj.size() == 0)
                return true;
            var vObjCol = ColumnsForSearch[i];
            if (obj.size() > 1) {
                if (/BETWEEN$/.test(sym)) {
231 232 233 234 235
                    var value_begin = $.trim($("[name='" + name + "']:first", that.$commonsearch).val()), value_end = $.trim($("[name='" + name + "']:last", that.$commonsearch).val());
                    if (value_begin.length || value_end.length) {
                        if (typeof vObjCol.process === 'function') {
                            value_begin = vObjCol.process(value_begin, 'begin');
                            value_end = vObjCol.process(value_end, 'end');
Karson authored
236
                        }
237 238 239
                        value = value_begin + ',' + value_end;
                    } else {
                        value = '';
Karson authored
240
                    }
241 242 243 244
                    //如果是时间筛选,将operate置为RANGE
                    if ($("[name='" + name + "']:first", that.$commonsearch).hasClass("datetimepicker")) {
                        sym = 'RANGE';
                    }
Karson authored
245
                } else {
246
                    value = $("[name='" + name + "']:checked", that.$commonsearch).val();
Karson authored
247 248
                }
            } else {
Karson authored
249
                value = (vObjCol && typeof vObjCol.process === 'function') ? vObjCol.process(obj.val()) : (sym == 'LIKE %...%' ? obj.val().replace(/\*/g, '%') : obj.val());
Karson authored
250
            }
251
            if (removeempty && value == '' && sym.indexOf("NULL") == -1) {
Karson authored
252 253 254 255 256 257 258 259 260
                return true;
            }

            op[name] = sym;
            filter[name] = value;
        });
        return {op: op, filter: filter};
    };
261 262 263
    var getQueryParams = function (params, searchQuery, removeempty) {
        params.filter = typeof params.filter === 'Object' ? params.filter : (params.filter ? JSON.parse(params.filter) : {});
        params.op = typeof params.op === 'Object' ? params.op : (params.op ? JSON.parse(params.op) : {});
264 265 266

        params.filter = $.extend({}, params.filter, searchQuery.filter);
        params.op = $.extend({}, params.op, searchQuery.op);
267 268 269 270 271 272 273 274 275 276 277 278 279 280
        //移除empty的值
        if (removeempty) {
            $.each(params.filter, function (i, j) {
                if (j === '') {
                    delete params.filter[i];
                    delete params.op[i];
                }
            });
        }
        params.filter = JSON.stringify(params.filter);
        params.op = JSON.stringify(params.op);
        return params;
    };
281 282
    $.extend($.fn.bootstrapTable.defaults, {
        commonSearch: false,
283
        titleForm: "Common search",
Karson authored
284 285 286 287
        actionForm: "",
        searchFormVisible: true,
        searchClass: 'searchit',
        renderDefault: true,
288 289 290 291
        onCommonSearch: function (field, text) {
            return false;
        },
        onPostCommonSearch: function (table) {
292 293 294 295 296 297 298 299 300
            return false;
        }
    });

    $.extend($.fn.bootstrapTable.defaults.icons, {
        commonSearchIcon: 'glyphicon-search'
    });

    $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
301 302
        'common-search.bs.table': 'onCommonSearch',
        'post-common-search.bs.table': 'onPostCommonSearch'
303
    });
304
    $.extend($.fn.bootstrapTable.locales[$.fn.bootstrapTable.defaults.locale], {
305
        formatCommonSearch: function () {
306
            return "Common search";
307 308
        },
        formatCommonSubmitButton: function () {
309
            return "Submit";
310 311
        },
        formatCommonResetButton: function () {
312
            return "Reset";
313 314
        },
        formatCommonCloseButton: function () {
315
            return "Close";
316 317
        },
        formatCommonChoose: function () {
318
            return "Choose";
319 320 321 322 323 324
        }
    });

    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);

    var BootstrapTable = $.fn.bootstrapTable.Constructor,
Karson authored
325
            _initHeader = BootstrapTable.prototype.initHeader,
326 327 328 329
            _initToolbar = BootstrapTable.prototype.initToolbar,
            _load = BootstrapTable.prototype.load,
            _initSearch = BootstrapTable.prototype.initSearch;
Karson authored
330 331 332 333 334 335 336 337 338
    BootstrapTable.prototype.initHeader = function () {
        _initHeader.apply(this, Array.prototype.slice.apply(arguments));
        this.$header.find('th[data-field]').each(function (i) {
            var column = $(this).data();
            if (typeof column['width'] !== 'undefined') {
                $(this).css("min-width", column['width']);
            }
        });
    };
339 340 341
    BootstrapTable.prototype.initToolbar = function () {
        _initToolbar.apply(this, Array.prototype.slice.apply(arguments));
Karson authored
342
        if (!isSearchAvailble(this)) {
343 344 345
            return;
        }
Karson authored
346 347
        var that = this,
                html = [];
Karson authored
348
        html.push(sprintf('<div class="columns-%s pull-%s" style="margin-top:10px;margin-bottom:10px;">', this.options.buttonsAlign, this.options.buttonsAlign));
Karson authored
349 350 351
        html.push(sprintf('<button class="btn btn-default%s' + '" type="button" name="commonSearch" title="%s">', that.options.iconSize === undefined ? '' : ' btn-' + that.options.iconSize, that.options.formatCommonSearch()));
        html.push(sprintf('<i class="%s %s"></i>', that.options.iconsPrefix, that.options.icons.commonSearchIcon))
        html.push('</button></div>');
352
Karson authored
353 354 355 356 357
        if (that.$toolbar.find(".pull-right").size() > 0) {
            $(html.join('')).insertBefore(that.$toolbar.find(".pull-right:first"));
        } else {
            that.$toolbar.append(html.join(''));
        }
Karson authored
358 359 360 361 362

        initCommonSearch(that.columns, that);

        that.$toolbar.find('button[name="commonSearch"]')
                .off('click').on('click', function () {
363
            that.$commonsearch.toggleClass("hidden");
364
            return;
Karson authored
365
        });
366
Karson authored
367
        that.$container.on("click", "." + that.options.searchClass, function () {
368
            var obj = $("form [name='" + $(this).data("field") + "']", that.$commonsearch);
369 370
            if (obj.size() > 0) {
                obj.val($(this).data("value"));
371
                $("form", that.$commonsearch).trigger("submit");
372
            }
Karson authored
373
        });
374 375 376
        var queryParams = that.options.queryParams;
        //匹配默认搜索值
        this.options.queryParams = function (params) {
377
            return queryParams(getQueryParams(params, getSearchQuery(this, true)));
378 379
        };
        this.trigger('post-common-search', that);
380
381 382 383
    };

    BootstrapTable.prototype.onCommonSearch = function () {
384
        var searchQuery = getSearchQuery(this);
385
        this.trigger('common-search', this, searchQuery);
386
        this.options.pageNumber = 1;
387
        this.refresh({});
388 389 390 391 392
    };

    BootstrapTable.prototype.load = function (data) {
        _load.apply(this, Array.prototype.slice.apply(arguments));
Karson authored
393
        if (!isSearchAvailble(this)) {
394 395 396 397 398 399 400
            return;
        }
    };

    BootstrapTable.prototype.initSearch = function () {
        _initSearch.apply(this, Array.prototype.slice.apply(arguments));
Karson authored
401
        if (!isSearchAvailble(this)) {
402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424
            return;
        }

        var that = this;
        var fp = $.isEmptyObject(this.filterColumnsPartial) ? null : this.filterColumnsPartial;
        this.data = fp ? $.grep(this.data, function (item, i) {
            for (var key in fp) {
                var fval = fp[key].toLowerCase();
                var value = item[key];
                value = $.fn.bootstrapTable.utils.calculateObjectValue(that.header,
                        that.header.formatters[$.inArray(key, that.header.fields)],
                        [value, item, i], value);

                if (!($.inArray(key, that.header.fields) !== -1 &&
                        (typeof value === 'string' || typeof value === 'number') &&
                        (value + '').toLowerCase().indexOf(fval) !== -1)) {
                    return false;
                }
            }
            return true;
        }) : this.data;
    };
}(jQuery);