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:
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;
}
}