Skip to content

Instantly share code, notes, and snippets.

@john182

john182/gist:f5d7075505bdd7766ad79f14fa1a0194

Created January 15, 2018 20:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save john182/f5d7075505bdd7766ad79f14fa1a0194 to your computer and use it in GitHub Desktop.
Save john182/f5d7075505bdd7766ad79f14fa1a0194 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html
lang="pt"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form action="">
<table width="100" class="table-edicao table table-condesed">
<thead>
<tr>
<th>
ID
</th>
<th>
Nome
</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>
1
</td>
<td class="campo-editavel">
Nome
</td>
</tr>
</tbody>
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="application/javascript">
Chronos = Chronos || {};
Chronos.TableEditavel = (function () {
function TableEditavel() {
this.table = $('.table-edicao');
this.coluna = $('.campo-editavel');
this.conteudoOriginal = this.coluna.text();
this.campoInput = $('<input>').attr({type: 'text', class: 'form-control data'});
}
TableEditavel.prototype.iniciar = function () {
this.coluna.on('dblclick', onEditarCampo.bind(this));
this.campoInput.on('keydown', onKeyPres.bind(this));
this.campoInput.on('blur', onSairDoCampo.bind(this));
};
function onEditarCampo(evento) {
var colunaEmEdicao = $(event.currentTarget);
this.campoInput.val(this.conteudoOriginal);
colunaEmEdicao.addClass("celulaEmEdicao");
colunaEmEdicao.html(this.campoInput);
this.campoInput.mask('00/00/0000');
colunaEmEdicao.children().first().focus();
}
function onKeyPres(evento) {
var input = $(evento.currentTarget);
var id = input.parent().parent().attr('id');
var url = this.table.data('url');
switch (evento.keyCode) {
case 9: // Tab.
break;
case 13: // Enter.
event.preventDefault();
var novoConteudo = input.val();
$.ajax({
url: url,
method: 'PUT',
data: {id: id, data: novoConteudo},
success: function () {
input.parent().text(novoConteudo);
input.parent().removeClass("celulaEmEdicao");
// window.location.reload();
}
});
break;
case 27: // Escape.
break;
}
}
function onSairDoCampo(evento) {
var input = $(evento.currentTarget);
input.parent().text(this.conteudoOriginal);
input.parent().removeClass("celulaEmEdicao");
}
return TableEditavel;
}());
$(function () {
var tableEditavel = new Chronos.TableEditavel();
tableEditavel.iniciar();
});
</script>
</body>
</html>
@fernandohenriques
Copy link

fernandohenriques commented Jan 19, 2018 •
edited

Veja se agora funciona:

<title>Title</title> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <thead>
    <tr>
        <th>
            ID
        </th>
        <th>
            Nome
        </th>
    </tr>
    </thead>
    <tbody>
    <tr id="1">
        <td>
            1
        </td>
        <td class="campo-editavel">
            Nome
        </td>
    </tr>
    </tbody>

</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.min.js"></script>
<script type="application/javascript">


    var Chronos = Chronos || {};

    Chronos.TableEditavel = (function () {

        function TableEditavel() {
            this.table = $('.table-edicao');
            this.coluna = $('.campo-editavel');
            this.conteudoOriginal = this.coluna.text();
            this.campoInput = $('').attr({type: 'text', class: 'form-control data'});
        }

        TableEditavel.prototype.iniciar = function () {
            this.coluna.on('dblclick', onEditarCampo.bind(this));
            //this.campoInput.on('keydown', onKeyPres);
            this.campoInput.on('blur', onSairDoCampo.bind(this));

        };

        function onEditarCampo(evento) {
            var colunaEmEdicao = $(event.currentTarget);
            this.campoInput.val(this.conteudoOriginal);
            colunaEmEdicao.addClass("celulaEmEdicao");
            colunaEmEdicao.html(this.campoInput);
            this.campoInput.mask('00/00/0000');
            colunaEmEdicao.children().first().focus();
            this.campoInput.on('keydown', onKeyPres);

        }

        function onKeyPres(evento) {
            console.log(evento.keyCode);
            var input = $(evento.currentTarget);
            var id = input.parent().parent().attr('id');
            var url = $('.table-edicao').data('url');

            switch (evento.keyCode) {
                case 9:  // Tab.
                    break;
                case 13: // Enter.
                    var novoConteudo = input.val();
                    $.ajax({
                        url: url,
                        method: 'PUT',
                        data: {id: id, data: novoConteudo},
                        success: function () {
                            input.parent().text(novoConteudo);
                            input.parent().removeClass("celulaEmEdicao");
                            //  window.location.reload();
                        }
                    });
                    return false;
                    break;
                case 27: // Escape.

                    break;
            }

        }

        function onSairDoCampo(evento) {
            var input = $(evento.currentTarget);
            input.parent().text(this.conteudoOriginal);
            input.parent().removeClass("celulaEmEdicao");
        }

        return TableEditavel;
    }());
    $(function () {
        var tableEditavel = new Chronos.TableEditavel();
        tableEditavel.iniciar();
    });
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment