diff --git a/packages/vtable/examples/list/list-rowSeriesNumber-cornerHeaderSelectMode.ts b/packages/vtable/examples/list/list-rowSeriesNumber-cornerHeaderSelectMode.ts new file mode 100644 index 0000000000..6db59b695b --- /dev/null +++ b/packages/vtable/examples/list/list-rowSeriesNumber-cornerHeaderSelectMode.ts @@ -0,0 +1,111 @@ +import * as VTable from '../../src'; +import { bindDebugTool } from '../../src/scenegraph/debug-tool'; +const CONTAINER_ID = 'vTable'; +const generatePersons = count => { + return Array.from(new Array(count)).map((_, i) => ({ + id: i + 1, + email1: `${i + 1}@xxx.com`, + name: `小明${i + 1}`, + lastName: '王', + date1: '2022年9月1日', + tel: '000-0000-0000', + sex: i % 2 === 0 ? 'boy' : 'girl', + work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer', + city: 'beijing' + })); +}; + +export function createTable() { + const records = generatePersons(20); + const columns: VTable.ColumnsDefine = [ + { + field: 'id', + title: 'ID', + width: '1%', + minWidth: 200, + sort: true + }, + { + field: 'email1', + title: 'email', + width: 200, + sort: true + }, + { + title: 'full name', + columns: [ + { + field: 'name', + title: 'First Name', + width: 200 + }, + { + field: 'name', + title: 'Last Name', + width: 200 + } + ] + }, + + { + field: 'tel', + title: 'telephone', + width: 150 + }, + { + field: 'work', + title: 'job', + width: 200 + }, + { + field: 'city', + title: 'city', + width: 150 + } + ]; + const option: VTable.ListTableConstructorOptions = { + container: document.getElementById(CONTAINER_ID), + records, + columns, + tooltip: { + isShowOverflowTextTooltip: true + }, + pagination: { + perPageCount: 10, + currentPage: 0 + }, + rowSeriesNumber: { + title: '行号', + dragOrder: true, + headerStyle: { + bgColor: '#EEF1F5', + borderColor: '#e1e4e8' + }, + style: { + borderColor: '#e1e4e8' + } + }, + select: { + // headerSelectMode: 'body', + cornerHeaderSelectMode: 'cell' + } + // bottomFrozenRowCount: 1 + // autoWrapText: true, + // heightMode: 'autoHeight', + // widthMode: 'adaptive' + }; + const tableInstance = new VTable.ListTable(option); + window.tableInstance = tableInstance; + + // bindDebugTool(tableInstance.scenegraph.stage, { customGrapicKeys: ['col', 'row'] }); + // tableInstance.on('sort_click', args => { + // tableInstance.updateSortState( + // { + // field: args.field, + // order: Date.now() % 3 === 0 ? 'desc' : Date.now() % 3 === 1 ? 'asc' : 'normal' + // }, + // false + // ); + // return false; //return false代表不执行内部排序逻辑 + // }); +} diff --git a/packages/vtable/examples/menu.ts b/packages/vtable/examples/menu.ts index 547ff6ede7..88c4060648 100644 --- a/packages/vtable/examples/menu.ts +++ b/packages/vtable/examples/menu.ts @@ -111,6 +111,10 @@ export const menus = [ path: 'list', name: 'list-rowSeriesNumber' }, + { + path: 'list', + name: 'list-rowSeriesNumber-cornerHeaderSelectMode' + }, { path: 'list', name: 'list-transpose-rowSeriesNumber' diff --git a/packages/vtable/examples/pivot/pivot-grid-tree-select-cornerHeaderSelectMode.ts b/packages/vtable/examples/pivot/pivot-grid-tree-select-cornerHeaderSelectMode.ts index e7521b6681..690af47a8d 100644 --- a/packages/vtable/examples/pivot/pivot-grid-tree-select-cornerHeaderSelectMode.ts +++ b/packages/vtable/examples/pivot/pivot-grid-tree-select-cornerHeaderSelectMode.ts @@ -341,7 +341,7 @@ export function createTable() { }, select: { headerSelectMode: 'body', // 为 body 时,优先选中body - cornerHeaderSelectMode: 'all' // 默认选中整个图表 + cornerHeaderSelectMode: 'cell' // 默认选中整个图表 }, dataConfig: { totals: { @@ -361,6 +361,17 @@ export function createTable() { // } } }, + rowSeriesNumber: { + title: '行号', + dragOrder: true, + headerStyle: { + bgColor: '#EEF1F5', + borderColor: '#e1e4e8' + }, + style: { + borderColor: '#e1e4e8' + } + }, heightMode: 'autoHeight', defaultHeaderColWidth: 100, autoWrapText: true, diff --git a/packages/vtable/src/state/select/update-position.ts b/packages/vtable/src/state/select/update-position.ts index 03429842ae..6dda85c6df 100644 --- a/packages/vtable/src/state/select/update-position.ts +++ b/packages/vtable/src/state/select/update-position.ts @@ -174,6 +174,7 @@ export function updateSelectPosition( state.select.ranges = []; scenegraph.deleteAllSelectBorder(); } + if (state.select.headerSelectMode !== 'cell' && table.isColumnHeader(col, row)) { // 选中行表头 const cellRange = table.getCellRange(col, row); @@ -210,7 +211,8 @@ export function updateSelectPosition( // 选中表头行号单元格 extendSelectRange = false; - if (state.select.headerSelectMode === 'body') { + const { cornerHeaderSelectMode } = state.select; + if (cornerHeaderSelectMode === 'body') { state.select.ranges.push({ start: { col: table.leftRowSeriesNumberCount, @@ -219,6 +221,22 @@ export function updateSelectPosition( end: { col: table.colCount - 1, row: table.rowCount - 1 }, skipBodyMerge: true }); + } else if (cornerHeaderSelectMode === 'inline') { + // inline 选中行号所在单元格下所有列 + const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row); + state.select.ranges.push({ + start: { col: cellRange.start.col, row: cellRange.start.row }, + end: { col: cellRange.end.col, row: table.rowCount - 1 }, + skipBodyMerge: true + }); + } else if (cornerHeaderSelectMode === 'cell') { + // 选中行号单元格 + const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row); + state.select.ranges.push({ + start: { col: cellRange.start.col, row: cellRange.start.row }, + end: { col: cellRange.end.col, row: cellRange.end.row }, + skipBodyMerge: skipBodyMerge || undefined + }); } else { state.select.ranges.push({ start: { col: 0, row: 0 }, @@ -226,6 +244,23 @@ export function updateSelectPosition( skipBodyMerge: true }); } + // 旧逻辑 + // if (state.select.headerSelectMode === 'body') { + // state.select.ranges.push({ + // start: { + // col: table.leftRowSeriesNumberCount, + // row: table.columnHeaderLevelCount + // }, + // end: { col: table.colCount - 1, row: table.rowCount - 1 }, + // skipBodyMerge: true + // }); + // } else { + // state.select.ranges.push({ + // start: { col: 0, row: 0 }, + // end: { col: table.colCount - 1, row: table.rowCount - 1 }, + // skipBodyMerge: true + // }); + // } } else if ((table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInBody(col, row)) { // 选中内容行号单元格 extendSelectRange = false; @@ -249,7 +284,8 @@ export function updateSelectPosition( // 选中表头行号单元格 extendSelectRange = false; const { cornerHeaderSelectMode } = state.select; - if (state.select.headerSelectMode === 'body' || cornerHeaderSelectMode === 'body') { + + if (cornerHeaderSelectMode === 'body') { state.select.ranges.push({ start: { col: table.rowHeaderLevelCount + table.leftRowSeriesNumberCount, @@ -258,40 +294,41 @@ export function updateSelectPosition( end: { col: table.colCount - 1, row: table.rowCount - 1 }, skipBodyMerge: true }); + } else if (cornerHeaderSelectMode === 'cell') { + // 选中普通单元格 + const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row); + state.select.ranges.push({ + start: { col: cellRange.start.col, row: cellRange.start.row }, + end: { col: cellRange.end.col, row: cellRange.end.row }, + skipBodyMerge: skipBodyMerge || undefined + }); + } else if (cornerHeaderSelectMode === 'inline') { + // inline + const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row); + state.select.ranges.push({ + start: { col: cellRange.start.col, row: cellRange.start.row }, + end: { col: cellRange.end.col, row: table.rowCount - 1 }, + skipBodyMerge: true + }); + } else if (cornerHeaderSelectMode === 'all') { + // all 或者用户传的其他的什么值 :'' | 'test',虽然类型会提示用户不能为其他的值, + state.select.ranges.push({ + start: { + col: table.leftRowSeriesNumberCount, + row: 0 + }, + end: { col: table.colCount - 1, row: table.rowCount - 1 }, + skipBodyMerge: true + }); } else { - if (cornerHeaderSelectMode === 'cell') { - // 选中普通单元格 - const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row); - state.select.ranges.push({ - start: { col: cellRange.start.col, row: cellRange.start.row }, - end: { col: cellRange.end.col, row: cellRange.end.row }, - skipBodyMerge: skipBodyMerge || undefined - }); - } else if (cornerHeaderSelectMode === 'inline') { - // inline - const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row); - state.select.ranges.push({ - start: { col: cellRange.start.col, row: cellRange.start.row }, - end: { col: cellRange.end.col, row: table.rowCount - 1 }, - skipBodyMerge: true - }); - } else { - // all 或者用户传的其他的什么值 :'' | 'test',虽然类型会提示用户不能为其他的值, - state.select.ranges.push({ - start: { - col: table.leftRowSeriesNumberCount, - row: 0 - }, - end: { col: table.colCount - 1, row: table.rowCount - 1 }, - skipBodyMerge: true - }); - } - // 选中全部 - // state.select.ranges.push({ - // start: { col: table.leftRowSeriesNumberCount, row: 0 }, - // end: { col: table.colCount - 1, row: table.rowCount - 1 }, - // skipBodyMerge: true - // }); + state.select.ranges.push({ + start: { + col: table.leftRowSeriesNumberCount, + row: 0 + }, + end: { col: table.colCount - 1, row: table.rowCount - 1 }, + skipBodyMerge: true + }); } } else if (col >= 0 && row >= 0) { // 选中普通单元格 diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index c71c307610..228b7cae4a 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -441,7 +441,6 @@ export class StateManager { // enableColumnHighlight, /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格,默认或整行或整列选中*/ headerSelectMode, - cornerHeaderSelectMode, disableSelect, disableHeaderSelect, highlightMode, @@ -451,7 +450,8 @@ export class StateManager { { /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格,默认或整行或整列选中*/ headerSelectMode: 'inline', - cornerHeaderSelectMode: 'all', // 点击 corner 默认选中整个图表 + /** 不默认设置该值了,从用户传的 cornerHeaderSelectMode 中获取 */ + // cornerHeaderSelectMode: '', disableSelect: false, disableHeaderSelect: false, highlightMode: 'cell', @@ -460,6 +460,13 @@ export class StateManager { this.table.options.select ); + /** 设置 cornerHeaderSelectMode */ + const cornerHeaderSelectMode = this.table.options.select?.cornerHeaderSelectMode + ? this.table.options.select?.cornerHeaderSelectMode + : this.table.options.select?.headerSelectMode === 'body' + ? this.table.options.select?.headerSelectMode + : 'all'; + // if (enableRowHighlight && enableColumnHighlight) { // this.select.highlightScope = HighlightScope.cross; // } else if (enableRowHighlight) {