Filho retorna null no pai-filho utilizando tablename no datatable

Boa tarde, preciso muito de ajuda.

Foi criado um datatable em que trás uma lista sendo possível justificar se necessário. Quando salvo, será preciso buscar com esses dados da tabela. Foi feito pra buscar como pai-filho porém o filho só me retorna null.

Segue e as imagens em anexo:

IMAGEM1.JPG

IMAGEM2.JPG

Segue como foi feito:

<html>
<head>
    <link type="text/css" rel="stylesheet" href="/portal/resources/style-guide/css/fluig-style-guide.min.css"/>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script type="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/portal/resources/js/jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/portal/resources/js/mustache/mustache-min.js"></script>
    <script type="text/javascript" src="/portal/resources/style-guide/js/fluig-style-guide.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="/webdesk/vcXMLRPC.js"></script>
    <script type="text/javascript" src="function.js"></script>
</head>
<body onload="init()">
<div class="fluig-style-guide">
<form name="form" role="form">
    <div class="form-group col-md-12">
        <div class="row" id="title">
            <h1><b><i class="fluigicon fluigicon-user-edit icon-lg"></i> Ginástica Laboral</b></h1>
        </div>
    </div>

    <div class="row"></div>

    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">Análise Diária</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="form-group col-md-4">
                    <label for="txtLider">Lider:</label> 
                    <div class="input-grup">       
                        <select id="dsLider" name="dsLider" class="form-control" dataset="DS_liderSen" datasetkey="NOME_LIDER" datasetvalue="NOME_LIDER" addBlankLine="true"></select>
                    </div>
                </div>
                <div class="form-group col-md-4">    
                    <div class="form-group">
                        <label for="dData">Data</label>
                        <div class="input-group date" id="dDataLista">
                            <input type="text" class="form-control" id="dataLista" name="dataLista" placeholder="Informe a data" readonly>
                            <span class="input-group-addon">
                                <span class="fluigicon fluigicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    <button type="button" class="btn btn-info btn-lg" id="btBuscar" name="btBuscar" data-your-buscar>Buscar</button>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-12">
                    <input type="checkbox" id="justificarTodos" name="justificarTodos" value="JustificarTodos" disabled=""> Justificar todos?<br>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-12 table-responsive">
                    <table tablename="tbLista" class="template-datatable table table-hove" id="target" noaddbutton="true" nodeletebutton=true>
                        <thead>
                            <tr>
                                <th size="col-md-4">Nome</th>
                                <th size="col-md-2">Data</th>
                                <th size="col-md-2">Presença</th>
                                <th size="col-md-4">Justificativa</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{nome}}</td>
                                <td>{{data}}</td>
                                <td>{{presenca}}</td>
                                <td>{{justificativa}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</form>
</div>
</body>
</html>
function init(){

    $('#btBuscar').click( function() {

        var that         = this;
        var aLista        = [];
        var nomeLider     = $("#dsLider option:selected").val();        
        var dtBuscar    = editDate($("#dataLista").val());
        var dtAtual     = currentDate();
        var dsListaGina    = DatasetFactory.getDataset("DS_listaGinastica", null, null, null);

        //Para que possa filtrar pelo nome do líder
        for (i = 0; i < dsListaGina.values.length; i++){

            var dsNomeLider = dsListaGina.values[i]["LIDER"];
            var dsData        = dsListaGina.values[i]["DATA"];

            if ((nomeLider == dsNomeLider) && (dsData == dtBuscar)) {

                aLista.push(
                   [dsListaGina.values[i]["NUMCAD"],
                    dsListaGina.values[i]["RFID"],
                    dsListaGina.values[i]["NOME"],
                    dsListaGina.values[i]["CODLIDER"],
                    dsListaGina.values[i]["LIDER"],
                    dsListaGina.values[i]["CCUSTO"],
                    dsListaGina.values[i]["NOMCCU"],
                    dsListaGina.values[i]["EMICAR"],
                    dsListaGina.values[i]["TPCARGO"],
                    dsListaGina.values[i]["DATA"], 
                    dsListaGina.values[i]["PRESENCA"]]);
            }
        }

        //Dataset para o DataTable
        if (aLista != null && aLista.length > 0) {
            var records = aLista;
            that.mydata = [];
            for ( var index in records) {
                var record = records[index];
                that.mydata.push({
                    nome         : record[2],          //posição do nome
                    data         : record[9],          //posição da data
                    presenca     : record[10],         //posição da presenca/falta
                    justificativa: ''
                });
            }
        } else {
            FLUIGC.toast({
                title: 'ATENÇÃO: ',
                message: 'Não foi possível trazer a lista.',
                type: 'warning'
            });
        }


        //DataTable
        that.myTable = FLUIGC.datatable('#target', {
            dataRequest : that.mydata,
            renderContent: ['nome', 'data', 'presenca', 'justificativa'],
            //renderContent: '.template-datatable',
            header : [{
                'title' : 'Nome',
                'size' : 'col-sm-4'
            }, {
                'title' : 'Data',
                'size' : 'col-sm-3'
            }, {
                'title' : 'Presença',
                'size' : 'col-md-3'
            }, {
                'title' : 'Jusificativa',
                'size' : 'col-md-4'
            }],
            search: {
                enabled: false,
            },
            scroll: {
                target: ".target",
                enabled: true
            },
            actions: {
                enabled: false,
            },
            navButtons: {
                enabled: false,
            },
            draggable: {
                enabled: false
            },
        }, function(err, data) {
            if (err) {
                FLUIGC.toast({
                    message: err,
                    type: 'danger'
                });
            }
        });

        //Habilitar a opção de justificar todos
        document.getElementById('justificarTodos').disabled = false;

        //Verifica se foi clicado a opção de justificar todos
        $('#justificarTodos').click( function() {

            if ( document.getElementById('justificarTodos').checked ) {

                justifyModal(records, null, true);        

            } else {

                for (i = 0; i < that.mydata.length; i++){

                    that.mydata[i]["presenca"] = aLista[i][10];
                    that.mydata[i]["justificativa"] = '';

                    //Atualiza o DataTable
                    that.myTable.reload();
                }
            }
        });

        //Abrir Modal através do click em uma linha
        $('#target').on('click', 'tr', function(a,b) {
            var index = this.rowIndex - 1;            
            var selected = $("#target").getRow(index);
            console.log(selected);

            //Permite justificar somente quando for diferente de P - Presença
            if (selected.presenca == "P"){
                FLUIGC.toast({
                    title: 'ATENÇÃO: ',
                    message: 'Colaborador com PRESENÇA não precisa de justificativa.',
                    type: 'warning'
                });
            } else {
                justifyModal(index, selected, false);
            }

        });

        function justifyModal(index, selected, justifyAll) {

            //Modal
            var myModal = FLUIGC.modal({
                title: 'Ginástica Laboral - Justificar',
                content: '<div class="form-group col-md-2">' +
                            '<label for="txtJustificativa">Justificativa*:</label>' +
                            '<textarea id="txtJustificar" name="txtJustificar" rows="4" cols="110" maxlength="250"></textarea>' +
                         '</div>',
                id: 'fluig-modal',
                size: 'large',
                actions: [{
                    'label': 'Salvar',
                    'bind': 'data-open-modal',
                },{
                    'label': 'Fechar',
                    'autoClose': true
                }]

            });

            //Salvar
            $("button[data-open-modal]").click(function(){

                if ( ($("#txtJustificar").val() == "") ) {

                    FLUIGC.message.alert({
                        message: 'Verificar campos em branco.',
                        title: 'ERRO',
                        label: 'OK'
                    });

                } else {

                    if ( justifyAll == false ){

                        //Altera a falta do selecionado para justificado
                        that.mydata[index]["presenca"] = "J";
                        that.mydata[index]["justificativa"] = $("#txtJustificar").val();

                    } else {

                        for (i = 0; i < index.length; i++){

                            if( that.mydata[i]["presenca"] != "P" ) {

                                //Altera a falta de todos para justificado
                                that.mydata[i]["presenca"] = "J";
                                that.mydata[i]["justificativa"] = $("#txtJustificar").val();
                            }
                        }
                    }

                    //Fecha o Modal
                    myModal.remove();

                    //Atualiza o DataTable
                    that.myTable.reload();

                }
            });
        }
    });    

    //calendário com data mínima e máxima
    var maxDate = new Date();
    var minDate = new Date();
    minDate.setDate(maxDate.getDate() - 2);

    var dDate = FLUIGC.calendar("#dDataLista", { 
        language: 'pt-br',
        minDate: minDate,
        maxDate: maxDate,
        pickDate: true,
        pickTime: false 
    });

    //funcao para alterar o formato da data para YYYY-MM-DD
    function editDate(searchDate){

        var dC = searchDate.substr(0,2);
        var mC = searchDate.substr(3,2);
        var yC = searchDate.substr(6,9);
        var searchDate = yC + "-" + mC + "-" + dC;

        return searchDate;
    };

    //funcao data atual no formato YYYY-MM-DD
    function currentDate(){

        var data           = new Date(),
            dia          = data.getDate().toString(),
            diaF        = (dia.length == 1) ? '0'+dia : dia,
            mes          = (data.getMonth()+1).toString(), //+1 pois no getMonth Janeiro começa com zero.
            mesF         = (mes.length == 1) ? '0'+mes : mes,
            anoF         = data.getFullYear(),
            hora        = data.getHours(),          // 0-23
            horaF       = (hora > 9 ? '' : '0') + hora;
            min         = data.getMinutes(),        // 0-59
            minF        = (min > 9 ? '' : '0') + min;
            dataAtual   = anoF + "-" + mesF + "-" +diaF,
            horaAtual   = horaF + ':' + minF;

        return dataAtual;
    }

}
compartilhar
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags paifilho fluig datatable tablename ou faça a sua própria pergunta.