ASP.NET MVC + Flexigrid ( Parte 4 ) – Criando botões e navegando entre os elementos do grid

Standard

Dando continuidade a série sobre como implementar o Flexigrid em aplicações ASP.NET MVC, neste post demonstrarei como podemos criar botões e navegar entre as linhas e itens do grid.

Criando Botões

Básicamente para criar botões basta definir a propriedade buttons, e criar as funcions que os mesmos chamam ao efetuar o click, veja:

buttons:
[
    { name: 'Adicionar', onpress: adiciona, title: 'Adicionar' },
    { name: 'Editar', onpress: edita, title: 'Editar' },
    { name: 'Excluir', onpress: exclui, title: 'Excluir' },
    { name: 'Verificar Seleção', onpress: visualizar, title: 'Visualizar' }
],

Podemos perceber que é bem intuitivo, onde o onpress define qual a function será chamada ao efetuar o click, vamos cria-las:

function adiciona(com, g) {
//Implementação da rotina...
}

function edita(com, g) {
//Implementação da rotina...
}

function exclui(com, g) {
//Implementação da rotina...
}

function visualizar(com, g) {
//Implementação da rotina...
}

NOTA: Os parâmetros “com” e “g” definem o elemento atual que foi clicado, exemplo: Imaginando um click no botão Adicionar e levando em consideração que ná página existem outros flexigrids:
-com seria o nome do elemento clicado, no caso “Adicionar”
-g seria o elemento do flexigrid inteiro referente ao botão clicado

 

Adicionado ícones aos botões

Podemos customizar nosso botão da forma que desejarmos, irei colocar alguns ícones no mesmo para uma melhor aparência.

Primeiramente já existe uma propriedade nos elementos buttons chamada bclass, onde podemos definir uma classe ao nosso botão, irei definir da seguinte forma:

{ name: 'Adicionar', bclass: 'add', onpress: adiciona, title: 'Adicionar' },
{ name: 'Editar', bclass: 'edit', onpress: edita, title: 'Editar' },
{ name: 'Excluir', bclass: 'delete', onpress: exclui, title: 'Excluir' },
{ name: 'Verificar Seleção', onpress: visualizar, title: 'Visualizar' }

Agora, em nosso arquivo Site.css vamos defini-las:

.flexigrid div.fbutton .add, .contextMenu div.fbutton .add
{
   background: url(../../Scripts/Flexgrid/css/images/add.png) no-repeat center left;
}
.flexigrid div.fbutton .edit, .contextMenu div.fbutton .edit
{
   background: url(../../Scripts/Flexgrid/css/images/edit.png) no-repeat center left;
}
.flexigrid div.fbutton .delete, .contextMenu div.fbutton .delete
{
   background: url(../../Scripts/Flexgrid/css/images/delete.png) no-repeat center left;
}

NOTA: As imagens definidas (add.png, edit.png e delete.png) não vem juntas ao efetuar o download do flexigrid.

Navegando entre os elementos do grid

Para a exemplificação irei incluir o seguinte código nas functions já criadas:

function edita(com, g) {

    //Verifica se existe apenas um item selecionado
    if ($('.trSelected', g).length == 1) {
        //Implementação da rotina...
    }
    //Verifica se existe mais que um item selecionado
    else if ($('.trSelected', g).length > 1)
        alert('Por favor, selecione <b>somente</b> um item para editar. Obrigado.', 'ATENÇÃO');
    else
        alert('Por favor, selecione um item para editar. Obrigado.', 'ATENÇÃO');
}

function exclui(com, g) {

    //Caso exista alguma linha selecionada
    if ($('.trSelected', g).length > 0) {

        //Obtém todas as linhas selecionadas do grid
        var linhas = $('.trSelected', g);

        //Percorre cada linha selecionada do grid
        for (i = 0; i < linhas.length; i++) {
            var codCliente = $('.trSelected', g)[i].id.substr(3);
            //Implementação da rotina...
        }

        //Recarrega o grid
        grid.flexReload();
    }
    else {
        alert('Por favor, selecione um item para excluir. Obrigado.', 'ATENÇÃO');
    }
}

function visualizar(com, g) {

    var linhas = $('.trSelected', g).length;

    if (linhas == 1) {

        //Seleciona o Índice inteiro
        var codClienteIndiceInteiro = $('.trSelected', g)[0].id;

        //Seleciona apenas o número do Índice
        var codClienteIndice = $('.trSelected', g)[0].id.substr(3);

        //Seleciona os demais valores do grid
        var codCliente = $('.trSelected', g).find('td').eq(1).text();
        var cpf = $('.trSelected', g).find('td').eq(2).text();
        var endereco = $('.trSelected', g).find('td').eq(4).text();

        alert("Índice completo: " + codClienteIndiceInteiro +
    "nNº Índice: " + codClienteIndice +
    "nCódigo: " + codCliente +
    "nCPF: " + cpf +
    "nEndereço: " + endereco);
    }
    else if (linhas > 1)
        alert('Você selecionou ' + linhas + 'linha(s)', 'ATENÇÃO');
    else
        alert('Por favor, selecione uma linha para visualizar. Obrigado.', 'ATENÇÃO');

}

Toda linha que é selecionada fica marcada com a classe .trSelected, desta forma para obtermos as linhas selecionadas basta isso:

$(‘.trSelected’, g)

Para selecionarmos o id da linha selecionada (onde i é o indice da linha):

$(‘.trSelected’, g)[i].id;

Por padrão o flexigrid irá retornar “row” + número do id, desta forma para selecionarmos apenas o número do id podemos realizar isso:

$(‘.trSelected’, g)[i].id.substr(3);

Para selecionarmos alguma coluna da linha selecionada:

$(‘.trSelected’, g).find(‘td’).eq(2).text();

 
Bom, por enquanto é isso! 😉

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *