# j-DataGrid

> Esta rede foi criada para aplicações de página única e aplicações empresariais.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: pt
Content-SHA256: 15cb9df21f10d7dbac7e80783988e7a4403f67a34693006616dd362a8ef0a4a1
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Esta rede foi criada para aplicações de página única e aplicações empresariais.

- O sistema de rede `bootstrap`
- Você pode render mais de 30 mil linhas sem qualquer problema
- Suporte para drag&drop colunas
- Apoio à Sorte
- Suporte para a reposição de colunas
- Suporte ao escorregamento vertical/horizontal
- Suporte aos filtros
- Suporte para checkboxes
- Escorpiões independentes em
- Responder
- Apresentação - Modo escuro
- __IMPORTANT__ opções de coluna filtro precisa de componente `j-Directory`

__O-DO__:

- Multidão
- Colunas para dispositivos de toque
- Reordenar colunas para dispositivos de toque

__Data-Source_ precisa de conter:

```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
}
```

ou `Array` cru, mas você não pode usar a paginação e filtros externos:

```js
[{ name: 'Row 1' }, { name: 'Row 2' }];
```

__Configuração__:

- `filterlabel {String}` um alojamento padrão para todos os filtros (opcional)
- `rememberfilter {Boolean}` com verdadeiro ele lembra filtros para cada esquema (default: `true`)
- `schema {String}` um esquema padrão (default: `default`)
- Pluralização `pluralizepages {String}` para páginas (opcional, padrão: `# pages,# page,# pages,# pages`)
- Pluralização `pluralizeitems {String}` para itens (opcional, padrão: `# items,# item,# items,# items`)
- `height {Number/String}` Alteração da rede, valores suportados: `auto` (default) e de novo `fluid`, `parent` (ou `parent1`, `parent2`) ou `NUMBER` A altura ou `selector` para jQuery.closest()
- `minheight {Number}` altura mínima da rede, trabalha com `fluid` e `auto` altura (default: `200`)
- Seletor `parent {String}` para a opção de altura `auto` (default: `window`)
- `margin {Number}` uma margem superior para altura (opcional, padrão: `0`)
- `boolean {String}` um valor para filtrar valores booleanos (opcional, padrão: `true|on|yes`)
- `resize {Boolean}` permite a reposição de colunas (opcional, padrão: `true`)
- `reorder {Boolean}` permite reordenar colunas (opcional, padrão: `true`)
- `sorting {Boolean}` permite a classificação (opcional, padrão `true`)
- `remember {Boolean}` lembra colunas de reordenação e resignação (opcional, padrão `true`)
- `checkbox {Boolean}` permite checkboxes
- `colwidth {Number}` uma largura de coluna padrão em pixels (opcional, padrão `150`)
- `rowheight {Number}` uma altura de linha padrão em pixels (opcional, padrão: `24`) + depende do CSS
- `alignheader {String/Number}` Alinhamento para Header `right` (ou `2`) ou `center` (ou `1`(Opcional e defeituoso) `left`)
- `alignfilter {String/Number}` Alinhamento para filtro `right` (ou `2`) ou `center` (ou `1`(Opcional e defeituoso) `left`)
- `align {String/Number}` Alinhamento de uma coluna `right` (ou `2`) ou `center` (ou `1`(Opcional e defeituoso) `left`)
- `click {String}` um link para um caminho ou `function(row, grid, row_el)`, um registro será atribuído/executado se o usuário clicar em uma linha
- `clickid {String}` um identificador/nome de propriedade para redescrever para trás (para a marcação da linha anterior), padrão: `id`
- `highlight {Boolean}` cada linha selecionada (após `click`) será destacado (default: `false`)
- `unhighlight {Boolean}` permite `undo highlighting` da linha selecionada (default: `true`)
- `checked {String}` `path` para uma variável ou caminho para `function(rows, grid)` é executado se o usuário selecionou/checou algumas linhas
- `autoselect {Boolean}` permite a seleção automática da primeira linha na rede, executa `EXEC(config.click)`, padrão: `false`
- `limit {Number}` um limite de cluster, padrão: `80`
- `numbering {Boolean}`, padrão opcional `false`
- `allowtitles {Boolean}`, permite títulos para todos os valores de linha, padrão opcional `false`
- `button {String}` um link para `function(btn_name, row, btn_element, event, name)` é executado se o usuário clicar em um __button__ na linha
- `exec {String}` um link para `function(type, filter, sort, page)` apenas para operações de lado do servidor (esforça a classificação e filtragem do cliente), tipos suportados: `refresh` ou `page`
- `changed {String}` `path` para uma variável ou caminho para `function(rows, grid)` é executado se o usuário alterar algumas linhas
- `change {String/Boolean}` boolean permite a edição interna ou a fila deve conter um `path` para uma variável ou o caminho para `function(meta, next(meta))` é executado se o usuário duplicar uma coluna (`meta` pode ser `null` se a rede é refrescada) + `next(null)` substitui o conteúdo anterior novamente
- `columns {String}` é um caminho para a definição de `columns {Array}`
- `dblclick {String}` um link para o método `function(row, grid, row_el)`, é executado se o usuário clicar duas vezes em uma linha
- `noborder {Boolean}` pode desativar uma fronteira em torno da rede (default: `false`)
- `clusterize {Boolean}` pode desativar o escorregamento clusterado (default: `true`)
- `contextmenu {String}` um link para `function(e, grid)` quando o usuário aumenta o menu de contexto
- `autoformat {Boolean}` permite tipos de formato automático como `email`, `phone` e `number` (default: `true`)
- `controls {Boolean}` permite controlos definidos em `columns` (default: `true`)
- `hfunc {String}` um link para o método `function(el)`, é executado se o usuário clicar no ícone adicionado à primeira linha de cabeças. usefull para integrar outro componente com DataGrid.
- `hfuncicon {String}` hfunc icona, por exemplo, casa, cog, etc.
- `pagination {Boolean}` permite/disabilita a página (default: `true`)
	- `config.exec` será executado se a barra de rolamento estiver no final, e você pode usar como a resposta raiz `array` de linhas
