datepicker控件无法在模式窗口中正确呈现

时间：2019-07-01 06:43:36

标签： jquery html css angular

我已经使用Angular 7应用程序在ag-grid中实现了日期选择器控件的内联编辑。 ag-grid在弹出模式窗口中。日期选择器控件会弹出，但会在模式后面显示。不确定为什么会发生。我已附上屏幕截图，以显示其渲染方式。您还可以查看该组件的代码和html

enter image description here

组件

import { Component, Injectable, NgZone, ViewEncapsulation, ViewChild, Input } from '@angular/core';
import { OnInit } from '@angular/core'
import { Comparator } from '../utilities/comparator';
import { GridOptions, GridApi } from 'ag-grid-community';
import { DocumentUploadService } from '../services/documentUpload.service';
import { NotifyService } from '../utilities/notify.service';
import { number } from '@amcharts/amcharts4/core';
import { IDocument } from './documentupload.interface';
declare let $: any;
//var jquery:any

function getDatePicker() {
    function Datepicker() {}
    Datepicker.prototype.init = function(params) {
      this.eInput = document.createElement("input");
      this.eInput.value = params.value;
      $(this.eInput).datepicker({ dateFormat: "dd/mm/yy" });
    };
    Datepicker.prototype.getGui = function() {
      return this.eInput;
    };
    Datepicker.prototype.afterGuiAttached = function() {
      this.eInput.focus();
      this.eInput.select();
    };
    Datepicker.prototype.getValue = function() {
      return this.eInput.value;
    };
    Datepicker.prototype.destroy = function() {};
    Datepicker.prototype.isPopup = function() {
      return true;
    };
    return Datepicker;
  }

@Component({
    selector: 'mgr-document-upload',
    templateUrl: './documentUpload.component.html'
})

export class DocumentUploadComponent implements OnInit {
    Files: Array<File>;
    ColumnDefs: Array<any> = new Array<any>();
    private Comparator: Comparator;
    private Error: string;
    private gridApi: GridApi;
    public GridOptions: GridOptions;
    private editClicked;
    private editingRowIndex;
    private editType;
    private gridColumnApi;
    private components;
    ngZone: any;
    windowHeight: any;
    offset: number;
    Loading: boolean;
    public DocumentUploadDetails: any = {};
    public params: any;
    document: IDocument;


    // _documentTypes: any;
    // get DocumentTypes(): any {
    //     return this._documentTypes;
    // }
    // @Input('DocumentTypes')
    // set DocumentTypes(value: any) {
    //      this._documentTypes = value;
    //      if(this._documentTypes.length > 0) {
    //      this.DocumentTypesForDropDown = this._documentTypes.map(x => x.text);
    //      this.getDocumentUploadDetails();
    //     this.setGridOptions();
    //     this.setColumns();
    //      }
    // }

    @Input() ManagerStrategyId = 5508;
    MgrStrategyId = 5508;
    DocumentTypesForDropDown: any[];

    ngOnInit() {


    }

    init(documentTypes: any) {
        this.DocumentTypesForDropDown = documentTypes.map(x => x.text);
        this.getDocumentUploadDetails();
        this.setGridOptions();
        this.setColumns();

    }

    constructor(private comparator: Comparator, private documentUploadService: DocumentUploadService, private notify: NotifyService) {
        this.Comparator = comparator;
        this.editClicked = true;
        // this.getDocumentUploadDetails();
        window.onresize = (e) => {
            this.ngZone.run(() => {
                this.windowHeight = window.innerHeight - this.offset;
                setTimeout(() => {
                    if (!this.GridOptions || !this.GridOptions.api) {
                        return;
                    }
                }, 500, true);
            });
        };

    }

    onGridReady(params) {

        // this.setGridOptions();
        // this.getDocumentUploadDetails();
        // this.gridApi = params.api;
        // this.gridColumnApi = params.columnApi;
        // this.getDocumentUploadDetails();
        // this.http
        //   .get(
        //     "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
        //   )
        //   .subscribe(data => {
        //     this.rowData = data;
        //   });
    }

    // ,  cellEditor: 'agSelectCellEditor'
    private setColumns() {
        const self = this;
       // const columnDefs = new Array<any>();
        this.ColumnDefs.push({ headerName: 'ID', field: 'DocumentId', hide: true, editable: false });
        this.ColumnDefs.push({ headerName: 'Document Type ID', field: 'DocumentTypeId', hide: true, editable: false });
        this.ColumnDefs.push({
            headerName: 'Type', field: 'DocumentTypeName', hide: false, editable: true, cellEditor: 'agSelectCellEditor',
            cellEditorParams: {
                values: this.DocumentTypesForDropDown
            }
        });
        this.ColumnDefs.push({ headerName: 'Document', field: 'DocumentName', hide: false, editable: true });
         this.ColumnDefs.push({ headerName: 'Document Date', field: 'DocumentDate', hide: false, editable: true, cellEditor: 'datePicker' });

         this.components = { datePicker: getDatePicker() };

    }



    // onEdit() {
    //     this.params =  this.GridOptions.api.getEditingCells;
    //     this.editClicked = !this.editClicked;
    //     this.params.api.setFocusedCell(this.params.node.rowIndex, 'action');
    //     this.params.api.startEditingCell({
    //      rowIndex: this.params.node.rowIndex,
    //      colKey: 'action'
    //     });
    // }


    // private getEditSpan() {
    //     const eSpan = document.createElement('a');
    //     eSpan.innerHTML = '<style> .fontColor { color: #F59850;  }</style> <div style="cursor:pointer;max-width: 50px"><i class="far fa-edit fontColor" aria-hidden="true"></i></div>';
    //     return eSpan;
    // }


