softgrid v0.0.1
Softgrid
Diretiva de grid para Angularjs com Bootstrap e Font Awesome.
Instalação
bower install softgrid
bower install softgrid --save
Importante: Injetar modulo 'softgrid.directive' no projeto.
Utilização
//HTML
<softgrid cols="vm.colunas" actions="vm.acoes" data="vm.data"> </softgrid>
// JAVASCRIPT
function _gerarGrid() {
vm.colunas = [
{title: "Nome", item: function(item){return item.nome}},
{title: "Cargo", item: function(item){return item.cargo}, align: "center"},
{title: "Telefone", item: function(item){return item.contato.telefone}}
];
vm.acoes = [
{title: "Editar", icon: "fa fa-info-circle", function: _teste},
{title: "Excluir", icon: "fa fa-wrench", function: _teste},
{title: "Bloquear", icon: "fa fa-calculator", function: _teste}
];
vm.data = [
{nome: "Jack", cargo: "Programador", contato: {tipo: "residencial", telefone: "12 90101-0202"}},
{nome: "Nunes", cargo: "Programador", contato: {tipo: "residencial", telefone: "12 90101-0303"}},
{nome: "Peixoto", cargo: "Programador", contato: {tipo: "residencial", telefone: "12 90101-0404"}}
];
}
function _teste(item){
alert(item);
}
Atributos
cols
Define as colunas da grid.
<softgrid cols="vm.colunas"> </softgrid>
vm.colunas = [
{title: "Nome", item: function(item){return item.nome}},
{title: "Cargo", item: function(item){return item.cargo}, align: "center"},
{title: "Telefone", item: function(item){return item.contato.telefone}}
];
Propriedade | Função | Valores | Exemplo |
---|---|---|---|
default | Se a coluna é exibida por padr]ao | boolean | true |
type | Define o tipo da Coluna | string | "text" |
title | Define o header da coluna | string | "Nome do Usuário" |
item | Define a propriedade do objeto que aparece na coluna | function | function(item){ return item.nome } |
align | Alinhamento do texto na coluna | "left", "center", "right" | "center" |
maxLength | Tamanho máximo de caracteres na coluna | int | 20 |
popOver | Mostra a coluna em um balão | boolean | true |
Tipos de Colunas
Checkbox { type: "checkbox", title: "Selecionar", callback: function, item: row.item }
Subgrid
{ type: "subgrid", title: "Detalhes", item: row.item }
Menu { type: "menu", title: "Opções", showRow: scope.sgControls.showAction, menu: scope.actions }
Action { type: "action", title: "Imprimir", callback: function, icon: "fa-printer") }
Switch { type: "switch", title: "Ativar/Desativer", item: row.item, callback: function }
Favorite
{ type: "favorite", title: "Favorito", item: row.item, callback: function, showRow: function }
Progress { type: "progress", title: "Progresso", class: function, item: row.item }
Approve { type: "approve", title: "Aprovação", showCol: function, showRow: function, callback: function }
data
Um array contendo os objetos que deverão ser carregados na grid.
<softgrid data="vm.data"> </softgrid>
vm.data = [
{nome: "Jack", cargo: "Programador", contato: {tipo: "residencial", telefone: "12 90101-0202"}},
{nome: "Nunes", cargo: "Programador", contato: {tipo: "residencial", telefone: "12 90101-0303"}},
{nome: "Peixoto", cargo: "Programador", contato: {tipo: "residencial", telefone: "12 90101-0404"}}
];
sg-controls
Controles fullscren:
vm.controls.fullscreen = {on: "Mostrar filtros", off: "Esconder filtros", top: 60, zindex: 999}; //todos opcionais
Dados Filtrados (v1.3.5)
vm.controls.filtered = [];
//basta inicializar este objeto para diretiva retornar os dados que estao filtrados na grid
width
Define um tamanho fixo de largura para a grid.
<softgrid cols="vm.colunas" actions="vm.acoes" data="vm.data" width="1000"> </softgrid>
hide
Um objeto passado como atributo da diretiva informando os controles que deverão ser escondidos.
<softgrid cols="vm.colunas" actions="vm.acoes" data="vm.data" hide="vm.esconder"> </softgrid>
Controles para Esconder |
---|
filter |
options |
pagination |
//Esconder os controles um por um:
vm.esconder = {filter: true};
//Esconder todos os controles:
vm.esconder = {all: true};
template
Define uma classe CSS customizada para a grid.
7 years ago