在使用 Bootstrap-Table 的过程中,我们经常需要使用到表格中的行内编辑功能,而日期选择器是其中常见的需求之一。然而,自带的 x-editable 日期选择器可能不尽人意,其样式可能与我们的设计风格不符。因此,我们可以通过自定义的方式,利用 laydate 日期控件来实现一个更符合我们需求的日期选择器。
//引入样式和相关js文件
<th:block th:include="include :: datetimepicker-css"/>
<th:block th:include="include :: bootstrap-editable-css"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: bootstrap-table-editable-js"/>
else if (editableType === "date") {
uniqueIdForDatePicker = fieldData.fieldName + fieldData.id
dateFieldName = fieldData.fieldName
column.editable = {
type: 'text',
title: column.title,
mode: "inline",
showbuttons: false,
tpl: "<input id='" + uniqueIdForDatePicker + "'>",
inputclass: 'RemoveFocus datepicker-Date',
}
}
var uniqueIdForDatePicker;
var newUniqueId;
var dateFieldName;
function onClickCell(field, value, row, $element) {
initDatePickers();
if (field === dateFieldName) {
newUniqueId = uniqueIdForDatePicker + '-' + row.id; // 创建唯一的 ID
$('#' + uniqueIdForDatePicker).attr('id', newUniqueId); // 更新日期选择器的 ID
}
}
// 初始化日期选择器
function initDatePickers() {
layui.use('laydate', function () { // 使用 layui 的 laydate 插件
var laydate = layui.laydate;
$(this).removeAttr("lay-key");
laydate.render({
elem: '#' + newUniqueId, // 渲染日期选择器到指定id
trigger: 'click',
done: function (value, date) {
$(this)[0].elem[0].dispatchEvent(new KeyboardEvent('keydown', { // 模拟键盘事件触发
keyCode: 13 // 模拟按下回车键
}));
}
});
});
}
uniqueIdForDatePicker
、newUniqueId
和dateFieldName
分别用于存储日期选择器的唯一 ID、更新后的唯一 ID 和 当前日期字段的名称。onClickCell
函数用于在单元格被点击时初始化日期选择器。当单元格对应的字段是日期类型时,它将初始化日期选择器并更新其唯一 ID。initDatePickers
函数利用 layui 的 laydate 插件初始化日期选择器。它使用newUniqueId
作为日期选择器的目标元素,并设置点击触发日期选择器。在选择日期后,通过模拟键盘事件触发回车键,以保存日期修改。
在官方文档里,行内编辑不带按钮的时候表单会自动提交,因此需要在bootstrap-editable.js里补充对应的autosbmit逻辑
autosubmit: function () {
var $input = this.$input;
if (!$input.hasClass("RemoveFocus") || !$input.hasClass("datepicker-Date")) {
$input.keydown(function (b) {
if (13 === b.which) {
b.preventDefault();
a(this).closest("form").submit();
}
});
$input.blur(function () {
a(this).closest("form").submit();
});
} else {
$input.keydown(function (b) {
if (13 === b.which) {
b.preventDefault();
a(this).closest("form").submit();
}
});
}
},
Bootstrap-DatePicker 覆盖掉原日期控件插件https://pan.baidu.com/s/1OFu50hldGp8H8ZZzUPO9fg#list/path=%2F
效果图补充