- `ovalue {String}` uma chave padrão para obter `value` de `column.options` (default: `id`)
- `otext {String}` uma chave padrão para obter `text` de `column.options` (default: `name`)

__Propriedades da coluna__:

- `name {String}` um nome de campo no objeto de linha
- `text {String}` é uma coluna, texto com `.ti ti-home` renderá o ícone total
- `title {String}` uma coluna ferramenta (opcional)
- `width {Number}` uma coluna largura (opcional, padrão `config.colwidth`)
- `filter {String/Boolean}` um alojador para o filtro ou `boolean` pode desativar o filtragem para esta coluna (opcional)
- `filtervalue {Object}` opcional, um valor de filtro predefinido (default: `undefined`)
- `filtertype {Number/String}`, `1` desabilita a pesquisa inteligente (default: `0` - significa que a busca inteligente é ativada)
- `align {String}` pode ser `center` ou `right` (opcional, padrão: `left`)
- `template {String}` pode ser um modelo Tangular e o modelo é todo o objeto da linha
- `sorting {Boolean}` permite a classificação (opcional, padrão: `true`)
- `search {Boolean/String}` `true` irá filtrar um valor de acordo com o resultado `template` ou `String` pode ser um modelo Tangular que será usado como um valor para pesquisa
- `format {String/Number}` pode ser usado para datas e números (conto de decimais) campo (opcional), por exemplo, `dd.MM.yyyy`
- `hide {Boolean}` esconde uma coluna
- `listcolumn {Boolean}` padrão: verdadeiro, falso para remover colunas da lista de colunas
- `hidden {String}` como uma função de fogo `column => true` --> coluna será escondida (por exemplo, para restringir o usuário)
- `options {Object Array}` opcional, um filtro personalizado por exemplo `[{ text: 'yes', value: true }, { text: 'no', value: false }]` o {String}r link para a fonte de dados
- `otext {String}` opcional, uma chave para o campo `text` em `options`, padrão `config.otext`
- `ovalue {String}` opcional, uma chave para o campo `value` em `options`, padrão `config.ovalue`
- `buttonapply {String}` opcional, um rótulo para o botão `Apply` em colunas, padrão: `Apply`
- `class {String}` opcional, um nome de classe de coluna personalizada
- `empty {String/Boolean}` opcional, pode reescrever o valor vazio com o valor definido no campo vazio (o valor `true` usa o valor `---` como um valor padrão)
- `min {Number}` __editável apenas__ um min. valor
- `max {Number}` __editável apenas__ um valor máximo
- `required {Boolean}` _Editar somente_
- `dirsearch {String/Boolean}` é um locatário para a pesquisa `j-Directory`, boolean com `false` irá desativar a pesquisa
- `type {String}` opcional, pode conter um tipo de dados (`string`, `boolean`, `date`, `number`, `email`, `phone` ou `url`) para o campo
- `editable {Boolean}` permite a edição
- `currency {String}` um nome de moeda (deve ser definido em `DEF.currencies`)
- `editable {String}` Um caminho para o personalizável `function(meta)`, importante: `meta.next(new_value)` ou `meta.cancel()`
- `colorize {Boolean}` permite a coloração do valor
- `monospace {Boolean}` permite o tipo de fonte monoposto
- __NEW__ `raw {Boolean}` permite/disabilita a escape HTML em filtros de coluna (default: `false`)
- __NEW__ `pair {Boolean}` permite/disabilita o valor automático em conjunto com a configuração `options` (default: `false`)

__Controle de rodovias (NEW)__:

