Question

我有一个jqgrid表。一列是datepicker列。

此代码在点击elswhere时保存表格单元格。

jQuery(document).on('focusout','[role="gridcell"] *', function(){ jqGridTegevused.jqGrid('saveCell', row, col); })

这一切都很好。但是这段代码会中断datepicker的工作。当我在datepicker中选择日期时，它不会设置为表格单元格。

我怎样才能这样做，以便当我在表格单元格之外clik时，单元格被保存，除非我点击datepicker，因为我需要datepiceker在保存单元格之前完成其工作。目前焦点发生在datepickers onSelect之前。如果手动添加日期而不是使用datepicker onSelect，那么它需要将单元格保存在焦点中。

Answer 1

您可以使用relatedTarget事件的focusout属性来检测用户是否在datepicker控件内部单击。 datepicker的外部div具有类ui-datepicker。因此，您的代码可以修复为

$(document).on('focusout','[role="gridcell"] *', function (e) {
    var p = jqGridTegevused.jqGrid("getGridParam");

    if ($(e.relatedTarget).closest('.ui-datepicker').length === 0) {
        // save editing cell only if the current click is not inside of Datepicker
        jqGridTegevused.jqGrid('saveCell', p.iRow, p.iCol);
    }
});

下一个问题：关注时，focusout只会触发一次。您应该在日期选择器的onSelect回调中编写其他代码，以强制将焦点设置回输入字段，以便在用户在选择日期之后单击网格外*之后能够保存单元格datepicker。

我感谢$(document).on('focusout','[role="gridcell"] *', ...);的使用可能并不完美。你应该仔细测试一下。 focusout内部输入/选择...的绑定afterEditCell在我看来更好$(document).on('focusout','[role="gridcell"] *'。请参阅我使用的https://jsfiddle.net/7oLga5ze/

afterEditCell: function (rowid, nm, tmp, iRow, iCol) {
    var $grid = $(this);

    $(this.rows[iRow].cells[iCol])
        .find("input,textarea,select,button,object,*[tabindex]")
        .filter(":input:visible:not(:disabled)")
        .first()
        .on("focusout", function (e) {
            var p = $grid.jqGrid('getGridParam');

            if ($(e.relatedTarget).closest('.ui-datepicker').length === 0) {
                $grid.jqGrid('saveCell', p.iRow, p.iCol);
            }
        });
}

我添加了设置焦点在datepicker的onSelect内的输入元素。

单击外部表时保存jqgrid表行，除非单击datepicker

1 个答案: