Documentação

DynamicGrid v1.0.0 - Bruno P. Sousa

Exemplo de Integração

<html>
<head>
<link href="dynamicgrid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dynamicgrid.js"></script>
<script type="text/javascript">
window.onload = function() {
    var colunas = [
        {name : "Código", width : 65, sortable : true},
        {name : "Nome", width : 170, sortable : true},
        {name : "Cidade", width : 130, sortable : true},
        {name : "Empresa", width : 130, sortable : true},
        {name : "Contratação", width : 100, sortable : true},
        {name : "Salário", width : 80, sortable : true}
    ];

    var dados = [
        ["0001", "Rubens dos Santos", "São Paulo", "Empresas Star Force", "01/07/2000", "1.250,00"],
        ["0002", "Cerdos Ribeiro", "Campinas", "California Eventos", "12/02/2006", "2.600,00"],
        ["0003", "Squall Coracao de Leão", "Limeira", "Estofados S/A", "03/05/2005", "800,00"],
        ["0004", "Aida Margarida de Sousa", "São Paulo", "Roupas da Moda", "08/02/2008", "2.000,00"]
    ];

    var grid = new DynamicGrid();
    grid.setColumns(colunas);
    grid.setStoreData(dados);
    grid.draw("exemplo");  	
}
</script>	
</head>
<body>
	<div id="exemplo"></div>
</body>
</html>

» Opções

gridID

(String)

ID do elemento HTML

dirRoot

(String)

Diretório de localização dos arquivos do grid

width

(Integer)

Define a largura do grid, o valor deve ser passado como inteiro em pixels

height

(Integer)

Define a altura do grid, o valor deve ser passado como inteiro em pixels

serverSort

(Boolean)

Indica se deve utilizar ordenação pelo servidor

paintRow

(Boolean)

Indica se deve colorir as linhas alternativas do grid

multiSelect

(Boolean)

Permite selecionar múltiplas linhas

checkBox

(Boolean)

Indica se deve exibir caixa de checagem

rowSelect

(Boolean)

Indica se deve selecionar linhas

numberRows

(Boolean)

Indica se deve exibir uma caixa contendo o número da linha

colResize

(Boolean)

Permite redimensionar as colunas

minWidthCol

(Integer)

Largura mínima para o redimensionamento da coluna

moveColumn

(Boolean)

Indica se deve permitir a troca de colunas

columns

(Array)

Lista com a definição das colunas, você pode utilizar também o método "setColumns"

» Métodos

draw(String element)

Desenha o elemento grid na tela

repaint()

Método utilizado para atualizar o grid

selectAll()

Seleciona todas as linhas do grid (a opção multiSelect deve estar ativada)

deselectAll()

Retira a seleção de todas as linhas do grid

setStoreData(Array data)

Método utilizado para definir os dados do grid, os dados devem ser passados em um array

setColumns(Array data)

Método utilizado para definir as culunas do grid, os dados devem ser passados em um array

getSelected()

Pega todas as linhas selecionas e retorna um array com os dados das células

getSelectedCount()

Retorna o número de linhas selecionadas

getRowCount()

Retorna o número de linhas

getStoreData()

Retorna o array dos dados

getStructure()

Retorna o ponteiro do elemento grid

» Eventos

Para definir os eventos no DynamicGrid utilize o objeto bindEvent, confira um exemplo abaixo de como utilizar.

Utilização de Eventos

grid.bindEvent.cellclick(function(colNumber, rowNumber, event) {
    alert("Olá DynamicGrid!");
});

Você pode passar diversas funcões em um mesmo evento, confira a lista abaixo de todos os eventos disponíveis.

cellclick()

Dispara ao clicar com o mouse em uma célula ou linha

celldblclick()

Dispara ao clicar duas vezes com o mouse em uma célula ou linha

beforedraw()

Dispara antes de desenhar o grid na tela

afterdraw()

Dispara após desenhar o grid na tela

scroll()

Dispara ao mover a barra de rolagem do grid