Question

我正在使用指令来调整表格列的大小，并且在表上工作正常。但是，在这种情况下我可以委派活动。

<div class="table-head-alternative" [hidden]="!turnoffTableHead">
    <table #dataTable class="table table--bordered contentnoWrap content-wrap-alt-table" headerResizer [hidden]="!stageListOn">
        <thead>
          <tr>
            <th>some data  </th>
            <th>some data  </th>
        </tr>
        </thead>
        </table>
</div>



<div class="responsive-table" tableHeaderScrollEvent [(tableturnOffProperty)]="turnoffTableHead">

    <table class="table table--bordered contentnoWrap content-wrap-alt-table" headerResizer [dataTabletoResize]="dataTable" [hidden]="!stageListData">
        <thead>
          <tr>
            <th>some data  </th>
            <th>some data  </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>some data  </th>
            <th>some data  </th>
        </tr>
        <tr>
            <th>some data  </th>
            <th>some data  </th>
        </tr>
        </tbody>
        </table>
</div>

@Directive({
    selector: '[headerResizer]'
})

export class TableHeaderResizerDirective implements OnInit, AfterViewInit {

    private table: any;
    private startOffset: any;
    private headerEl: any;
    @Input() dataTabletoResize;

    constructor(private el: ElementRef) {
        this.table = el.nativeElement;

        console.log(this.dataTabletoResize, " dataTabletoResize at construtor");
    }

    ngOnInit() { }

    ngAfterViewInit() {

        console.log(this.dataTabletoResize, " dataTabletoResize at on init");

        const cells = this.table.rows[0].cells;
        for (let i = 0; i < cells.length - 1; i++) {
            const th = cells[i];
            th.style.position = 'relative';
            const resizeHandle = document.createElement('div');
            resizeHandle.style.position = 'absolute';
            resizeHandle.style.cursor = 'col-resize';
            resizeHandle.style.top = '0';
            resizeHandle.style.right = '0';
            resizeHandle.style.bottom = '0';
            resizeHandle.style.width = '5px';
            resizeHandle.addEventListener('mousedown', (e) => {                
                this.headerEl = th;
                this.startOffset = e.clientX - th.offsetWidth;

            });
            resizeHandle.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();
                return false;
            });

            th.appendChild(resizeHandle);
        }
    }

    @HostListener('mousemove', ['$event'])
    public onMouseEnter(e): void {
        console.log(this.dataTabletoResize, " dataTabletoResize at move");       
        if (this.headerEl) {
            this.headerEl.style.width = (e.clientX - this.startOffset) + 'px';
        }
    }

我在这里的操作是，实际表（“表响应式”）具有调整大小功能，并且工作正常。

当我向下滚动具有更多列的表时，重复的标头（table-header-alternative）应出现在表顶部，其行为类似于重复的表标头（table-header-alternative）。

在这里，如果我要调整大小（在“ table-header-alternative”列中），它也应应用于主表（“ table-active”）。

在这里，headerResizer用于调整表列的大小，tableHeaderScrollEven用于触发事件以将turnofTableHead变量设置为true。当将此turnofTableHead设置为true时，备用表头将出现在主表上（“表响应”）。

我在这里面临的问题

当我将替代表（表头替代）的列标题调整为主表列（表响应）时，如何委托resize事件。

我正在尝试自己实现sticky table header。

请帮助我解决这个问题

Angular2指令元素委托

0 个答案: