# j-DataGrid > Esta cuadrícula fue creada para aplicaciones de una sola página y aplicaciones empresariales. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: es Content-SHA256: 3b4dce0b9a9ee57e1a1fd12c2ad6a578e560f06b8f1f8ddb6425c2b46a27b5a6 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded Esta cuadrícula fue creada para aplicaciones de una sola página y aplicaciones empresariales. - se necesita sistema de rejilla `bootstrap` - puedes renderizar más de 30 000 filas sin ningún problema - admite columnas de arrastrar y soltar - admite clasificación - admite el cambio de tamaño de las columnas - admite desplazamiento vertical/horizontal - admite filtros - admite casillas de verificación - barras de desplazamiento personalizadas independientes del sistema operativo - receptivo - admite __modo oscuro__ - El filtro de opciones de columna __IMPORTANTE__ necesita el componente `j-Directory` __PARA HACER__: - multiclasificación - cambiar el tamaño de las columnas para dispositivos táctiles - reordenar columnas para dispositivos táctiles __Fuente de datos__ debe contener: ```js { schema: 'schema_id', // NEW: optional, DataGrid supports multiple schemas (it means: multiple declaration of columns) items: [{ name: 'Row 1' }, { name: 'Row 2' }, ...] // items page: 1, // current pages pages: 30, // count of pages limit: 5, // items limit per page count: 150 // count of items in DB } ``` o `Array` sin formato, pero no puedes usar paginación ni filtros externos: ```js [{ name: 'Row 1' }, { name: 'Row 2' }]; ``` __Configuración__: - `filterlabel {String}` un marcador de posición predeterminado para todos los filtros (opcional) - `rememberfilter {Boolean}` con verdadero recuerda los filtros para cada esquema (predeterminado: `true`) - `schema {String}` un esquema predeterminado (predeterminado: `default`) - `pluralizepages {String}` pluralización de páginas (opcional, predeterminado: `# pages,# page,# pages,# pages`) - `pluralizeitems {String}` pluralización para elementos (opcional, predeterminado: `# items,# item,# items,# items`) - `height {Number/String}` altura de la cuadrícula, valores admitidos: `auto` (predeterminado), __NEW__ `fluid`, `parent` (o `parent1`, `parent2`) o `NUMBER` como altura o `selector` para jQuery.más cercano() - `minheight {Number}` altura mínima de la rejilla, funciona con altura `fluid` y `auto` (predeterminado: `200`) - Selector `parent {String}` para la opción de altura `auto` (predeterminado: `window`) - `margin {Number}` un margen superior para la altura (opcional, predeterminado: `0`) - `boolean {String}` valores para filtrar valores booleanos (opcional, predeterminado: `true|on|yes`) - `resize {Boolean}` permite cambiar el tamaño de las columnas (opcional, predeterminado: `true`) - `reorder {Boolean}` permite reordenar las columnas (opcional, predeterminado: `true`) - `sorting {Boolean}` habilita la clasificación (opcional, predeterminado `true`) - `remember {Boolean}` recuerda reordenar y cambiar el tamaño de las columnas (opcional, predeterminado `true`) - `checkbox {Boolean}` habilita casillas de verificación - `colwidth {Number}` un ancho de columna predeterminado en píxeles (opcional, predeterminado `150`) - `rowheight {Number}` una altura de fila predeterminada en píxeles (opcional, predeterminado: `24`) + depende de CSS - `alignheader {String/Number}` se alinea para el encabezado `right` (o `2`) o `center` (o `1`) (opcional, predeterminado: `left`) - `alignfilter {String/Number}` se alinea para la entrada del filtro `right` (o `2`) o `center` (o `1`) (opcional, predeterminado: `left`) - `align {String/Number}` se alinea para un valor de columna `right` (o `2`) o `center` (o `1`) (opcional, predeterminado: `left`) - `click {String}` un enlace a una ruta o `function(row, grid, row_el)`, se asignará/ejecutará un registro si el usuario hace clic en una fila - `clickid {String}` un identificador/nombre de propiedad para redibujar hacia atrás (para resaltar la fila anterior), predeterminado: `id` - `highlight {Boolean}` cada fila seleccionada (después de `click`) se resaltará (predeterminado: `false`) - `unhighlight {Boolean}` habilita `undo highlighting` de la fila seleccionada (predeterminado: `true`) - `checked {String}` `path` a una variable o ruta a `function(rows, grid)` se ejecuta si el usuario seleccionó/marcó algunas filas - `autoselect {Boolean}` habilita la selección automática de la primera fila en la cuadrícula, realiza `EXEC(config.click)`, predeterminado: `false` - `limit {Number}` un límite de clúster, predeterminado: `80` - `numbering {Boolean}`, valor predeterminado opcional `false` - `allowtitles {Boolean}`, habilita títulos para todos los valores de fila, valor predeterminado opcional `false` - `button {String}` se ejecuta un enlace a `function(btn_name, row, btn_element, event, name)` si el usuario hace clic en un __botón__ en la fila - `exec {String}` un enlace a `function(type, filter, sort, page)` solo para operaciones del lado del servidor (deshabilita la clasificación y el filtrado del lado del cliente), tipos admitidos: `refresh` o `page` - `changed {String}` `path` a una variable o ruta a `function(rows, grid)` se ejecuta si el usuario cambió algunas filas - `change {String/Boolean}` booleano permite la edición interna o la cadena debe contener un `path` a una variable o la ruta a `function(meta, next(meta))` se ejecuta si el usuario hace doble clic en una columna (`meta` puede ser `null` si se actualiza la cuadrícula) + `next(null)` reemplaza el contenido anterior nuevamente - `columns {String}` un camino hacia la definición de `columns {Array}` - `dblclick {String}` un enlace al método `function(row, grid, row_el)`, se ejecuta si el usuario hace doble clic en una fila - `noborder {Boolean}` puede desactivar un borde alrededor de la cuadrícula (predeterminado: `false`) - `clusterize {Boolean}` puede desactivar el desplazamiento agrupado (predeterminado: `true`) - `contextmenu {String}` un enlace a `function(e, grid)` cuando el usuario abre el menú contextual - `autoformat {Boolean}` habilita tipos de formato automático como `email`, `phone` y `number` (predeterminado: `true`) - `controls {Boolean}` habilita los controles definidos en `columns` (predeterminado: `true`) - `hfunc {String}` un enlace al método `function(el)`, se ejecuta si el usuario hace clic en el icono agregado a la primera fila del encabezado. Útil para integrar otros componentes con DataGrid. p.ej. filtro j - `hfuncicon {String}` icono hfunc, p. hogar, engranaje, etc. - `pagination {Boolean}` habilita/deshabilita la paginación (predeterminado: `true`) - `config.exec` se ejecutará si la barra de desplazamiento está al final, y puede usar como respuesta sin formato `array` de filas - `ovalue {String}` una clave predeterminada para obtener `value` de `column.options` (predeterminada: `id`) - `otext {String}` una clave predeterminada para obtener `text` de `column.options` (predeterminada: `name`) __Propiedades de la columna__: - `name {String}` un nombre de campo en el objeto de fila - `text {String}` una etiqueta de columna, el texto con `.ti ti-home` representará el ícono Total - `title {String}` una información sobre herramientas de columna (opcional) - `width {Number}` un ancho de columna (opcional, predeterminado `config.colwidth`) - `filter {String/Boolean}` un marcador de posición para el filtro o `boolean` puede desactivar el filtro para esta columna (opcional) - `filtervalue {Object}` opcional, un valor de filtro predefinido (predeterminado: `undefined`) - `filtertype {Number/String}`, `1` deshabilita la búsqueda inteligente (predeterminado: `0` - significa búsqueda inteligente habilitada) - `align {String}` puede ser `center` o `right` (opcional, predeterminado: `left`) - `template {String}` puede ser una plantilla Tangular y el modelo es el objeto completo de la fila. - `sorting {Boolean}` habilita la clasificación (opcional, predeterminado: `true`) - `search {Boolean/String}` `true` filtrará un valor según el resultado `template` o `String` puede ser una plantilla Tangular que se utilizará como valor para la búsqueda. - `format {String/Number}` se puede utilizar para el campo de fecha y números (recuento de decimales) (opcional), p. `dd.MM.yyyy` - `hide {Boolean}` oculta una columna - `listcolumn {Boolean}` valor predeterminado: verdadero, falso para eliminar una columna de la lista de columnas - `hidden {String}` como función de flecha `column => true` --> la columna estará oculta (por ejemplo, para restringir usuarios) - `options {Object Array}` opcional, un filtro personalizado, por ejemplo `[{ text: 'yes', value: true }, { text: 'no', value: false }]` o {String}r enlace a la fuente de datos - `otext {String}` opcional, una clave para el campo `text` en `options`, valor predeterminado `config.otext` - `ovalue {String}` opcional, una clave para el campo `value` en `options`, valor predeterminado `config.ovalue` - `buttonapply {String}` opcional, una etiqueta para el botón `Apply` en columnas, predeterminado: `Apply` - `class {String}` opcional, un nombre de clase de columna personalizado - `empty {String/Boolean}` opcional, puede reescribir el valor vacío con el valor definido en el campo vacío (el valor `true` usa `---` como valor predeterminado) - `min {Number}` __solo editable__ al min. valor numérico - `max {Number}` __solo editable__ un máx. valor numérico - `required {Boolean}` __solo editable__ - `dirsearch {String/Boolean}` un marcador de posición para la búsqueda `j-Directory`, el valor booleano con `false` deshabilitará la búsqueda - `type {String}` opcional, puede contener un tipo de datos (`string`, `boolean`, `date`, `number`, `email`, `phone` o `url`) para el campo - `editable {Boolean}` permite editar - `currency {String}` un nombre de moneda (debe definirse en `DEF.currencies`) - `editable {String}` Una ruta a `function(meta)` editable y personalizado, importante: `meta.next(new_value)` o `meta.cancel()` - `colorize {Boolean}` permite colorear el valor - `monospace {Boolean}` habilita el tipo de fuente monoespaciado - __NEW__ `raw {Boolean}` habilita/deshabilita el escape HTML en los filtros de columna (predeterminado: `false`) - __NEW__ `pair {Boolean}` habilita/deshabilita el emparejamiento automático de valores con la configuración `options` (predeterminado: `false`) __Controles de fila (NUEVO)__: - se puede definir como tipo de columna `controls` - debe definirse la columna `template` (Tangular, `row` es un modelo para Tangular para cada fila) - mira el ejemplo - El evento del botón `click` se captura en `config.button`. __Filtrado__: - `numbers`: (1) `number` busca un número exacto, (2) `number - number` es un intervalo entre números - `strings`: (1) `string` busca una cadena exacta, (2) `string1, string2, string3` es un criterio de búsqueda múltiple - `dates`: (1) año `2017` busca todas las fechas de este año, (2) `2017-02-12 - 2017-03-13` <--> `02.12.2017 - 13.03.2017` es un intervalo entre fechas, (3) `12-20 - 12-31` <--> `20.12 - 31.12` un intervalo entre fechas del año actual ir (4) `2017-01 - 2018-05` <--> `01.2017 - 05.2018` o (5) `-5 days` <--> `-1 week` <--> `-10 years` __Métodos__: - `component.redraw([reselect_again])` puede volver a dibujar filas (solo para modificaciones, si elimina alguna fila necesita actualizar todo el modelo) - `component.resetfilter()` puede restablecer un filtro - `component.exportrows(page_from or true from the current page, pages_count, callback(rows, internal_options), [reset_to_page or true for the current page])` puede exportar filas con renderizado del lado del servidor - `component.appendrow(row_object, [scrolldown], [prepend])` agrega y renderiza la fila - `component.redrawrow(row_object, [new_object_row])` vuelve a dibujar la fila o __NEW__: reemplaza+redibuja `row_object` con un nuevo `new_object_row` - `component.clear()` borra todos los cambios - `component.select(row)` selecciona `row` debe ser el mismo objeto que en la fuente de datos - `component.editcolumn(row_index, col_index)` ejecuta `config.change` internamente (solo para uso avanzado) - `component.applyfilter(obj)` puede aplicar un filtro personalizado `{ name: 'Peter', age: '20 - 50' }` - `component.resetcolumns()` restablece columnas - `component.readfilter()` devuelve un filtro actual - `component.rebind(schemaname__or__columnsdeclaration)` el método vuelve a vincular el esquema - `component.reload()` ejecuta `config.exec` con el filtro y clasificación actuales - `component.empty()` vacía todas las filas - `component.redrawcolumns()` volver a dibujar columnas sin restablecerlas - __NUEVO__: `component.schema(name)` cambia un esquema y actualiza datos __Propiedades__: - `component.meta` devuelve metainformación interna sobre filtros, columnas y filas. __Es bueno saberlo__: - `NULL('link.to.data')` evalúa `config.exec` - `SET('link.to.data', data, 'noscroll')` --> El tipo `noscroll` desactiva el reinicio del desplazamiento. __¿Cómo extender una clase de fila?__ - mire la línea `{{ if active }}`, extiende una clase de fila agregando `dg-active-class` si `active` será válida ```javascript [ '{{ if active }} dg-active-class{{ fi }}', { name: 'name', text: 'Name', width: 200 }, // other columns ... ] ``` __Múltiples esquemas__: ```html ``` Úselo con ``. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT. ```html example.html ```