Question

我试图在this Bootstrap Datetime Picker单元格中使用Backgrid（版本4.17.37），但我对窗口小部件的渲染方式有疑问。小部件在单元格下方显示为薄弹出窗口，但似乎内部没有内容。但是，如果您将窗口小部件的内部html记录到控制台，则内容就在那里。在我看来，日期时间选择器的place函数内部发生了一些不寻常的事情，显示为here。

这是我的自定义Backgrid单元及其编辑器的代码。

// Editor for the datetime picker cell.
var DatetimePickerCellEditor = Backgrid.InputCellEditor.extend({
    events: {},
    initialize: function() {
        Backgrid.InputCellEditor.prototype.initialize.apply(this, arguments);
        var input = this;

        var timezone = 'America/Lima',
            format = 'YYYY-MM-DD HH:mm';

        this.$el.datetimepicker({
            format: format,
            timeZone: timezone
        }).on('dp.show', function(event) {
            event.preventDefault();
            var column = input.column.get('name'),
                date = input.model.get(column);
            input.$el.data("DateTimePicker").date(date);
        }).on('dp.hide', function(event) {
            event.preventDefault();
            var dateObj = event.date,
                dateLocal = null;

            if (dateObj) {
                var dateString = dateObj.format(format);
                dateLocal = moment.tz(dateString, timezone);
            }

            var command = new Backgrid.Command({}),
                column = input.column.get("name");

            // Save date in model as string in local time.
            input.model.set(column, dateLocal.format());
            input.model.trigger("backgrid:edited",
                                input.model,
                                input.column,
                                command);
            command = input = null;
        }).on('dp.error', function(error) {
            console.log(error)
        });
    }
});

// Cell to display the datetime picker.
var DatetimePickerCell = Backgrid.Cell.extend({
    editor: DatetimePickerCellEditor
});

这会产生以下结果：

检查时，日期时间选择器用作父级的元素是祖先<div class="col-lg-12 col-md-12">。然后，我尝试通过为单元格提供{ position: relative } CSS属性来解决问题。这确实使得日期时间选择器使用单元格作为父级，但在视觉上产生了以下结果：

您可以看到选取器似乎位于单元格下方，但不可见。

使用其他属性（例如widgetParent和widgetPositioning）会产生类似的结果。

Answer 1

我有同样的问题。

（我知道这是一个古老的问题，但是我今天使用的是骨干网/ backgrid。我在数据网格上还有很多关于角度，角度或反应的问题，我发现这个组合是最好的，也是最简单的，直到这些天。）

好吧，您只需在主干/后网格CSS之后将其添加到您的td容器中即可。

.backgrid th,
.backgrid td {
  display: table-cell;
  position: relative; 
  overflow: visible;
}

我在骨干/后网格项目中使用它，并且效果很好。

令人难以置信的是，它具有显示性：没有任何样式被超越，但是，由于任何原因，它继续使该操作失败。

我希望这可以帮助其他人。

一个捕获：

Backgrid单元格中的Bootstrap日期时间选择器无法正确呈现

1 个答案: