Rango y selección y celda
Vaya a la sección correspondiente a su tarea. Las operaciones básicas, los ejemplos avanzados, la configuración y la solución de problemas se mantienen en esta página; los contratos API completos se mantienen en Reference.
- Rango
- Selección
- Operaciones avanzadas con rangos
- Navegación en los bordes de la hoja
- Eventos y edición de celdas
- Solución de problemas de edición
Rango
Un rango se refiere a un área rectangular en una hoja de cálculo, determinada por el número de fila inicial, el número de columna inicial, el largo y el ancho, o el número de fila final y el número de columna final.
La mayoría de las operaciones en una hoja de cálculo se pueden realizar a través de la API de rango, como establecer valores, obtener valores, configurar estilos, obtener estilos, etc.
Para obtener una definición completa de la API de fachada relacionada con el rango, consulte FRange FacadeAPI
Crear un rango
Para obtener un rango, necesita saber el número de fila inicial, el número de columna inicial, la longitud y ancho.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Create a range of A1 cell:const fRange = fWorksheet.getRange(0, 0)console.log(fRange, fRange.getA1Notation())// Creates a range of A1:B2:const fRange2 = fWorksheet.getRange(0, 0, 2, 2)console.log(fRange2, fRange2.getA1Notation())const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Get the A1:B2 range on named Sheet1const fRange1 = fWorksheet.getRange('Sheet1!A1:B2')console.log(fRange1, fRange1.getA1Notation())// Get a single cell A1const fRange2 = fWorksheet.getRange('A1')console.log(fRange2, fRange2.getA1Notation())// Get the A1:B2 rangeconst fRange3 = fWorksheet.getRange('A1:B2')console.log(fRange3, fRange3.getA1Notation())// Get the range of column Aconst fRange4 = fWorksheet.getRange('A:A')console.log(fRange4, fRange4.getA1Notation())// Get the range of row 1const fRange5 = fWorksheet.getRange('1:1')console.log(fRange5, fRange5.getA1Notation())Obtener datos de rango
Obtener el valor de la primera celda del rango
const fWorkbook = univerAPI.getActiveWorkbook()if (!fWorkbook) throw new Error('No active workbook')const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:B2')console.log(fRange.getValue()) // The value of the top-left cell in the rangeconsole.log(fRange.getRawValue()) // The raw value of the top-left cell in the rangeconsole.log(fRange.getDisplayValue()) // The displayed value of the top-left cell in the rangeconsole.log(fRange.getCellData()) // The cell data of the top-left cell in the rangeconst value = fRange.getValue(true)console.log(value)if (value !== null && typeof value === 'object') { console.log(value.toPlainText())}Use getValue(true) para conservar el texto enriquecido. Las celdas vacías devuelven null / undefined; las demás devuelven cadenas, números o booleanos. Llame a toPlainText() solo en un objeto de texto enriquecido.
Obtener todos los valores de celda del rango
const fWorkbook = univerAPI.getActiveWorkbook()if (!fWorkbook) throw new Error('No active workbook')const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:B2')console.log(fRange.getValues()) // The values of all cells in the rangeconsole.log(fRange.getRawValues()) // The raw values of all cells in the rangeconsole.log(fRange.getDisplayValues()) // The displayed values of all cells in the rangeconsole.log(fRange.getCellDataGrid()) // The cell data of all cells in the rangeconsole.log(fRange.getValues(true))Obtener todas las fórmulas del rango
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:B2')console.log(fRange.getFormula()) // The formula of the top-left cell in the rangeconsole.log(fRange.getFormulas()) // The formulas of all cells in the rangeEstablecer valor de rango
Establecer un valor único
Si se pasa un valor o un objeto de celda, se sobrescribirán todas las celdas del rango. Si comienza con =, se interpretará como una fórmula.
Por ejemplo, para establecer el valor de A1:B2 en Hello, Univer:
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:B2')fRange.setValue('Hello, Univer')Establezca C1 en =A1+B1 para separar el resultado de las celdas de entrada:
const fWorkbook = univerAPI.getActiveWorkbook()if (!fWorkbook) throw new Error('No active workbook')const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('C1')fRange.setValue('=A1+B1')Establezca el valor de A1:B2 en el objeto de celda:
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:B2')fRange.setValue({ v: 'Hello, Univer', custom: { key: 'value', },})Si solo desea establecer el valor de la celda superior izquierda en el rango, puede usar el método FRange.setValueForCell:
fRange.setValueForCell('Hello, Univer')Establezca múltiples valores con una matriz
La longitud y el ancho de la matriz deben coincidir con la longitud y el ancho del rango.
Puede pasar valores de celda u objetos de celda.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:B2')fRange.setValues([ ['A1', 'B1'], ['A2', 'B2'],])fRange.setValues([ [{ v: 'A1' }, { v: 'B1' }], [{ v: 'A2' }, { v: 'B2' }],])Establezca múltiples valores con un objeto
Si se pasa un objeto, el índice principal del objeto representa la fila número, y el índice secundario representa el número de columna, y la longitud y el ancho del rango no necesitan coincidir.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:B2')fRange.setValues({ 0: { 0: 'A1', 1: 'B1', }, 1: { 0: 'A2', 1: 'B2', },})Borrar datos del rango
- El método
FRange.clearpuede borrar el contenido y la información de formato del rango. - El método
FRange.clearContentpuede borrar la información de contenido del range. - El método
FRange.clearFormatpuede borrar la información de formato del rango.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorkSheet = fWorkbook.getActiveSheet()const fRange = fWorkSheet.getRange('A1:D10')// Clears content and formatting information of the range.fRange.clear()Obtener estilo de rango
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:B2')console.log(fRange.getCellStyleData()) // The style data of the top-left cell in the rangeconsole.log(fRange.getCellStyle()) // The style of the top-left cell in the rangeconsole.log(fRange.getCellStyles()) // The styles of all cells in the rangeEstablecer estilo de rango
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:B2')fRange .setValues([ [1, 2], [3, 4], ]) .setFontWeight('bold') .setFontLine('underline') .setFontFamily('Arial') .setFontSize(24) .setFontColor('red')Borrar estilo de rango
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:B2')fRange.setFontWeight(null).setFontLine(null).setFontFamily(null).setFontSize(null).setFontColor(null)Selección
Univer Sheets admite múltiples distritos, por lo que un distrito es una matriz de rangos y puede manipular los datos de los distritos a través de la API de rango.
También proporcionamos API para obtener la selección actual, configurar la selección y escuchar cambios en la selección.
Para obtener una definición completa de la API de fachada relacionada con la selección, consulte FSelection FacadeAPI
Obtener selección activa
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Activate the new selection of A1:B2const fRange = fWorksheet.getRange('A1:B2')fRange.activate()// Get the current active selectionconst fSelection = fWorksheet.getSelection()console.log(fSelection)const activeRange = fSelection.getActiveRange()console.log(activeRange.getA1Notation()) // A1:B2Establecer selección
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Set the selection to A1:B2 by FRangeconst fRange = fWorksheet.getRange('A1:B2')fRange.activate()// Set the selection to C1:D2 by FWorksheetfWorksheet.setActiveSelection(fWorksheet.getRange('C1:D2'))Obtener celda actual
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Activate the new selection of A10:B11const fRange = fWorksheet.getRange('A10:B11')fRange.activate()// Get the current active celllet fSelection = fWorksheet.getSelection()const { actualRow, actualColumn } = fSelection.getCurrentCell()console.log(fWorksheet.getRange(actualRow, actualColumn).getA1Notation()) // A10// Update the new active cell to B11fSelection = fSelection.updatePrimaryCell(fWorksheet.getRange('B11'))const { actualRow: newRow, actualColumn: newColumn } = fSelection.getCurrentCell()console.log(fWorksheet.getRange(newRow, newColumn).getA1Notation()) // B11Desactivar/Activar/Ocultar/Mostrar Selección
Cuando está deshabilitada, la selección deja de responder. transparentSelection hace que la selección sea invisible; a diferencia de disableSelection, la selección aún funciona; simplemente no puedes verlo.
const fWorkbook = univerAPI.getActiveWorkbook()// Disable selectionfWorkbook.disableSelection()// Enable selectionfWorkbook.enableSelection()// Hide selectionfWorkbook.transparentSelection()// Show selectionfWorkbook.showSelection()Escuche los cambios de selección
univerAPI.addEvent(univerAPI.Event.SelectionChanged, (params) => { const { worksheet, workbook, selections } = params console.log(params)})Celda
Los datos de la celda se almacenan en la hoja de trabajo como un mapa bidimensional, con el primer y segundo índice representando el número de fila y el número de columna respectivamente.
El siguiente es un objeto de celda típico:
const data = { v: 'Hello, Univer', s: 'styleId', t: CellValueType.STRING,}Para descripciones detalladas de los campos, consulte [Configurar celda] Datos](/guides/sheets/model/cell-data).
Es bueno saberlo
- Las operaciones de celda se pueden considerar como operaciones en un rango de filas y columnas con una altura de 1 y un ancho de 1. Para conocer el rango de operación, consulte Rango.
- El complemento API de Univer también almacenará los atributos de celda extendidos en el
resourcespropiedad deWorkbook, consulte Modelo personalizado del complemento.
Operaciones avanzadas con rangos
Insertar celdas
El método FRange.insertCells puede insertar celdas vacías en este rango. Los datos existentes en la hoja a lo largo de la dimensión proporcionada se alejan del rango insertado.
// Assume the active sheet empty sheet.const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const values = [ [1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8],]// Set the range A1:D5 with some values, the range A1:D5 will be:// 1 | 2 | 3 | 4// 2 | 3 | 4 | 5// 3 | 4 | 5 | 6// 4 | 5 | 6 | 7// 5 | 6 | 7 | 8const fRange = fWorksheet.getRange('A1:D5')fRange.setValues(values)console.log(fWorksheet.getRange('A1:D5').getValues()) // [[1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8]]// Insert the empty cells into the range A1:B2 along the columns dimension, the range A1:D5 will be:// | | 1 | 2// | | 2 | 3// 3 | 4 | 5 | 6// 4 | 5 | 6 | 7// 5 | 6 | 7 | 8const fRange2 = fWorksheet.getRange('A1:B2')fRange2.insertCells(univerAPI.Enum.Dimension.COLUMNS)console.log(fWorksheet.getRange('A1:D5').getValues()) // [[null, null, 1, 2], [null, null, 2, 3], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8]]// Set the range A1:D5 values again, the range A1:D5 will be:// 1 | 2 | 3 | 4// 2 | 3 | 4 | 5// 3 | 4 | 5 | 6// 4 | 5 | 6 | 7// 5 | 6 | 7 | 8fRange.setValues(values)// Insert the empty cells into the range A1:B2 along the rows dimension, the range A1:D5 will be:// | | 3 | 4// | | 4 | 5// 1 | 2 | 5 | 6// 2 | 3 | 6 | 7// 3 | 4 | 7 | 8const fRange3 = fWorksheet.getRange('A1:B2')fRange3.insertCells(univerAPI.Enum.Dimension.ROWS)console.log(fWorksheet.getRange('A1:D5').getValues()) // [[null, null, 3, 4], [null, null, 4, 5], [1, 2, 5, 6], [2, 3, 6, 7], [3, 4, 7, 8]]Eliminar celdas
El método FRange.deleteCells puede eliminar este rango de celdas. Los datos existentes en la hoja a lo largo de la dimensión proporcionada se desplazan hacia el rango eliminado.
// Assume the active sheet empty sheet.const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const values = [ [1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8],]// Set the range A1:D5 with some values, the range A1:D5 will be:// 1 | 2 | 3 | 4// 2 | 3 | 4 | 5// 3 | 4 | 5 | 6// 4 | 5 | 6 | 7// 5 | 6 | 7 | 8const fRange = fWorksheet.getRange('A1:D5')fRange.setValues(values)console.log(fWorksheet.getRange('A1:D5').getValues()) // [[1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8]]// Delete the range A1:B2 along the columns dimension, the range A1:D5 will be:// 3 | 4 | |// 4 | 5 | |// 3 | 4 | 5 | 6// 4 | 5 | 6 | 7// 5 | 6 | 7 | 8const fRange2 = fWorksheet.getRange('A1:B2')fRange2.deleteCells(univerAPI.Enum.Dimension.COLUMNS)console.log(fWorksheet.getRange('A1:D5').getValues()) // [[3, 4, null, null], [4, 5, null, null], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8]]// Set the range A1:D5 values again, the range A1:D5 will be:// 1 | 2 | 3 | 4// 2 | 3 | 4 | 5// 3 | 4 | 5 | 6// 4 | 5 | 6 | 7// 5 | 6 | 7 | 8fRange.setValues(values)// Delete the range A1:B2 along the rows dimension, the range A1:D5 will be:// 3 | 4 | 3 | 4// 4 | 5 | 4 | 5// 5 | 6 | 5 | 6// | | 6 | 7// | | 7 | 8const fRange3 = fWorksheet.getRange('A1:B2')fRange3.deleteCells(univerAPI.Enum.Dimension.ROWS)console.log(fWorksheet.getRange('A1:D5').getValues()) // [[3, 4, 3, 4], [4, 5, 4, 5], [5, 6, 5, 6], [null, null, 6, 7], [null, null, 7, 8]]Fusionar celdas
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Merge B1:B2const fRange = fWorksheet.getRange('B1:B2')fRange.merge()console.log(fRange.isMerged()) // true// A1:B2 is mergedconst fRange2 = fWorksheet.getRange('A1:B2')console.log(fRange2.isMerged()) // falseconsole.log(fRange2.isPartOfMerge()) // true// Break apart the merged rangefRange2.breakApart()// merge horizontally: fRange2.mergeAcross();// merge vertically: fRange2.mergeVertically();// Get all merged ranges in the worksheet: fWorksheet.getMergedRanges();Resaltar rango
El método FRange.highlight puede resaltar el rango con el estilo y la celda principal especificados.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Highlight the range C3:E5 with default styleconst fRange = fWorksheet.getRange('C3:E5')fRange.highlight()// Highlight the range C7:E9 with custom style and primary cell D8const fRange2 = fWorksheet.getRange('C7:E9')const primaryCell = fWorksheet.getRange('D8').getRange()const disposable = fRange2.highlight( { stroke: 'red', fill: 'yellow', }, { ...primaryCell, actualRow: primaryCell.startRow, actualColumn: primaryCell.startColumn, },)// Remove the range C7:E9 highlight after 5 secondssetTimeout(() => { disposable.dispose()}, 5000)Dividir el texto en columnas
El método FRange.splitTextToColumns puede dividir el texto del rango en columnas según el delimitador especificado.
Ejemplo de delimitador predeterminado:
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// A1:A3 has following values:// A |// 1,2,3 |// 4,,5,6 |const fRange = fWorksheet.getRange('A1:A3')fRange.setValues([['A'], ['1,2,3'], ['4,,5,6']])// After calling splitTextToColumns(true), the range will be:// A | |// 1 | 2 | 3// 4 | 5 | 6fRange.splitTextToColumns(true)// After calling splitTextToColumns(false), the range will be:// A | | |// 1 | 2 | 3 |// 4 | | 5 | 6fRange.splitTextToColumns(false)Ejemplo de delimitador especificado:
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// A1:A3 has following values:// A |// 1;;2;3 |// 1;,2;3 |const fRange = fWorksheet.getRange('A1:A3')fRange.setValues([['A'], ['1;;2;3'], ['1;,2;3']])// After calling splitTextToColumns(false, univerAPI.Enum.SplitDelimiterType.Semicolon|univerAPI.Enum.SplitDelimiterType.Comma), the range will be:// A | | |// 1 | | 2 | 3// 1 | | 2 | 3fRange.splitTextToColumns(false, univerAPI.Enum.SplitDelimiterType.Semicolon | univerAPI.Enum.SplitDelimiterType.Comma)// After calling splitTextToColumns(true, univerAPI.Enum.SplitDelimiterType.Semicolon|univerAPI.Enum.SplitDelimiterType.Comma), the range will be:// A | |// 1 | 2 | 3// 1 | 2 | 3fRange.splitTextToColumns(true, univerAPI.Enum.SplitDelimiterType.Semicolon | univerAPI.Enum.SplitDelimiterType.Comma)Ejemplo de delimitador personalizado:
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// A1:A3 has following values:// A |// 1#2#3 |// 4##5#6 |const fRange = fWorksheet.getRange('A1:A3')fRange.setValues([['A'], ['1#2#3'], ['4##5#6']])// After calling splitTextToColumns(false, univerAPI.Enum.SplitDelimiterType.Custom, '#'), the range will be:// A | | |// 1 | 2 | 3 |// 4 | | 5 | 6fRange.splitTextToColumns(false, univerAPI.Enum.SplitDelimiterType.Custom, '#')// After calling splitTextToColumns(true, univerAPI.Enum.SplitDelimiterType.Custom, '#'), the range will be:// A | |// 1 | 2 | 3// 4 | 5 | 6fRange.splitTextToColumns(true, univerAPI.Enum.SplitDelimiterType.Custom, '#')Obtener las coordenadas del rango
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:B2')console.log(fRange.getCellRect()) // width、heigh、left、right、top、bottom、x、yObtener la información de combinación y coordenadas del rango al mismo tiempo
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:B2')console.log(fRange.getCell())Navegación en los bordes de la hoja
allowArrowKeyWrapOnSheetBoundary controla si las flechas pueden continuar en otra fila o columna al llegar al borde de la hoja. Su valor predeterminado es true; con false, se detienen en el borde. No afecta al recorrido con Intro/Tab dentro de una selección. En modo preset se configura bajo sheets; en modo plugin se pasa directamente a UniverSheetsUIPlugin.
univer.registerPlugin(UniverSheetsUIPlugin, { allowArrowKeyWrapOnSheetBoundary: false,})createUniver({ presets: [ UniverSheetsCorePreset({ sheets: { allowArrowKeyWrapOnSheetBoundary: false, }, }), ],})Eventos y edición de celdas
Los ejemplos cubren el puntero, el renderizado, la edición y el portapapeles. Consulte Events Reference para ver todos los eventos y tipos de parámetros. En modo de complemento, importe @univerjs/sheets-ui/facade antes de suscribirse; el preset Sheets Core ya lo incluye. Libere las suscripciones al retirar el componente o la página.
Ejemplo de uso
Todos los eventos se pueden escuchar usando el Método addEvent. El formato básico es:
import '@univerjs/sheets-ui/facade'const subscription = univerAPI.addEvent(univerAPI.Event.CellClicked, ({ row, column }) => { console.log(row, column)})// Call subscription.dispose() when the owning component or page is removed.Evento Cell PointerMove
El evento CellPointerMove se activa cuando el mouse se mueve sobre una celda. Este evento proporciona información sobre la celda que se encuentra actualmente debajo del puntero del mouse.
univerAPI.addEvent(univerAPI.Event.CellPointerMove, (params) => { // Get event parameters const { worksheet, workbook, row, column } = params console.log('Current cell position:', worksheet.getRange(row, column).getA1Notation())})Evento Cell PointerDown
El evento CellPointerDown se activa cuando se presiona el botón del mouse en una celda.
univerAPI.addEvent(univerAPI.Event.CellPointerDown, (params) => { const { worksheet, workbook, row, column } = params console.log('Mouse down cell:', worksheet.getRange(row, column).getA1Notation())})Evento Cell PointerUp
El evento CellPointerUp se activa cuando se suelta el botón del mouse en una celda.
univerAPI.addEvent(univerAPI.Event.CellPointerUp, (params) => { const { worksheet, workbook, row, column } = params console.log('Mouse up cell:', worksheet.getRange(row, column).getA1Notation())})Cell Hover Evento
El evento CellHover se activa cuando el mouse pasa sobre una celda.
univerAPI.addEvent(univerAPI.Event.CellHover, (params) => { const { worksheet, workbook, row, column } = params console.log('Hovered cell:', worksheet.getRange(row, column).getA1Notation())})Evento Cell DragOver
El evento DragOver se activa cuando se arrastra un elemento sobre una celda.
univerAPI.addEvent(univerAPI.Event.DragOver, (params) => { const { worksheet, workbook, row, column } = params console.log('Drag over cell:', worksheet.getRange(row, column).getA1Notation())})Evento de caída de celda
El evento Drop se activa cuando se suelta un elemento en una celda celda.
univerAPI.addEvent(univerAPI.Event.Drop, (params) => { const { worksheet, workbook, row, column } = params console.log('Drop target cell:', worksheet.getRange(row, column).getA1Notation())})Evento de clic en celda
El evento CellClicked se activa cuando se hace clic en una celda.
univerAPI.addEvent(univerAPI.Event.CellClicked, (params) => { const { worksheet, workbook, row, column } = params console.log('Clicked cell:', worksheet.getRange(row, column).getA1Notation())})Evento de renderizado de celda
registerCellCustomRender registra renderizadores personalizados para las celdas.
Ejemplo 1: renderizado de posición fija: las adiciones de filas no afectarán el renderizado position
// Fixed position renderinguniverAPI.registerCellCustomRender([ { drawWith: (ctx, info, skeleton, spreadsheets) => { const { row, col } = info // Render a checkmark at position (1,1) if (row === 1 && col === 1) { const { primaryWithCoord } = info const { startX, startY } = primaryWithCoord ctx.fillText('✅', startX, startY + 10) } }, },])// Refresh canvas to apply renderinguniverAPI.getActiveWorkbook().getActiveSheet().refreshCanvas()Ejemplo 2: renderizado basado en marcadores: renderiza cambios de posición con cambios de fila/columna
// Set markeruniverAPI .getActiveWorkbook() .getActiveSheet() .getRange('B2') .setValue({ custom: { key: 'needCheck' } })// Render based on markeruniverAPI.registerCellCustomRender([ { drawWith: (ctx, info, skeleton, spreadsheets) => { const { row, col, data } = info // Render checkmark at marked position if (data?.custom?.key === 'needCheck') { const { primaryWithCoord } = info const { startX, startY } = primaryWithCoord ctx.fillText('✅', startX, startY + 10) } }, },])// Refresh canvas to apply renderinguniverAPI.getActiveWorkbook().getActiveSheet().refreshCanvas()Eventos de edición de celda
Iniciar edición
const fWorkbook = univerAPI.getActiveWorkbook()fWorkbook.startEditing()Finalizar edición
// Pass true to commit changes, false to cancel editing// This is an async function, requires awaitconst fWorkbook = univerAPI.getActiveWorkbook()await fWorkbook.endEditingAsync(true)Evento de inicio de edición
El evento BeforeSheetEditStart se activa antes de que comience la edición de celda.
univerAPI.addEvent(univerAPI.Event.BeforeSheetEditStart, (params) => { const { worksheet, workbook, row, column, eventType, keycode } = params console.log('Before cell edit:', params) // If you want to prevent entering the editing state params.cancel = true})El evento SheetEditStarted es se activa cuando comienza la edición de celda.
const disposable = univerAPI.addEvent(univerAPI.Event.SheetEditStarted, (params) => { const { worksheet, workbook, row, column, eventType, keycode } = params console.log(params)})// Remove the event listener, use `disposable.dispose()`Evento de finalización de edición
El evento BeforeSheetEditEnd se activa antes de que finalice la edición de celda.
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetEditEnd, (params) => { const { worksheet, workbook, row, column, value, eventType, keycode, isConfirm } = params console.log(params) // Cancel the cell edit end operation params.cancel = true})// Remove the event listener, use `disposable.dispose()`El evento SheetEditEnded se activa después de que finaliza la edición de la celda.
univerAPI.addEvent(univerAPI.Event.SheetEditEnded, (params) => { const { worksheet, workbook, row, column, eventType, keycode, isConfirm } = params console.log('After cell edit:', params)})Eventos del portapapeles
Antes del cambio del portapapeles
El evento BeforeClipboardChange se activa antes de que cambie el contenido del portapapeles. Puede utilizar este evento para monitorear o modificar el contenido del portapapeles antes de que cambie.
univerAPI.addEvent(univerAPI.Event.BeforeClipboardChange, (params) => { const { text, html } = params console.log('Clipboard content:', text, html) // If you want to cancel the clipboard change // params.cancel = true;})BeforeClipboardPaste
El evento BeforeClipboardPaste se activa antes de pegar el contenido. Puede utilizar este evento para monitorear o modificar el contenido antes de pegarlo.
univerAPI.addEvent(univerAPI.Event.BeforeClipboardPaste, (params) => { const { text, html } = params console.log('Content to paste:', text, html) // If you want to cancel the paste operation // params.cancel = true;})ClipboardChanged
El evento ClipboardChanged se activa después de que el contenido del portapapeles haya cambiado.
univerAPI.addEvent(univerAPI.Event.ClipboardChanged, (params) => { const { text, html } = params console.log('New clipboard content:', text, html)})ClipboardPasted
El evento ClipboardPasted se activa después de que se haya pegado el contenido.
univerAPI.addEvent(univerAPI.Event.ClipboardPasted, (params) => { const { text, html } = params console.log('Pasted content:', text, html)})Solución de problemas de edición
Cómo ¿Cómo obtener los datos en el editor de celdas en tiempo real?
Suscríbase a SheetEditChanging para leer el texto enriquecido durante la edición. El valor permanece en el editor y se confirma en la hoja al finalizar la edición.
import '@univerjs/sheets-ui/facade'const subscription = univerAPI.addEvent(univerAPI.Event.SheetEditChanging, ({ value }) => { console.log(value.toPlainText())})// Call subscription.dispose() when the owning component or page is removed.Cuando el editor de celdas está enfocado y se hace clic en un botón externo para activar un evento, la instantánea obtenida no contiene los datos de la celda enfocada.
Los datos de la celda se sincronizan con la instantánea cuando el editor de celdas pierde el foco (es decir, cuando finaliza la edición). Por lo tanto, antes de intentar obtener los datos de la instantánea, asegúrese de que la celda haya perdido el foco. Puedes finalizar activamente la edición de la siguiente manera:
import '@univerjs/sheets-ui/facade'async function saveWorkbook() { const fWorkbook = univerAPI.getActiveWorkbook() if (!fWorkbook) return await fWorkbook.endEditingAsync(true) const snapshot = fWorkbook.save() console.log(snapshot)}$btn.addEventListener('click', () => { saveWorkbook().catch(console.error)})Referencia: https://github.com/dream-num/univer/issues/1314
Cuando se utiliza la API de Facade para crear un libro de trabajo, es posible que algunas API no funcionen inmediatamente después de crear el libro de trabajo. Esto se debe a que algunas API dependen de que la interfaz se represente por completo antes de que puedan funcionar correctamente. Se recomienda realizar operaciones relacionadas en la etapa Rendered o Steady del ciclo de vida.
Muchas API dependen de que la interfaz se represente por completo antes de que puedan funcionar correctamente. Si llama a las API relacionadas inmediatamente después de crear un libro de trabajo, es posible que no funcionen debido a que la interfaz aún no se ha renderizado por completo. Se recomienda realizar operaciones relacionadas en la etapa Rendered o Steady del ciclo de vida:
const disposable = univerAPI.addEvent(univerAPI.Event.LifeCycleChanged, ({ stage }) => { if (stage === univerAPI.Enum.LifecycleStages.Steady) { // code... }})// To remove the event listener, you can call `disposable.dispose()`Referencia: Ciclo de vida
¿Cómo es esta guía?