j-DataTable

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

BETA: Este componente é direcionado para a SPA e lista de servidores.

Apoiando a página
O sistema de rede bootstrap
Apoio à Sorte
Suporte ao escorregamento vertical/horizontal
Responder
Apresentação - Modo escuro

__Data-Source_ precisa de conter:

{
	cols: [{ name: 'id', ... }], // optional, can be defined inline in HTML
    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
}

Configuração:

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 NUMBER A altura ou selector para jQuery.closest()
NEW minheight {Number} altura mínima da rede, funciona com fluid e auto altura (default: 300)
NEW parent {String} selector para a opção de altura auto (default: window)
margin {Number} uma margem superior para altura (opcional, padrão: 0)
click {String} um link para function(row, grid, row_el), é executado se o usuário clicar em uma linha
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
exec {String} um link para function(type, page, sort) 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
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)
colwidth {Number} uma largura padrão para colunas (default: 150)
editable {String} um link para function(opt) quando o usuário realiza edição
contextmenu {String} um link para function(e, grid) quando o usuário aumenta o menu de contexto

Propriedades da coluna:

name {String} um nome de campo no objeto de linha
text {String} é um rótulo de coluna, texto com .fa fa-home renderá FontAwesome icon
width {Number} uma coluna largura (opcional, padrão config.colwidth)
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
sort {Boolean} permite a classificação (opcional, padrão: false)
format {String/Number} pode ser usado para datas e números (conto de decimais) campo (opcional), por exemplo, dd.MM.yyyy
currency {String} um formato de moeda, basta adicionar uma moeda
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)
type {String} opcional, pode conter um tipo de dados (boolean, date ou number) para o campo
editable {Boolean} permite a edição

Métodos:

component.redrawrow(row_object/index) 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.rebind(columnsdeclaration) o método reflete o esquema
NEW: component.reload() executa config.exec com o filtro e a classificação atuais
NEW: component.empty() empties todas as fileiras

Bom para saber:

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

Use-o com <ui-component name="datatable">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

<div style="width:500px;height:400px">
	<ui-component name="datatable" path="data" config="highlight:1;exec:paginate;editable:editable;checked:checked;margin:22">
		<script type="text/html">
			[
				{ name: 'name', text: 'Opportunity name', width: 200, sort: 1, editable: 1 },
				{ name: 'value', text: 'Value', width: 100, sort: 1, type: 'number', format: 2 },
				{ name: 'status', text: 'Status', width: 100, editable: 1 },
				{ name: 'owner', text: 'Owner', width: 200 },
				{ name: 'newsletter', text: 'Newsletter', width: 100, type: 'boolean' },
				{ name: 'date', text: 'Date', width: 200, sort: 1, type: 'date', format: 'yyyy-MM-dd' }
			]
		</script>
	</ui-component>
</div>

<script>

	function checked(rows) {
		console.log(rows);
	}

	function editable(opt) {
		// opt.row
		// opt.col
		// opt.value
		// opt.next(NEW_VALUE);
		opt.next(opt.value + ' (modified)');
	}

	function paginate(type, page, sort) {
		console.log('Page:', page, 'sort:', sort);
	}

		var data = {};

		data.items = [];
		data.pages = 53;
		data.page = 3;

		// data.cols.push({ name: 'name', text: 'Opportunity name', width: 200, sort: true });
		// data.cols.push({ name: 'value', text: 'Value', width: 100, sort: true });
		// data.cols.push({ name: 'status', text: 'Status', width: 100 });
		// data.cols.push({ name: 'owner', text: 'Owner', width: 200 });
		// data.cols.push({ name: 'date', text: 'Date', width: 200, sort: true });

		for (var i = 0; i < 50; i++)
			data.items.push({ name: GUID(20), value: Math.random() * 1000 >> 0, status: GUID(10), owner: 'Peter Širka', newsletter: i % 3 === 0, date: NOW });
</script>