    onCellValueChanged(params) {
        this.document = <IDocument>{
            id  : params.data.DocumentId,
            name : params.data.DocumentName,
            documentTypeId : params.data.DocumentTypeId,
            documentDate : params.data.DocumentDate,
          };



        this.documentUploadService
        .updateDocumentUpload(this.document)
        .then((result) => {
            if (result) {

                this.notify.success('Documents uploaded successfully');
            }
        }).catch(err => {
                this.notify.error('An Error Has Occured While uploading the documents');
        });
    }


    private getDeleteSpan() {
        var eSpan = document.createElement('a');
        eSpan.innerHTML = '<div style="cursor:pointer;max-width: 50px"><i class="far fa-trash-alt fontColor" aria-hidden="true"></i></div>';
        return eSpan;
    }


    GridHeight() {
        if (!this.windowHeight) {
            this.windowHeight = window.innerHeight - this.offset + 10;
        }
        return this.windowHeight;
    }

    private initGrid() {
        const self = this;
    }

    setGridOptions() {
        this.GridOptions = {
            // columnDefs: this.getColumns(),
            enableFilter: true,
            enableColResize: true,
            animateRows: true,
            enableSorting: true,

            onGridReady: e => {
                if (!e || !e.api) {
                    return;
                }

                this.gridApi = e.api;

                this.setDefaultSortOrder();
            },
            onGridSizeChanged: () => this.GridOptions.api.sizeColumnsToFit(),



        };

    }

    onCellClicked($event){
        // check whether the current row is already opened in edit or not
        // if(this.editingRowIndex != $event.rowIndex) {
        //   $event.api.startEditingCell({
        //     rowIndex: $event.rowIndex,
        //     colKey: $event.column.colId
        //   });
        //   this.editingRowIndex = $event.rowIndex;
        // }
      }

    setDefaultSortOrder() {
        const defaultSortModel = [
            { colId: 'DocumentDate', sort: 'desc' }

        ];
        this.GridOptions.api.setSortModel(defaultSortModel);
    }

    onGridSizeChanged(params) {
        const gridWidth = document.getElementById('grid-wrapper').offsetWidth;
        const columnsToShow = [];
        const columnsToHide = [];
        let totalColsWidth = 0;
        const allColumns = params.columnApi.getAllColumns();
        for (let i = 0; i < allColumns.length; i++) {
            const column = allColumns[i];
            totalColsWidth += column.getMinWidth();
            if (totalColsWidth > gridWidth) {
                columnsToHide.push(column.colId);
            } else {
                columnsToShow.push(column.colId);
            }
        }
        params.columnApi.setColumnsVisible(columnsToShow, true);
        params.columnApi.setColumnsVisible(columnsToHide, false);
        params.api.sizeColumnsToFit();
    }

    private Delete(Id: number) {

        if (Id !== 0) {


            this.Error = '';
            this.documentUploadService
                .deleteDocument(Id)
                .then((result) => {
                    if (result) {
                        this.notify.success('Document Successfully Deleted');
                        // this.ClassficationOverrideDetailsEvent.next('init');
                    }
                }).catch(err => {
                    this.notify.error('An Error Has Occured While Deleting Document');
                });
        }

    }




    public getDocumentUploadDetails() {
        if (this.MgrStrategyId != null) {
            this.Loading = true;
            this.initGrid();

            //  this.spinner.show();
            this.documentUploadService.getDocumentUploadDetails(this.MgrStrategyId)
                .subscribe(data => {
                    this.DocumentUploadDetails = data;
                   this.Loading = false;

                    setTimeout(() => {
                        this.GridOptions.api.sizeColumnsToFit();
                        this.Loading = false;
                    }, 100, true);
                },
                    err => {
                        this.Error = 'An error has occurred. Please contact BSG';
                    },
                    () => {
                    });
        }
    }


}

html 

<div class="card" *ngIf="DocumentUploadDetails && DocumentUploadDetails.DocumentEntities" style="margin-top: 10px" >
    <div class="card-body" style="width:100%; text-align: left;">
        <div style="overflow-x: hidden; overflow-y: hidden; ">
            <div class="form-group row">
                <div class="panel panel-default col-md-12  ">
                    <div class="panel-body">
                        <div id="grid-wrapper" [style.height.px]="GridHeight()" [style.width.%]="100"
                            style="float: left;">


                            <ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions"
                                style="width: 100%; height: 100%" [columnDefs]="ColumnDefs" rowHeight="30"
                                [rowData]="DocumentUploadDetails.DocumentEntities"
                                [components]="components"
                                [editType]="editType"
                                (cellClicked)="onCellClicked($event)"
                                (cellValueChanged)="onCellValueChanged($event)"
                                headerHeight="30" rowSelection="single">
                            </ag-grid-angular>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

有关日期选择器的html元素外观的屏幕截图

enter image description here

我尝试过的但不起作用的

html 

<style>
    div.ui-datepicker { position: fixed; z-index: 10000 !important; }
</style>



<style>
    ui-datepicker { position: fixed; z-index: 10000 !important; }
</style>

组件

$(document).ready(function () {
    $('.ui-datepicker').css('position: fixed; z-index: 10000 !important');

});

屏幕截图

enter image description here

1 个答案:

答案 0 :(得分：0)

添加一个外部css文件，您在其中将z-index类的ui-datepicker设置为高于模式文件。如果模式Z索引设置为1050，则将ui-datepicker Z索引设置为比模式Z索引高的任何值。使用浏览器检查html并找出应将z-index应用于哪个元素。

  

z-index属性指定元素的堆叠顺序。

     

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。

相关问题
最新问题