Grid Main (grid novo)

[fabio.sampaio]

Grid Main

dependências: jquery v1.8.2

Documentação em processo - WIP

O Grid Main é um componente desenvolvido como uma alternativa simplificada ao grid já existente na Intranet. Ele foi pensado para ser utilizado com um conjunto de propriedades passadas ao se chamar o componente, usando JQuery.

<div id="filters" class="filters">
    ...
</div>

<div class="grid_main"></div>

<script type="text/javascript" src='/lib/js/grid_main.js'></script>
<script type="text/javascript">
    $(".grid_main").grid_main({
        ...
    });
</script>

A div filters é onde serão inseridos os filtros do grid.

Abaixo uma lista com as propriedades e seus possíveis valores:

* Valores com asterisco são obrigatórios para o funcionamento do componente

---

* Rotas

Propriedade	Descrição
* header	Rota de títulos das colunas
* list	Rota de listagem de dados na tabela
* list_count	Rota que traz o numero total de registros
* click_route	Rota chamada no duplo clique da linha (mais detalhes)
* can_delete_route	Rota chamada antes do delete para confirmação
* delete_route	Rota para deletar um ou mais registros

---

Parâmetros Visuais

Propriedade	Descrição	Tipo de Input	Default
* title	Título da tabela	String	“”
align_column	Alinhar uma coluna específica (mais detalhes)	Array[Array]	[]
column_width	Largura das colunas em porcentagem	Array[Integer]	[]
main_align	Alinhamento de todas as colunas da lista	String	“center”
max_lines	Número máximo de linhas na tabela	Integer	12
no_order	Colunas que não devem ser ordenadas	Array[String]	[]
search	Define se será mostrada o input de pesquisa no grid	Boolean	true

---

Parâmetros de Interação com o Grid

Propriedade	Descrição	Tipo de Input	Default
content_box_items	Items que aparecem no right click (mais detalhes)	Array[Array]	[]
nav_btns	Botões de navegação (mais detalhes)	Array[Array]	[]
params_function_input_ids	ID’s dos inputs de pesquisa do grid	Array[String]	“”
readonly_double_click	Função executada no duplo clique de linhas readonly	Function	null
right_click	Flag para habilitar right click	Boolean	false
right_click_elements	Array de tipos de linhas do right click (mais detalhes)	Array[String]	[“all”]
url_params	Flag para colocar parametros na URL na busca	Boolean	true

---

Parâmetros de Callback

Propriedade	Descrição	Tipo de Input	Default
after_list_callback	Função chamada após o list do grid	Function	“”
delete_callback	Função chamada após o delete de um item	Function	“”
readonly_key_up	Função executada no evento keyUp de linhas readonly	Function	“”

---

Parâmetros de Classe

Propriedade	Descrição	Tipo de Input	Default
clear_fields_class	Classe que identifica o botão de Limpar	String	“btn_clear”
submit_class	Classe que identifica o botão de Enviar	String	“btn_submit”
disabled_class	Classe que identifica as linhas desabilitadas	String	“disabled”
readonly_class	Classe que identifica as linhas readonly	String	“readonly”

---

Exemplo de Implementação

function tornarFixo(){ ... }
function tornarFreelancer(){ ... }
function tornarFreelancerDblClick(){ ... }

$(".grid_main").grid_main({
    title: 'Cadastro de Freelancers',
    header: 'json.cadastro.freelancer.grid.header',
    list: 'json.cadastro.freelancer.grid.list',
    list_count: 'json.cadastro.freelancer.grid.rowcount',
    click_route: 'json.cadastro.freelancer.new',
    can_delete_route: 'json.cadastro.freelancer.grid.can_del',
    delete_route: 'json.cadastro.freelancer.grid.del',
    max_lines: 30,
    no_order: ["Projetos"],
    main_align: "center",
    column_width: [8, 13, 13, 15, 15, 8, 12, 10, 6],
    right_click_elements: ['normal', 'readonly'],
    content_box_items: [
        ['Usuário Regular', tornarFixo], // terceiro parametro opcional
        ['Freelancer', tornarFreelancer, 'readonly']
    ],
    params_function_input_ids: ["categories", "skills", "status", "busca"],
    readonly_double_click: tornarFreelancerDblClick,
    align_column: [["Login", "right"],["Projetos", "left"]],  
    nav_btns: [["0","Todos"],["1","Freelancer"],["2","Regular"]]
});

Mais detalhes sobre as propriedades:

align_column

Essa propriedade recebe um array de arrays contendo 2 parâmetros:

[ [“label_da_coluna”, “alinhamento”], [ … ], … ]

Sendo eles:

Parâmetro	Descrição
* label_da_coluna	Nome que aparece como label da coluna
* alinhamento	Alinhamento da coluna. Valores: “center”, “left” ou “right”

---

click_route

Essa propriedade pode receber uma String ou uma Função como parâmetros:

click_route: 'json.cadastro.freelancer.new' // recebe uma string como parametro

ou

function createNewBudget(el){ ... }

$(".grid_main").grid_main({
    click_route: createNewBudget // recebe a funcao como parametro
});

Se o parâmetro passado for uma Função, ela recebe um objeto do DOM (a linha clicada) como parâmetro (el).

---

content_box_items

Essa propriedade recebe um array de arrays contendo 3 parâmetros:

[ [“nome_do_item”, funcao_on_click, “tipo_de_visualizacao”], [ … ], … ]

Sendo eles:

Parâmetro	Descrição	Default
* nome_do_item	Nome que aparecerá como label do Item	-
* funcao_on_click	Função a ser executada no click (nao colocar parenteses)	-
tipo_de_visualizacao	Define em que tipos de linha o Item aparecerá no right click. Clique para mais detalhes: Tipos de Visualização	“all”

---

nav_btns

Essa propriedade recebe um array de arrays contendo 2 parâmetros:

[ [“id”, “desc”], [ … ], … ]

Sendo eles:

Parâmetro	Descrição
* id	ID do item de navegação
* desc	Nome que aparecerá como label do Item

---

right_click_elements

Essa propriedade recebe um array de Strings contendo os tipos de linha em que o right click deve mostrar o content box.

Valores possíveis do array: Tipos de Visualização

---

Tipos de Visualização

Valores possíveis:

all: Item aparece em todas as linhas
normal: Item aparece nas linhas habilitadas
readonly: Item aparece nas linhas readonly
disabled: Item aparece nas linhas desabilitadas