PrimeNG p-Table 사용자 정의shift 다중 선택 기능

4

1) 요구 사항: 4

4

2) 사고방식: 4

3) 코드 구현:

1) 요구 사항:

프로젝트 수요는 데이터 목록에서 이루어집니다:shift를 누르면 위아래로 다중 선택을 하고, 단독 위아래 단추를 누르면 선택한 줄의 위아래로 이동합니다.

2) 사고 방식:

keydown 이벤트를 사용하여 html 코드:

<p-table (keydown)="OnKeyDownHandler($event)"><p-table>

3) 코드 구현:

ts 코드: OnKeyDownHandler

    OnKeyDownHandler(event): void {
        // ↑
        if (event.keyCode === 38) {
            if (this.allowMultipleSelection) {
                this.onHandlerUpMove(event.shiftKey);
            } else {
                this.selectedHandlerUpMove();
            }
        }
        // ↓
        if (event.keyCode === 40) {
            if (this.allowMultipleSelection) {
                this.onHandlerDownMove(event.shiftKey);
            } else {
                this.selectedHandlerDownMove();
            }
        }
        // ↑↓←→
        if (event.keyCode === 38 || event.keyCode === 40 || 
            event.keyCode === 37 || event.keyCode === 39) {
            event.preventDefault();
        }
    }

단일 선택 시 선택된 행의 위아래로 이동:

selectedHandlerUpMove() {
    const tempItem = this.selectedFormInfo[0];
    if (this.formListDataSorted[0] !== tempItem) {
        const previousIndex = this.formListDataSorted.findIndex(
        item => tempItem === item) - 1;
        if (this.formListDataSorted[previousIndex]) {
            this.selectedFormInfo = new Array<any>();
            this.selectedFormInfo.push(
            this.formListDataSorted[previousIndex]);
        }
    }
}
selectedHandlerDownMove() {
    const tempItem = this.selectedFormInfo[this.selectedFormInfo.length - 1];
    if (this.formListDataSorted[this.formListDataSorted.length - 1] !== tempItem) {
        const nextIndex = this.formListDataSorted.findIndex(item => tempItem === item) + 1;
        if (this.formListDataSorted[nextIndex]) {
            this.selectedFormInfo = new Array<any>();
            this.selectedFormInfo.push(this.formListDataSorted[nextIndex]);
        }
    }
}

시프트 상하 키를 누르고 처리합니다.그중에 칸막이 다중 선택 상황의 판단이 추가되었다.

private onHandlerUpMove(shiftKey: boolean): void {
    if (this.lastSelectedIndex !== 0) {
        let up = true;
        let selectedItems = [];
        if (shiftKey) {
            this.selectedFormInfo.forEach((item) => {
                selectedItems.push(item);
            });
            const length = this.selectedFormInfo.length;
            if (length > 1) {
                const start = this.selectedFormInfo[0];
                const end = this.selectedFormInfo[length - 1];
                const startIndex = this.formListData.indexOf(start);
                const endIndex = this.formListData.indexOf(end);
                for (let i = 0; i < this.formListData.length; i++) {
                    if (((i > startIndex && i < endIndex) || (i > endIndex && i < startIndex))
                        && this.selectedFormInfo.indexOf(this.formListData[i]) === -1) {
                        selectedItems = [];
                        selectedItems.push(this.formListData[endIndex]);
                        this.lastSelectedIndex = endIndex;
                        break;
                    }
                }
                up = endIndex < startIndex;
            }
            this.lastSelectedIndex -= 1;
            if (selectedItems.length > 1) {
                if (up) {
                    selectedItems.push(this.formListData[this.lastSelectedIndex]);
                } else {
                    selectedItems.pop();
                }
            } else {
                selectedItems.push(this.formListData[this.lastSelectedIndex]);
            }
            this.selectedFormInfo = selectedItems;
        } else {
            this.selectedHandlerUpMove();
        }
    }
}
private onHandlerDownMove(shiftKey: boolean): void {
    if (this.lastSelectedIndex !== this.formListData.length - 1) {
        let down = true;
        let selectedItems = [];
        if (shiftKey) {
            this.selectedFormInfo.forEach((item) => {
                selectedItems.push(item);
            });
            const length = this.selectedFormInfo.length;
            if (length > 1) {
                const start = this.selectedFormInfo[0];
                const end = this.selectedFormInfo[length - 1];
                const startIndex = this.formListData.indexOf(start);
                const endIndex = this.formListData.indexOf(end);
                for (let i = 0; i < this.formListData.length; i++) {
                    if (((i > startIndex && i < endIndex) || (i > endIndex && i < startIndex))
                        && this.selectedFormInfo.indexOf(this.formListData[i]) === -1) {
                        selectedItems = [];
                        selectedItems.push(this.formListData[endIndex]);
                        this.lastSelectedIndex = endIndex;
                        break;
                    }
                }
                down = endIndex > startIndex;
            }
            this.lastSelectedIndex += 1;
            if (selectedItems.length > 1) {
                if (down) {
                    selectedItems.push(this.formListData[this.lastSelectedIndex]);
                } else {
                    selectedItems.pop();
                }
            } else {
                selectedItems.push(this.formListData[this.lastSelectedIndex]);
            }
            this.selectedFormInfo = selectedItems;
        } else {
            this.selectedHandlerDownMove();
        }
    }
}