backbone.js Backgrid单元格中的引导数据库日期时间选取器未正确呈现

6tr1vspr  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(191)

我正在尝试使用this Bootstrap Datetime Picker(版本4.17.37),但是我对小部件的呈现方式有问题。小部件在单元格的正下方显示为一个细的弹出窗口,但是里面似乎没有内容。但是,如果您将小部件的内部html记录到控制台,在我看来,日期时间选择器的place函数内部似乎发生了一些不寻常的事情,如下所示。
这是我为自定义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属性来解决这个问题。这确实使日期时间选择器将该单元格用作父元素,但在视觉上产生了以下结果:

您可以看到选取器显示在单元格下方,但不可见。
使用其他属性(如widgetParentwidgetPositioning)也得到了类似的结果。

snvhrwxg

snvhrwxg1#

我也有同样问题
(我知道这是一个老问题,但我今天使用 Backbone /backgrid。我有很多额外的问题与Angular ,vue或React上的数据网格,我发现这个组合是最好的,最简单的,直到这些天)。
那么,您只需要在您的th,td容器的backbone/backgrid css之后添加这个。

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

我在一个 Backbone /backgrid项目中使用它,它工作得很完美。
这简直不可思议,还有和显示器:没有样式被覆盖,但是,由于任何原因,它继续使此失败。
我希望这能帮助到其他人。
一个捕获:

相关问题