PrimeNG p-Table 自定义shift多选功能

PrimeNG p-Table 自定义shift多选功能

  • 1) 需求:
  • 2) 思路:
  • 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]);
        }
    }
}

按住shift上下键的处理。其中,添加了隔行多选情况的判断。

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();
        }
    }
}

你可能感兴趣的:(前端JS)