# EditTable ## Definición Archivo: `induxsoft.controls.editable.js` Produce una interfaz de tabla que permite al usuario manipular cada una de sus celdas.

## Ejemplos Maquetación HTML por [tipos de columnas](#tipos-de-columnas). ```html

NoEditable

Text

Number

Select

Date

DateTime

Check

Custom

Memo

``` El atributo `data` permite establecer los datos de la tabla mediante una cadena que representa un objeto JSON tal como en el siguiente ejemplo: ```html

NoEditable

Text

Number

Select

Date

DateTime

Check

Custom

Memo

``` Por otro lado, también es posible establecer los datos de la tabla manualmente mediante el uso de la etquetas tal como se muestra a continuación: ```html

NoEditable

Text

Number

Select

Date

DateTime

Check

Custom

Memo

Cillum consequat laboris mollit irure.

123456.789

PAQ

2025-01-01

2025-01-03 12:00

Sí

Occaecat exercitation cillum esse. Dolor cupidatat fugiat duis ea ipsum officia dolore ullamco nulla laborum. Exercitation laborum qui Lorem laboris fugiat nostrud sunt. Dolore dolor labore dolor cillum in velit ad non in eiusmod irure ullamco officia veniam esse. Dolor ut ad eiusmod sit ullamco culpa mollit laboris aute. Lorem amet proident exercitation elit mollit magna elit exercitation est voluptate quis velit sunt velit esse.