- Pode ser definido como tipo de coluna `controls`
- deve ser definida coluna `template` (Tangular, `row` é um modelo para Tangular para cada linha)
- Veja o exemplo
- O botão de evento `click` é capturado para `config.button`

__Filtração__:

- `numbers`: (1) `number` busca um número exato, (2) `number - number` é um intervalo entre os números
- `strings`: (1) `string` busca uma linha exata, (2) `string1, string2, string3` é um critério de pesquisa múltiplo
- `dates`1 - Ano `2017` Todas as datas do ano (2) `2017-02-12 - 2017-03-13` <--> `02.12.2017 - 13.03.2017` É um intervalo entre as datas, (3) `12-20 - 12-31` <--> `20.12 - 31.12` Intervalo entre as datas no ano atual e (4) `2017-01 - 2018-05` <--> `01.2017 - 05.2018` ou (5) `-5 days` <--> `-1 week` <--> `-10 years`

__Métodos__:

- `component.redraw([reselect_again])` pode redescrever as linhas novamente (só para modificações, se você remover alguma linha que você precisa para atualizar o modelo inteiro)
- `component.resetfilter()` pode reinstalar um 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])` pode exportar linhas com renderização do servidor
- `component.appendrow(row_object, [scrolldown], [prepend])` apêndidas e render
- `component.redrawrow(row_object, [new_object_row])` redraws linha ou __NEW__: substitui + redrauds `row_object` com um novo `new_object_row`
- `component.clear()` clarifica todas as mudanças
- `component.select(row)` seleciona `row` deve ser o mesmo objeto que na fonte de dados
- `component.editcolumn(row_index, col_index)` executa internamente o `config.change` (só para uso avançado)
- `component.applyfilter(obj)` pode aplicar um filtro personalizado `{ name: 'Peter', age: '20 - 50' }`
- `component.resetcolumns()` Colunas de Reset
- `component.readfilter()` retorna um filtro atual
- `component.rebind(schemaname__or__columnsdeclaration)` o método reflete o esquema
- `component.reload()` executa `config.exec` com o filtro e a classificação atuais
- `component.empty()` em todas as linhas
- `component.redrawcolumns()` redraw colunas sem reinstalar
- __NEW__: `component.schema(name)` altera um esquema e refresca dados

__Propriedades__:

- `component.meta` retorna informações interna sobre filtros, colunas e linhas

__Bom para saber__:

- `NULL('link.to.data')` Avaliação `config.exec`
- `SET('link.to.data', data, 'noscroll')` --> tipo `noscroll` interfere com a redefinição de rolamento

__Como estender uma classe de linha?__

- olhando para a linha `{{ if active }}`, ele estende uma classe de linha adicionando `dg-active-class` se o `active` for válido

```javascript
[
	'{{ if active }} dg-active-class{{ fi }}',
	{ name: 'name', text: 'Name', width: 200 },
	// other columns ...
]
```

__múltiplos esquemas__:

```html
<ui-component name="datagrid" path="obj">

	<script type="text/plain" data-id="SCHEMA_A">
		[
			{ name: 'name', text: 'Name', width: 200 },
			// ...
		]
	</script>

	<script type="text/plain" data-id="SCHEMA_B">
		[
			{ name: 'price', text: 'Price', width: 100 },
			// ...
		]
	</script>

</ui-component>

<script>
	// Usage
	var obj = {};
	obj.schema = 'SCHEMA_A';
	obj.items = [];

	// Changing of schema
	setTimeout(function() {
		obj.schema = 'SCHEMA_B';
		obj.items = [];
		UPD('obj');
	}, 5000);
</script>
```

Use-o com `<ui-component name="datagrid">`Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço `DEF.fallback` (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT.

```html example.html
<ui-component name="LAZY directory"></ui-component>
<ui-component name="datagrid" path="items" config="margin:22;button:clicked">
	<script type="text/plain">
		[
			{ name: 'name', text: 'Name', width: 200 },
			{ name: 'price', text: 'Price', align: 1, alignfilter: 1 },
			{ name: 'published', text: 'Public', align: 1, options: [{ name: 'yes', id: true }, { name: 'no', id: false }], type: 'boolean' },
			{ name: 'description', text: 'Description', filter: 'Search in description' },
			{ name: 'created', text: 'Created', template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignfilter: 2, alignheader: 2 },
			{ type: 'controls', template: '<button name="show"><i class="ti ti-search"></i><span>Show</span></button><button name="edit"><i class="ti ti-pencil"></i></button><button name="remove"><i class="ti ti-trash red"></i></button>' }
		]
	</script>
</ui-component>

<script>

	var items = [];
	for (var i = 1; i < 90; i++)
		items.push({ name: '{0} Lorem ipsum dolor'.format(i), published: i % 5 !== 0, description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: i + 100, created: new Date().add('-5 days') });

	function clicked(btnname, row, button, e) {
		console.log(btnname, row);
	}

</script>
```