作者 PPPSCN

普通搜索bootstrap-table-commonsearch优化——支持自定义样式、datetimepicker

... ... @@ -25,15 +25,16 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
{field: 'state', checkbox: true},
{field: 'id', title: __('Id'), operate: false},
{field: 'category_id', title: __('Category_id'), operate: '='},
{field: 'title', title: __('Title'), operate: 'LIKE %...%'},
{field: 'keywords', title: __('Keywords'), operate: 'LIKE %...%'},
{field: 'title', title: __('Title'), operate: 'LIKE %...%', placeholder: '标题,模糊搜索', style: 'width:200px'},
{field: 'keywords', title: __('Keywords'), operate: 'LIKE %...%', placeholder: '关键字,模糊搜索'},
{field: 'flag', title: __('Flag'), formatter: Table.api.formatter.flag, operate: false},
{field: 'image', title: __('Image'), formatter: Table.api.formatter.image, operate: false},
{field: 'icon', title: __('Icon'), formatter: Table.api.formatter.icon, operate: false},
{field: 'views', title: __('Views'), operate: false},
{field: 'comments', title: __('Comments'), operate: false},
{field: 'weigh', title: __('Weigh'), operate: false},
{field: 'status', title: __('Status'), formatter: Table.api.formatter.status},
{field: 'status', title: __('Status'), formatter: Table.api.formatter.status, searchList: {'normal': '正常', 'hidden': '隐藏'}, style: 'min-width:100px;'},
{field: 'createtime', title: __('Create Time'), formatter: Table.api.formatter.datetime, operate: 'BETWEEN', type: 'datetime', addclass: 'datetimepicker', data: 'data-date-format="YYYY-MM-DD"'},
{field: 'operate', title: __('Operate'), events: Table.api.events.operate, formatter: Table.api.formatter.operate}
]
],
... ...
... ... @@ -30,6 +30,30 @@
});
}
//绑定日期时间元素事件
var form = $("#" + that.options.idForm);
if ($(".datetimepicker", form).size() > 0) {
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
});
});
}
// 提交搜索
$("#btnSubmitCommon" + "_" + that.options.idTable).click(function (event) {
that.onColumnCommonSearch();
... ... @@ -69,6 +93,7 @@
}
//htmlForm.push('<div class="col-sm-8">');
var style = typeof vObjCol.style === 'undefined' ? '' : sprintf('style="%s"', vObjCol.style);
if (vObjCol.searchList) {
if (typeof vObjCol.searchList == 'function') {
htmlForm.push(vObjCol.searchList.call(this, vObjCol));
... ... @@ -79,10 +104,18 @@
$.each(vObjCol.searchList, function (key, value) {
searchList.push("<option value='" + (isArray ? value : key) + "'>" + value + "</option>");
});
htmlForm.push(sprintf('<select class="form-control" name="%s">%s</select>', vObjCol.field, searchList.join('')));
htmlForm.push(sprintf('<select class="form-control" name="%s" %s>%s</select>', vObjCol.field, style, searchList.join('')));
}
} else {
htmlForm.push(sprintf('<input type="text" class="form-control" name="%s" placeholder="%s" id="%s">', vObjCol.field, vObjCol.title, vObjCol.field));
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;
htmlForm.push(sprintf('<input type="%s" class="%s" name="%s" placeholder="%s" id="%s" %s %s>', type, addclass, vObjCol.field, placeholder, vObjCol.field, style, data));
var reg = /BETWEEN$/;
if (reg.test(vObjCol.operate)) {
htmlForm.push(sprintf('&nbsp;-&nbsp;<input type="%s" class="%s" name="%s" placeholder="%s" id="%s" %s %s>', type, addclass, vObjCol.field, placeholder, vObjCol.field, style, data));
}
}
//htmlForm.push('</div>');
... ... @@ -237,7 +270,28 @@
var obj = $("[name='" + name + "']");
if (obj.size() == 0)
return true;
var value = obj.size() > 1 ? $("[name='" + name + "']:checked").val() : obj.val();
if (obj.size() > 1) {
if (/BETWEEN$/.test(sym)) {
var value_begin = $.trim($("[name='" + name + "']:first").val()), value_end = $.trim($("[name='" + name + "']:last").val());
if (!value_begin.length || !value_end.length) {
return true;
}
//datetime类型字段转换成时间戳
if ($("[name='" + name + "']:first").attr('type') === 'datetime') {
var datetimestamp = Date.parse(value_begin).toString();
value_begin = datetimestamp.substr(0, datetimestamp.length - 3) - 28800; //TODO:Date.parse导致的时区差
datetimestamp = Date.parse(value_end).toString();
value_end = datetimestamp.substr(0, datetimestamp.length - 3) - 28800; //TODO:Date.parse导致的时区差
}
var value = value_begin + ',' + value_end;
} else {
var value = $("[name='" + name + "']:checked").val();
}
} else {
var value = obj.val();
}
if (value == '' && sym.indexOf("NULL") == -1) {
return true;
}
... ...