``` **Ejemplos de uso con JavaScript** Inicialmente puede realizar las siguientes acciones mediante el uso de atajos de teclado. - ↓ : Agregar nueva fila - `ctrl` + `supr` : Eliminar fila seleccionada Lo anterior puede ser desactivado haciendo uso de las propiedades del componente. ```js document.addEventListener("DOMContentLoaded", () => { const table = document.getElementById("editable"); function disableShortcuts() { table.AutoAddRow = false; table.AutoDelRow = false; } disableShortcuts(); }); ``` Establecer [eventos](#eventos) de la tabla. ```js document.addEventListener("DOMContentLoaded", () => { const table = document.getElementById("editable"); function setTableEvents() { const events = table.EdiTable.Const.Events; table.Events[events.BeforeCellFocus] = (e) => { /** * Argumentos del evento. * * sender: (array) Un objeto que representa la instancia del remitente. * td: (HTMLTableCellElement) Referencia al elemento seleccionado. * cancel: (boolean) Detiene la ejecución de los procesos descendientes. */ // implementación... }; table.Events[events.EnterCell] = (e) => { /** * Argumentos de evento. * * sender: (array) Un objeto que representa la instancia del remitente. * td: (HTMLTableCellElement) Referencia al elemento seleccionado. */ // implementación... }; table.Events[events.LeaveCell] = (e) => { /** * Argumentos de evento. * * sender: (array) Un objeto que representa la instancia del remitente. * td: (HTMLTableCellElement) Referencia al elemento seleccionado. */ // implementación... }; table.Events[events.StartEdition] = (e) => { /** * Argumentos de evento. * * sender: (array) Un objeto que representa la instancia del remitente. * coldef: (array) Objeto con la información de la columna. * td: (HTMLTableCellElement) Referencia al elemento seleccionado. * text: (string) Texto que se pasará como parámetro en los eventos descendientes. */ // implementación... }; table.Events[events.ConfirmEdition] = (e) => { /** * Argumentos de evento. * * sender: (array) Un objeto que representa la instancia del remitente. * coldef: (array) Objeto con la información de la columna. * td: (HTMLTableCellElement) Referencia al elemento seleccionado. * text: (string) Texto que se pasará como parámetro en los eventos descendientes. * cancel: (boolean) Detiene la ejecución de los procesos descendientes. */ // implementación... }; table.Events[events.CancelEdition] = (e) => { /** * Argumentos de evento. * * sender: (array) Un objeto que representa la instancia del remitente. * td: (HTMLTableCellElement) Referencia al elemento seleccionado. */ // implementación... }; table.Events[events.InputCreated] = (e) => { /** * Argumentos de evento. * * sender: (array) Un objeto que representa la instancia del remitente. * coldef: (array) Objeto con la información de la columna. * td: (HTMLTableCellElement) Referencia al elemento seleccionado. * input: (HTMLElement) Referencia al elemento creado. * text: (string) Contenido de la celda seleccionada/especificada. */ // implementación... }; table.Events[events.BeforeSetInput] = (e) => { /** * Argumentos de evento. * * sender: (array) Un objeto que representa la instancia del remitente. * coldef: (array) Objeto con la información de la columna. * td: (HTMLTableCellElement) Referencia al elemento seleccionado. * input: (HTMLElement) Referencia al elemento creado. * text: (string) Contenido de la celda seleccionada/especificada. */ // implementación... }; table.Events[events.BeforeUpdateCell] = (e) => { /** * Argumentos de evento. * * sender: (array) Un objeto que representa la instancia del remitente. * coldef: (array) Objeto con la información de la columna. * td: (HTMLTableCellElement) Referencia al elemento seleccionado. * input: (HTMLElement) Referencia al elemento creado. * text: (string) Contenido de la celda seleccionada/especificada. * cancel: (boolean) Detiene la ejecución de los procesos descendientes. */ // implementación... }; table.Events[events.FieldUpdated] = (e) => { /** * Argumentos de evento. * * sender: (array) Un objeto que representa la instancia del remitente. * row: (number) Índice de la fila seleccionada. * field: (string) Nombre de la celda seleccionada. * value: (string) Valor establecido. */ // implementación... }; table.Events[events.RowAdded] = (e) => { /** * Argumentos de evento. * * sender: (array) Un objeto que representa la instancia del remitente. * tr: (HTMLTableRowElement) Referencia al elemento creado. * rowIndex: (number) Índice de la nueva fila creada. */ // implementación... }; table.Events[events.BeforeRowDelete] = (e) => { /** * Argumentos de evento. * * sender: (array) Un objeto que representa la instancia del remitente. * rowIndex: (number) Índice de la fila a eliminar. * cancel: (boolean) Detiene la ejecución de los procesos descendientes. */ // implementación... }; table.Events[events.RowDeleted] = (e) => { /** * Argumentos de evento. * * sender: (array) Un objeto que representa la instancia del remitente. * rowIndex: (number) Índice de la fila eliminada. */ // implementación... }; table.Events[events.BeforeMoveRow] = (e) => { /** * Argumentos de evento. * * sender: (array) Un objeto que representa la instancia del remitente. * source: (array) Objeto con la información de la fila que se esta moviendo. * target: (array) Objeto con la información de la fila objetivo. * child: (boolean) Indica si la fila se moverá como un elemento hijo de otra fila. * cancel: (boolean) Detiene la ejecución de los procesos descendientes. */ // implementación... }; table.Events[events.RowMoved] = (e) => { /** * Argumentos de evento. * * sender: (array) Un objeto que representa la instancia del remitente. * source: (array) Objeto con la información de la fila que se esta moviendo. * target: (array) Objeto con la información de la fila objetivo. * child: (boolean) Indica si la fila se movió como un elemento hijo de la fila objetivo. */ // implementación... }; table.Events[events.RowChanged] = (e) => { /** * Argumentos del evento. * * sender: (array) Un objeto que representa la instancia del remitente. * td: (HTMLTableCellElement) Referencia al elemento seleccionado. * previous_index: (number) Índice previo/anterior a la fila seleccionada. * index: (number) Índice actual de la fila seleccionada. */ // implementación... }; table.Events[events.LostFocus] = () => {/*implementación*/}; table.Events[events.IsDirtyChanged] = () => {/*implementación*/}; table.Events[events.OnSort] = (e) => { /** * Argumentos del evento. * * coldef: (array) Objeto con la información de la columna: {type:"", field:"", sort:"ASC/DESC", ...} * th: (HTMLTableCellElement) Referencia al elemento seleccionado. * caption: (string) Título de la columna seleccionada. */ // implementación... }; /** * irow: (number) Índice de la fila seleccionada/especificada. * icol: (number) Índice de la celda seleccionada/especificada. * coldef: (array) Objeto con la información de la columna: {type:"", field:"", ...} */ table.ButtonOnClick = (irow,icol,coldef) => {/*implementación*/}; /** * td: (HTMLTableCellElement) Referencia al elemento creado. * irow: (number) Índice de la fila creada. * icol: (number) Índice de la celda creada. * field: (string) Nombre de la celda creada. */ table.onTdPaint = (td,irow,icol,field) => {/*implementación*/}; } setTableEvents(); }); ``` Podemos trabajar una celda personalizable (`Custom`) haciendo uso del atribbuto `button` que genera un botón (def: svg/icon(...)) de función personalizada y la propiedad `ButtonOnClick`. ```js document.addEventListener("DOMContentLoaded", () => { const table = document.getElementById("editable"); function cellsButtonClickHandler(irow,icol,coldef) { let field = coldef.field; switch (field) { case "ocho": table.DataArray[irow][field] = prompt("Escribe el contenido aqui...",""); table.UpdateRow(irow); break; } } table.ButtonOnClick = (irow,icol,coldef) => cellsButtonClickHandler(irow,icol,coldef); }); ``` Establecer datos mediante la propiedad `DataArray`. ```js document.addEventListener("DOMContentLoaded", () => { const table = document.getElementById("editable"); function setData() { let data = [ { uno: "", dos: "Cillum consequat laboris mollit irure.", tres: 123456.789, cuatro: "PAQ", cinco: "2025-01-01", seis: "2025-01-03 12:00", siete: "Sí", ocho: "", nueve: "Occaecat exercitation cillum esse. Dolor cupidatat fugiat duis ea ipsum officia dolore ullamco nulla laborum. Exercitation laborum qui Lorem laboris fugiat nostrud sunt. Dolore dolor labore dolor cillum in velit ad non in eiusmod irure ullamco officia veniam esse. Dolor ut ad eiusmod sit ullamco culpa mollit laboris aute. Lorem amet proident exercitation elit mollit magna elit exercitation est voluptate quis velit sunt velit esse." } ]; table.DataArray = data; table._printRows(); } setData(); }); ``` ## Comentarios ### Tipos de columnas #### NoEditable Todas las celdas de la columna no se pueden editar. #### Text Indica un editor `input[type="text"]` para todas las celdas de la columna. El texto se contiene en una sola linea finita. #### Number Indica un editor `input[type="number"]` para todas las celdas de la columna. No se adminten caracteres alfabeticos o caracteres especiales. #### Select Indica un editor `select` para todas las celdas de la columna. Se configura previamente para mostrar las opciones para realizar la seleccion del valor a contener. #### Date Indica un editor `input[type="date"]` para todas las celdas de la columna. Se indica una fecha. #### DateTime Indica un editor `input[type="datetime-local"]` para todas las celdas de la columna. Se indica fecha y hora. #### Check Indica un editor `input[type="checkbox"]` para todas las celdas de la columna. #### Custom Indica un editor personalizado para todas las celdas de la columna. #### Memo Indica un editor `textarea` para todas las celdas de la columna. El texto se contiene en multiples lineas. ## Atributos ### Atributos del componente: #### id (opcional) Identificador del componente, este Puede ser usado para acceder facilmente al componente mediante javascript. Tipo: `string`, Predeterminado: `""` ```html ``` #### data (opcional) Una cadena que representa un objeto JSON con los datos de la tabla. Tipo: `array`, Predeterminado: `""` ```html ``` #### show-tree (opcional) Establece la vista de la tabla en arbol. Tipo: `boolean`, Predeterminado: `false` ```html ``` #### key (opcional) Campo que contiene el identificador de la fila. Tipo: `string`, Predeterminado: `id` ```html ``` #### parentkey (opcional) Campo que contiene el identificador de la fila padre. Tipo: `string`, Predeterminado: `idp` ```html ``` #### childs-field (opcional) Campo que almacena una lista de filas hijas. Tipo: `string`, Predeterminado: `__items` ```html ``` #### can-move-row (opcional) Establece que las filas puedan ser movidas. Tipo: `bolean`, Predeterminado: `false` Si show-tree es true entonces `true`. ```html ``` #### hidde-selector (opcional) Oculta el selector de edición de la celda. Tipo: `boolean`, Predeterminado: `false` ```html ``` #### hide-row-selector (opcional) Oculta el selector de selección de la fila. Tipo: `boolean`, Predeterminado: `false` ```html ``` #### html-encode (opcional) Escapa los caracteres especiales que entran en conflicto con la sintaxis HTML "<, >, ', etc." Tipo: `boolean`, Predeterminado: `false` ```html ``` #### cards-responsive (opcional) Ver filas como tarjetas cuando el ancho en pixeles de la pantalla sea menor a 768px y todas las columna sean de tipo: NoEditable Tipo: `boolean`, Predeterminado: `false` ```html ``` #### readonly (opcional) Desabilita la edición de forma global. Tipo: `boolean`, Predeterminado: `false` ```html ``` #### min-row-height (opcional) Alto mínimo de las filas (ej: 10px) Tipo: `string`, Predeterminado: `none` ```html ``` #### max-row-height (opcional) Alto máximo de las filas (ej: 30px) Tipo: `string`, Predeterminado: `none` ```html ``` #### row-height (opcional) Alto de las filas (ej: 10px) Tipo: `string`, Predeterminado: `100%` ```html ``` #### control-styles (opcional) Establece los estilos personalizados que se le aplicarán al control (ej: input{border:1px solid red;}). Tipo: `string`, Predeterminado: `""` ```html ``` ### Atributos de las columnas del componente: #### type (opcional) Tipos de celda: Text, Number, Date, DateTime, Memo, Check, Select, Custom, NoEditable. Tipo: `string`, Predeterminado: `Text` ```html ``` #### field (opcional) Nombre del campo donde se guardará el valor de la celda. Tipo: `string`, Predeterminado: `""` ```html ``` #### default (opcional) Valor por defecto de la celda al iniciarse. Tipo: `string`, Predeterminado: `""` ```html ``` #### maxlength (opcional) Limita la cantidad de texto que puede introducirse en columnas de tipo Text y Memo (ej: 10) Tipo: `number`, Predeterminado: `""` ```html ``` #### options (opcional) Datos de las opciones de una columna de tipo Select. Tipo: `object`, Predeterminado: `""` ```html ``` #### button (opcional) Muestra un botón de función personalizada en la celda de la columna indicada. Tipo: `boolean`, Predeterminado: `false` ```html ``` #### buttondata (opcional) Contenido HTML del botón de función personalizada. Tipo: `string`, Predeterminado: `svg/icon(...)` ```html ``` #### textalign (opcional) Establece la alineación del texto de la columna (ej: "start/left, center, end/right"). Tipo: `string`, Predeterminado: `start` ```html ``` #### format (opcional) Establece el formateo de números para columnas de tipo Number y NoEditable. Tipo: `boolean`, Predeterminado: `false` ```html ``` #### decs (opcional) Cantidad de decimales a redondear cuando el atributo format es true. Tipo: `number`, Predeterminado: `0` ```html ``` #### prefix (opcional) Prefijo del contenido de la celda cuando el atributo format es true. Tipo: `string`, Predeterminado: `""` ```html ``` #### sufix (opcional) Sufijo del contenido de la celda cuando el atributo format es true. Tipo: `string`, Predeterminado: `""` ```html ``` #### thousandssep (opcional) Establece la separación de miles cuando el atributo format es true. Tipo: `boolean`, Predeterminado: `false` ```html ``` #### minwidth (opcional) Ancho mínimo de la columna (ej: 10px) Tipo: `string`, Predeterminado: `""` ```html ``` #### maxwidth (opcional) Ancho máximo de la columna (ej: 30px) Tipo: `string`, Predeterminado: `""` ```html ``` #### width (opcional) Ancho de la columna (ej: 10em) Tipo: `string`, Predeterminado: `""` ```html ``` #### sorTable (opcional) Permite ordenar los datos de la tabla al hacer clic en cualquiera de los encabezados de columna. Tipo: `boolean`, Predeterminado: `"true"` ```html ``` ## Propiedades - `TheadRowIndex`: (number, def:0) Establece el índice de la fila en la tabla que es el encabezado de la misma. - `AutoAddRow`: (bool, def:true) Permite la inserción de filas nuevas en la tabla de forma automática. - `AutoDelRow`: (bool, def:true) Permite la inserción entre filas así como su eliminación. - `EverMove`: (bool, def:true) Si es true, desplazamiento a la izquierda en la primera celda sube una fila y se mueve a la última, a la derecha en la última baja una fila y va a la primer celda. - `PagOffSet`: (number, def:10) Número de desplazamiento de filas con AvPag PrevPag. - `DataArray`: (Array obj) Array de objetos asociado a las filas. - `ColumnsDefaultType`: (text, def:"Text") Disponibles: Text, Number, Date, DateTime, Memo, Check, Select, Custom, NoEditable - `Columns`: (Array obj) Array de objetos con información de las filas. - `ShowAsTree`: (bool, def:false) Establece la vista de la tabla en arbol. - `CanMoveRow`: (bool, def:false, si ShowAsTree es true def: true) Establece que las filas puedan ser movidas de posición. - `TreeOptions`: (obj) Objeto de configuración de los campos a considerar para las operaciones de la vista en arbol. Si no se establece se inicia con las propiedades asignadas o por defecto de (Key, ParentKey y Childs). - `Key`: (text, def: "id") Campo que contiene el identificador de la fila. - `ParentKey`: (text, def: "idp") Campo que contiene el identificador de la fila padre. - `Childs`: (text, def: "__items") Campo que almacena una lista de filas hijas. - `NumFormat`: (obj) Objeto con la configuración de caracter para la separación de miles y decimales para columnas con el atributo format en true. - `hiddeSelector`: (bool, def: false) Oculta el selector de edición de la celda. - `hiddeRowSelector`: (bool, def: false) Oculta el selector de selección de la fila. - `ButtonOnClick`: (function) Se dispara cuando se da click en el botón creado por la propiedad button en el atributo de las columna. - `onTdPaint`: (function) Se dispara al crearse el elemento td de la fila. - `sorTable`: (bool, def:true) Permite ordenar los datos de la tabla al hacer clic en cualquiera de los encabezados de columna. ## Métodos #### DeleteCurrentRow Elimina la fila seleccionada. ```js DeleteCurrentRow(): void ``` #### UpdateRow Actualiza los valores que se muestran de la fila especificada. ```js UpdateRow(row): boolean ``` **Parámetros:** - `number` **row** Indice de la fila. **Devoluciones** `boolean` Retorna `true` si se completó la tarea, en caso contrario `false`. #### UpdateData Actualiza los objetos del dataArray con los valores todas las filas de la tabla. ```js UpdateData(): void ``` #### UpdateDataMember Actualiza el objeto del dataArray de la fila especificada. ```js UpdateDataMember(row, field, value, stopfire = false): array{} ``` **Parámetros:** - `number` **row** Indice de la fila. - `string` **field** Nombre del campo a actualizar. - `string` **value** Valor del campo a actualizar. - `boolean` **stopfire** Detiene la ejecución del evento descendiente FieldUpdated del elemento en cuestión. **Devoluciones** `array{}` Devuelve el objeto con la información de la fila especificada. #### AddRow Agrega una nueva fila a la tabla. ```js AddRow(): void ``` #### RowIndexOfTd Obtener el índice de la celda especificada. ```js RowIndexOfTd(td): number ``` **Parámetros:** - `HTMLTableCellElement` **td** Referencia a un elemento `` de la tabla. **Devoluciones** `number` Retorna el índice del elemento tr de la celda especificada, -1 si la celda es undefined o null. #### CurrentRowIndex Obtener el índice de la fila seleccionada. ```js CurrentRowIndex(): number ``` **Devoluciones** `number` Retorna el índice de la fila tr de la celda td actualmente seleccionada, -1 si no hay niguna celda selccionada. #### CurrentColIndex Obtener el índice de la celda seleccionada. ```js CurrentColIndex(): number ``` **Devoluciones** `number` Retorna de índice de la celda td actualmente seleccionada en relación a su fila, -1 si la celda es null, o no pertenece a una fila tr. #### CellFocus Establece el foco a la celda td especificada. ```js CellFocus(td): void ``` **Parámetros:** - `HTMLTableCellElement` **td** Referencia a un elemento `` de la tabla. ## Eventos #### BeforeCellFocus `beforecellfocus` Ocurre antes de que una celda tome el foco. #### EnterCell `entercell` Ocurre cuando una celda toma el foco, justo cuando es seleccionada. #### LeaveCell `leavecell` Ocurre cuando una celda pierde el foco, se reliza un cambio de celda o se selecciona un objeto diferente. #### StartEdition `startedition` Ocurre al momento de seleccionar la celda y permite realizar la edicion de esta, puede ser precedida por el evento EnterCell. #### ConfirmEdition `confirmedition` Se dispara al confirmar con la tecla "ENTER", cambiar o quitar el foco de la celda que se esta editando. #### CancelEdition `canceledition` Se dispara al no confirmar el contenido de la celda con la tecla "ESC". #### InputCreated `inputcreated` Ocurre al generarse el componente editor "INPUT" dentro de la celda. #### BeforeSetInput `beforesetinput` Ocurre antes de definir el contenido de la celda. #### BeforeUpdateCell `beforeupdatecell` Ocurre antes de definir el nuevo contenido de la celda. #### FieldUpdated `fieldupdated` Ocurre después de establecer el nuevo contenido a la celda. #### RowAdded `rowadded` Se dispara cuando una nueva fila fue generada. #### BeforeRowDelete `beforerowdelete` Ocurre antes de eliminar una fila de la tabla. #### RowDeleted `rowdeleted` Ocurre después de que una fila ha sido eliminada. #### BeforeMoveRow `beforemoverow` Ocurre antes de mover o cambiar de posición una fila. #### RowMoved `rowmoved` Ocurre después de que una fila ha cambiado de posición. #### RowChanged `rowchanged` Ocurre cuando se selecciona una fila distinta. #### LostFocus `lostfocus` Ocurre cuando la tabla pierde el foco. #### IsDirtyChanged `isdirtychanged` Disponible solo cuando se trabaja con un *backup* de la tabla. Ocurre cuando el valor de alguno de los campos en el array de datos ha sido modificado. #### OnSort `onsort` Se dispara cada que se ordenan los datos de una columna.