0

Olá, Comunidade!

Eu tenho testado alguns plugins jQuery para gerar tabela que suportam CRUD. Aqui minha review deles.

  1. jQuery jTable

Excelente plugin, mas possui limitações irritantes como a rolagem horizontal, que não existe. Se você tiver uma tabela com muitos campos, a div onde a tabela é criada adiciona um scrolling-x, mas o cabeçalho e o rodapé da tabela rolam junto com o corpo. Possui um plugin de auto filtro, mas não com select boxes. O grid é gerado por meio de JSON. Isso é ótimo, pois os campos do formulário de adição e de inclusão de dados no servidor utilizam os campos retornados para gerar cada input, select ou textarea. Como utiliza jQuery UI, precisamos somente passar os tipos de dados de cada campo e a formatação é automática. Não é compatível com Bootstrap. Alguns pontos de conflito são os modais e os formulários, o que é grave. É possível tratar as ações independentemente. Exemplo, eu precisava incluir todos os campos em um BD, mas somente podia alterar alguns uma vez incluídos. O plugin permite fazer isso e não desabilita os campos que não podem ser editados, preservando-os no formulário de inclusão.

  1. jqGrid

Tem um ótimo potencial, mas a documentação é horrível, péssima mesma. É compatível com Bootstrap e jQuery UI (nativo). Permite que as ações sejam tratadas independentemente também, mas é um pouco mais complicado, por conta do posicionamento de cada item (primeiro tem que ser o update, depois o insert, depois o delete, etc, e ai de você se mudar a ordem por descuido),s e pelo menos a documentação ajudasse. Dá pra fazer tudo perfeitamente, mas não tem o auto filtro. No lado servidor, só precisa gerar o JSON mesmo e pronto. Paginação e ordenação de resultados o lado cliente cuida. Eu gostei muito, mas como não é intuitivo e a documentação não ajuda, ficou quase impossível de tratar as ações de CRUD separadamente. Tudo envolve funções, então, seu código fica gigante pra uma tabela... quer dizer, muito grande pra qualquer coisa, se você precisar de algo completo.

  1. DataTables

Muito bom também, mas tudo é server side praticamente e é complicado tratar o insert e o update separadamente. Possui um modo de auto filtro, mas envolve o lado servidor. Não gostei disso. Os códigos para gerar a tabela completa são grandes e cada passo envolve uma query praticamente, então, fica pouco escalável. Tem muito trabalho server side, mas o resultado fica bom. Compatíivel com Bootstrap e jQuery UI.

  1. BootStrap Table

Excelente plugin também. Acho que deve ser o melhor até certo ponto. Permite edição inline e trata separadamente o insert e o update, mas isso porque não tem um form de insert "nativo", você tem que gerar na mão mesmo. Esse é o único problema:o form de inclusão de dados. De resto, tudo do lado cliente, até o exportar pro Excel pode ser feito do lado cliente, PDF e imagem também. Dá pra fazer um auto filtro incluindo manualmente os forms dos campos que serão pesquisados na tabela, mas a busca é no lado cliente. Quase perfeito!

AGORA EU CHORO

Eu preciso de um plugin que gere a tabela de modo fácil e os formulários também, mas que permita o tratamento independente do update e do insert. Eu PRECISO incluir auto filtros e subtotal e soma. Alguém sabe se esse milagre existe? Ou como eu posso utilizar esses plugins para gerar um CRUD completo, mas com as especificações que eu passei?

3
  • 1
    Eduardo, sua pergunta está muito aberta. Mas deixo uma dica: veja dos grids o qual vc mais se simpatiza - questão de gosto mesmo - e trabalha para fazer esse grid realizar o que precisa. E qdo vc tiver uma dificuldade pontual, posta aqui que te ajudamos. PS: Eu gosto do DataTables, muito flexivel, level, tem muito recurso apenas client-side, auto-filtro, paginação, edição dentro do grid, etc. Commented 3/12/2015 às 18:36
  • Como eu posso restringir esta pergunta? É que o DataTables, apesar de ter muito recurso, tudo que for feito pelo usuário tem que ser tratado no lado servidor. Ou eu estou errado nisso? E eu sinceramente espero está errado, porque eu preciso destes recursos e aparentemente não os encontrei. Obrigado, sir!!! Commented 3/12/2015 às 18:39
  • 1
    No site de exemplos do DataTable todos os exemplos são client-side, salvo os da categoria server-side. Commented 3/12/2015 às 19:37

1 Resposta 1

0

Olá, Comunidade!

Resolvi usar DataTables e tem tudo o que eu pedi na pergunta original: autofiltro (com select ou input), dá para ordenar, pesquisar, exportar para PDF ou Excel, copiar, imprimir, tem um editor (que não é livre, tem que pagar a licença)... bem, é bem completo!

Aqui está um código de exemplo:

