mirror of https://gitee.com/karson/fastadmin.git
新增高亮搜索按钮和搜索数字提示
parent
f45090391e
commit
18b6e0d672
|
|
@ -1642,4 +1642,19 @@ table.table-nowrap thead > tr > th {
|
||||||
.autocontent .autocontent-caret:hover {
|
.autocontent .autocontent-caret:hover {
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
}
|
}
|
||||||
|
.btn-commonsearch {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.btn-commonsearch.searching,
|
||||||
|
.btn-commonsearch.searching:focus {
|
||||||
|
background: #444c69;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.btn-commonsearch.searching:hover,
|
||||||
|
.btn-commonsearch.searching:active,
|
||||||
|
.btn-commonsearch.searching:active:hover {
|
||||||
|
background: #3a415a;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
/*# sourceMappingURL=backend.css.map */
|
/*# sourceMappingURL=backend.css.map */
|
||||||
|
|
@ -215,6 +215,21 @@
|
||||||
op[name] = sym;
|
op[name] = sym;
|
||||||
filter[name] = value;
|
filter[name] = value;
|
||||||
});
|
});
|
||||||
|
if (that.options.searchCountTips || that.options.searchBtnBg) {
|
||||||
|
var count = 0;
|
||||||
|
$.each(filter, function (key, value) {
|
||||||
|
if ((value === '' || value == null || ($.isArray(value) && value.length === 0))) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
count++;
|
||||||
|
});
|
||||||
|
if (that.options.searchCountTips) {
|
||||||
|
that.$toolbar.find(".btn-commonsearch > span").text(count).toggleClass("hidden", count === 0);
|
||||||
|
}
|
||||||
|
if (that.options.searchBtnBg) {
|
||||||
|
that.$toolbar.find(".btn-commonsearch").toggleClass("searching", count !== 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
return {op: op, filter: filter};
|
return {op: op, filter: filter};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -244,6 +259,8 @@
|
||||||
actionForm: "",
|
actionForm: "",
|
||||||
searchFormTemplate: "",
|
searchFormTemplate: "",
|
||||||
searchFormVisible: true,
|
searchFormVisible: true,
|
||||||
|
searchBtnBg: true,
|
||||||
|
searchCountTips: false,
|
||||||
searchClass: 'searchit',
|
searchClass: 'searchit',
|
||||||
showSearch: true,
|
showSearch: true,
|
||||||
renderDefault: true,
|
renderDefault: true,
|
||||||
|
|
@ -311,8 +328,11 @@
|
||||||
html = [];
|
html = [];
|
||||||
if (that.options.showSearch) {
|
if (that.options.showSearch) {
|
||||||
html.push(sprintf('<div class="columns-%s pull-%s" style="margin-top:10px;margin-bottom:10px;">', this.options.buttonsAlign, this.options.buttonsAlign));
|
html.push(sprintf('<div class="columns-%s pull-%s" style="margin-top:10px;margin-bottom:10px;">', this.options.buttonsAlign, this.options.buttonsAlign));
|
||||||
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('<button class="btn btn-default btn-commonsearch %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))
|
if (that.options.searchCountTips) {
|
||||||
|
html.push(sprintf('<span class="label label-danger hidden">0</span>'));
|
||||||
|
}
|
||||||
|
html.push(sprintf('<i class="%s %s"></i>', that.options.iconsPrefix, that.options.icons.commonSearchIcon));
|
||||||
html.push('</button></div>');
|
html.push('</button></div>');
|
||||||
}
|
}
|
||||||
if (that.$toolbar.find(".pull-right").length > 0) {
|
if (that.$toolbar.find(".pull-right").length > 0) {
|
||||||
|
|
|
||||||
|
|
@ -1691,3 +1691,20 @@ table.table-nowrap {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-commonsearch {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&.searching {
|
||||||
|
&, &:focus {
|
||||||
|
background: @component-active-bg;
|
||||||
|
color: @component-active-color;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover, &:active, &:active:hover {
|
||||||
|
background: darken(@component-active-bg, 5%);
|
||||||
|
color: @component-active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue