feat(selection): add selection feature #WIK-16060 #12
Conversation
packages/grid/src/grid.component.ts
Outdated
| effect( | ||
| () => { | ||
| this.aiTable.selection.set(this.aiTableGridSelectionService.selection()); | ||
| console.log('跟新啦', this.aiTable.selection()); |
packages/grid/src/grid.component.ts
Outdated
| ) { | ||
| effect( | ||
| () => { | ||
| this.aiTable.selection.set(this.aiTableGridSelectionService.selection()); |
There was a problem hiding this comment.
aiTableGridSelectionService 中的 selection 和 aiTable.selection 中应该是同一个 signal ，这样就不需要维护两套 signal 数据
packages/grid/src/grid.component.ts
Outdated
| const data = this.gridData().records.map((item) => { | ||
| return { ...item, checked: checked }; | ||
| }); | ||
| this.gridData().records = data; |
There was a problem hiding this comment.
gridData 中的数据应该是只从 buildGridData 中而来，外部不应该有修改它属性的逻辑。
如果是要修改 checked ，当 toggleAllCheckbox 事件触发时 ：
- 应该优先修改 aiTable.selection 中的数据（这里是否需要通过 Actions.xxx 待定，当前在 AITableGridSelectionService 中修改也没问题）
- 同时在 buildGridData 中的数据源中加上 aiTable.selection ，并增加根据 aiTable.selection 计算出 checked 的逻辑
- 当 selection 数据发生变化时，gridData 会自动计算出正确的 checked
packages/grid/src/grid.component.ts
Outdated
|
|
||
| selectCell(recordId: string, fieldId: string) { | ||
| this.toggleAllCheckbox(false); | ||
| this.isSelectedAll = false; |
There was a problem hiding this comment.
这里的 isSelectedAll 最好也是通过 aiTable.selection 计算得到
packages/grid/src/grid.component.ts
Outdated
| import { ThyTag } from 'ngx-tethys/tag'; | ||
| import { ThyPopoverModule } from 'ngx-tethys/popover'; | ||
| import { ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover'; |
packages/grid/src/pipes/grid.ts
Outdated
| @@ -10,3 +10,13 @@ export class SelectOptionPipe implements PipeTransform { | |||
| return options.find((item) => item.id === id); | |||
| } | |||
| } | |||
|
|
|||
| @Pipe({ | |||
| @@ -29,6 +34,116 @@ export class AITableGridEventService { | |||
| .subscribe((event) => { | |||
| this.dblClick(event as MouseEvent); | |||
| }); | |||
|
|
|||
| fromEvent<MouseEvent>(element, 'click') | |||
There was a problem hiding this comment.
这里的逻辑有些奇怪，gridComponent 中已经针对行和列以及单元格的点击事件做处理了，这里又监听了 click 并且再区分点击的是什么，如果用操作 dom 的方式设置高亮在 gridComponent 中就可以实现
There was a problem hiding this comment.
这个可以在 gridComponent 中实现，我觉得 这个高亮方案 不一定行 我心里觉得 ngClass 更好， 我就拆开写了，不行就删除了 ，不会影响我的 gridComponent 文件， gridComponent 文件 的点击事件 都很分散
| this.updateAllClass(cell.element, 'add', (event.target as HTMLInputElement).checked); | ||
| } | ||
|
|
||
| this.lastClickCellElement = event.target as HTMLElement; |
There was a problem hiding this comment.
这里不能直接赋值吧，会出现点击到的不是 cell 的情况
packages/grid/src/grid.component.ts
Outdated
| private aiTableGridFieldService: AITableGridFieldService | ||
| ) {} | ||
|
|
||
| ngOnInit(): void { | ||
| this.initAITable(); | ||
| this.initService(); | ||
| this.buildFieldMenus(); | ||
| this.aiTableGridEventService.mousedownEvent$.subscribe((event) => { |
There was a problem hiding this comment.
- dom 中的事件监听使用 ngZone.runOutsideAngular 包一下，可以减少变化监测的次数
- 取消订阅
packages/grid/src/grid.component.ts
Outdated
| @@ -129,6 +143,14 @@ export class AITableGrid implements OnInit { | |||
| Actions.addRecord(this.aiTable, getDefaultRecord(this.aiFields()), [this.aiRecords().length]); | |||
| } | |||
|
|
|||
| selectRow(recordId: string) { | |||
There was a problem hiding this comment.
行和列统一使用 record 和 field ，其他地方也一并改下吧
packages/grid/src/styles/styles.scss
Outdated
| &.highlight { | ||
| background: variables.$secondary-item-active; | ||
| } | ||
| &.isSelected { |
packages/grid/src/styles/styles.scss
Outdated
| @@ -9,6 +9,9 @@ | |||
|
|
|||
| .grid-header { | |||
| border-top: 1px solid variables.$gray-200; | |||
| .grid-column-field { | |||
| justify-content: left; | |||
There was a problem hiding this comment.
样式不对，左右应该都是有间距的，内容也是靠左显示
| fromEvent<MouseEvent>(element, 'click') | ||
| .pipe(this.takeUntilDestroyed) | ||
| .subscribe((event) => { | ||
| this.mousedownEvent$.next(event as MouseEvent); |
There was a problem hiding this comment.
click 中的不应该是 mousedownEvent
| } | ||
|
|
||
| updateSelect(event: MouseEvent) { | ||
| const cell = this.cellType(event.target as HTMLElement); |
There was a problem hiding this comment.
这个 cellType 名字不太合适，里面有 field 相关的代码，感觉可以移除了， 把里面逻辑直接写在这个函数里
No description provided.