$('#tabela').DataTable({
        scrollX: true,
        dom: "Bfrtip",
        idSrc: 'id',
        ajax: "json.php",
        columns: [
            //tem que se o mesmo nome das chaves do arquivo json retornado
            {data: "campo1"},
            {data: "campo2"},
            {data: "campo3"},
            {data: "campo4"},
            {data: "campo5"},
            {data: "campo6"}
        ],
        select: true,
        //botoes
        buttons: [
            {extend: "create", editor: editor,
                formButtons: [
                    'Salvar',
                    {label: 'Cancelar', fn: function () {
                            this.close();
                        }
                    }
                ]
            },
            {extend: "edit", editor: editor,
                formButtons: [
                    'Salvar',
                    {label: 'Cancelar', fn: function () {
                            this.close();
                        }
                    }
                ]
            },
            {extend: "remove", editor: editor,
                formButtons: [
                    'Salvar',
                    {label: 'Cancelar', fn: function () {
                            this.close();
                        }
                    }
                ]
            },
            {extend: "print", text: "Imprimir"},
            {extend: "copy", text: "Copiar"},
            {extend: "excel"}
        ],
        // codigo do auto filtro
        initComplete: function (row, data, start, end, display) {
            var api = this.api(), data;
            api.columns().every(function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                    );

                            column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                        });

                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>');
                });
            });
        },
        // codigo do total e do subtotal
        drawCallback: function (row, data, start, end, display) {
            var api = this.api(), data;
            // remove os formatos pra receber as strings como float
            var intVal = function (i) {
                return typeof i === 'string' ?
                        i.replace(/[\$,.]/g, '') * 1 :
                        typeof i === 'number' ?
                        i : 0;
            };
            // total de financiamento (geral, filtros aplicados)
            total = api
                    .column(10, {filter: "applied"})
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

            // total por pagina
            pageTotal = api
                    .column(10, {page: 'current'})
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

            $('#total').html(
                '<b>Subtotal da página atual:</b> R$ ' + $.number( pageTotal/100, 2, ',', '.' ) + ' <br> <b> Valor total:</b> R$ ' + $.number( total/100, 2, ',', '.' )
            );
        },
        //i18
        language: {
            processing: "Processando...",
            search: "Pesquisa:",
            lengthMenu: "Afficher _MENU_ &eacute;l&eacute;ments",
            info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
            infoEmpty: "Mostrando 0 a 0 de 0 registros",
            infoFiltered: "(de _MAX_ registros no total)",
            infoPostFix: "",
            loadingRecords: "Carregando...",
            select: {
                rows: {
                    _: "%d linhas selecionadas",
                    1: "1 linha selecionada"
                }
            },
            zeroRecords: "Nenhum registro encontrado",
            emptyTable: "Não há registros a serem exibidos",
            paginate: {
                first: "Primeiro",
                previous: "Anterior",
                next: "Próximo",
                last: "Último"
            },
            aria: {
                sortAscending: ": activer pour trier la colonne par ordre croissant",
                sortDescending: ": activer pour trier la colonne par ordre décroissant"
            }
        }
    });
<!-- estilos -->

<link href="assets/plugins/DataTables/DataTables-1.10.11/css/dataTables.bootstrap.css" rel="stylesheet">
        <link href="assets/plugins/script/DataTables/Responsive-2.0.2/css/responsive.bootstrap.min.css" rel="stylesheet">
        <link href="assets/plugins/script/DataTables/Buttons-1.1.2/css/buttons.bootstrap.min.css" rel="stylesheet">
        <link href="assets/plugins/script/DataTables/Select-1.1.2/css/select.bootstrap.min.css" rel="stylesheet">
        

<!-- scripts -->
<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
        <script src="assets/plugins/jquery-cookie/jquery.cookie.js"></script>
        <script src="assets/plugins/DataTables/DataTables-1.10.11/js/jquery.dataTables.min.js"></script>
        <script src="assets/plugins/DataTables/DataTables-1.10.11/js/dataTables.bootstrap.min.js"></script>
        <script src="assets/plugins/DataTables/Responsive-2.0.2/js/dataTables.responsive.js"></script>
        <script src="assets/plugins/DataTables/Buttons-1.1.2/js/dataTables.buttons.min.js"></script>
        <script src="assets/plugins/DataTables/Buttons-1.1.2/js/buttons.bootstrap.min.js"></script>
        <script src="assets/plugins/DataTables/Select-1.1.2/js/dataTables.select.min.js"></script>
        <script src="assets/plugins/DataTables/Buttons-1.1.2/js/dataTables.buttons.min.js"></script>
        <script src="assets/plugins/DataTables/Buttons-1.1.2/js/buttons.print.min.js"></script>
        <script src="assets/plugins/DataTables/Buttons-1.1.2/js/buttons.html5.min.js"></script>
        <script src="assets/plugins/jszip/jszip.min.js"></script>

<table id="tabela" class="table table-striped table-bordered table-responsive table-condensed responsive nowrap" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <!-- mesmo numero de colunas do arquivo json -->
                                            <th class="all">Campo1</th>
                                            <th class="all">Campo2</th>
                                            <th class="all">Campo3</th>
                                            <th class="all">Campo4</th>
                                            <th class="all">Campo5</th>
                                            <th class="all">campo6</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <!-- onde sera mostrado o auto filtro -->
                                            <th class="all">Campo1</th>
                                            <th class="all">Campo2</th>
                                            <th class="all">Campo3</th>
                                            <th class="all">Campo4</th>
                                            <th class="all">Campo5</th>
                                            <th class="all">campo6</th>
                                        </tr>
                                    </tfoot>
                                </table>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .