j-DataGrid

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

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:

{
	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:

[{ 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
dates1 - 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

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

múltiplos esquemas:

<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.

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>