j-Grid

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

O sistema de rede bootstrap

__Data-Source_ precisa de conter:

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

filter {Boolean} mostra um filtro (opcional, padrão: true)
filterlabel {String} um alojamento padrão para todos os filtros (opcional)
external {Boolean} é uma fonte de dados externa (carregamento de dados dinâmico) (optinal, padrão: false)
pluralizepages {String} pluralização para páginas (opcional, padrão: # pages,# page,# pages,# pages)
pluralizeitems {String} pluralização para itens (opcional, padrão: # items,# item,# items,# items)
exec {String} um link para function(type, filter, sort, page), é avaliado se a rede realiza algumas operações
padding {Número} de altura (opcional, padrão: 0)
autosize {Boolean} permite o tamanho automático completo (opcional, padrão true)
boolean {String} um valor para a filtragem de valores booleanos (opcional, padrão: true|on|yes)
pagination {Boolean} mostra o painel de página (opcional, padrão: false)
init {Função} uma função de init para, por exemplo, colunas personalizadas
checked {Função} se as linhas contêm <input type="checkbox então esta função será avaliada quando a caixa de verificação é verificada

Propriedades da coluna:

name {String} um nome de campo no objeto
text {String} um rótulo
title {String} uma coluna ferramenta (opcional)
size {Número} uma coluna de largura: 1 Pequeno e 2 O meio, 3 grande em 4 muito grande (opcional, padrão) 1)
size {String} uma largura de coluna em pixels, o valor precisa conter px etc. 20px
filter {String/Boolean} um locatário para o filtro ou boolean pode desativar o filtragem para esta coluna (opcional)
format {String/Number} para valores de formatação (string para data, number para números)
background {String} uma cor de fundo (opcional)
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
render {String/Function(valor, coluna, linha)} uma renderização personalizada, string é avaliado como uma função de arco
header {String/Function(coluna)} uma renderização personalizada do cabeçalho, string é avaliado como uma função de arco
sort {Boolean} permite a classificação (opcional, padrão: true)
class {String} classes adicionais para a coluna, por exemplo, hidden-xs
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

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 pesquisa todas as datas neste ano, (2) 2017-02-12 / 2017-03-13 é um intervalo entre datas, (3) 20.12 / 31.12 um interval entre datos no ano atual

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

<style>
	body{padding:50px;margin:0;background-color:#F0F0F0;font-family:Arial;height:100%;}
	html{height:100%;}
</style>

<ui-component name="grid" path="griddata" config="exec:filtering">
	<script type="text/plain">
		[
			{ name: 'name', text: 'Name', size: 2, render: 'n => n.toUpperCase()', filter: 'Search in name' },
			{ name: 'price', text: 'Price', size: 1, format: 2, filter: 'Search in prices', align: 'right' },
			{ name: 'description', text: 'Description', size: 3, filter: 'Search in description' },
			{ name: 'created', text: 'Created', size: 1, filter: 'Search in dates', format: 'dd.MM.yyyy', align: 'center' }
		]
	</script>
</ui-component>

<script>
	var griddata = { page: 1, count: 18, pages: 3, limit: 6, items: [] };
	var items = griddata.items;

	items.push({ name: '1 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 233, created: new Date().add('-5 days') });
	items.push({ name: '2 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 122, created: new Date().add('-1 year') });
	items.push({ name: '3 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 119, created: new Date().add('-1 month') });
	items.push({ name: '4 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 35.34, created: new Date().add('-14 days') });
	items.push({ name: '5 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 439.33, created: new Date().add('-5 hours') });
	items.push({ name: '6 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 111.12, created: new Date().add('-349 minutes') });

	// Auto-resize
	$(window).on('resize', function() {
		setTimeout2('resize', function() {
			EMIT('resize');
		}, 100);
	});

	function filtering(type, filter, sort, page) {
		console.log(type, filter, sort, page);
	}

</script>