Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Tabela Editável com jquery

Estou com com uma tabela em cshtml

 <div class="clearfix">
                            <div class="table-responsive " data-bind="visible: DesdobramentosFatura().length > 0" style="margin-top: 10px">
                                <table class="table table-hover table-condensed" id="tbEditavel" >
                                    <thead>
                                        <tr class="active">
                                            <th><strong>Desdobramento</strong></th>
                                            <th><strong>Data  </strong></th>
                                            <th><strong>Fornecedor</strong></th>
                                            <th><strong>Valor Título</strong></th>
                                        </tr>
                                    </thead>
                                    <tbody data-bind='foreach: DesdobramentosFatura'>
                                        <tr>
                                            <td data-bind='text: NumeroDesdobramento'></td>
                                            <td data-bind='text: FormatDate(DataVencimento())'  class="editavel" ></td>
                                            <td data-bind='text: FiltraFornecedor(FornecedorId()).NomeFantasia'></td>
                                            <td data-bind='text: formatCurrency(ValorTitulo())' class="editavel" ></td>
                                        </tr>
                                    </tbody>
                                    <tr>
                                        <td colspan="3" class="text-right"><strong>Total Valores Desdobramentos: </strong></td>
                                        <td data-bind="text: DesdobramentosFatura().length > 0 ? formatCurrency(ValorTotalDesdobramentos()) : 0"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>

Onde estou chamando uma função javascript para tornar ela editável... Nas colunas DataVencimento e ValorTitulo

Função javaScript

function editTable() {
    $(document).ready(function () {
        $('#tbEditavel tbody tr').each(function (i) {
            $(this).children('td.editavel').each(function (p) {

                $(this).dblclick(function () {
                    var conteudoOriginal = $(this).text();
                    var novoElemento = $('<input/>', { type:'date', value:conteudoOriginal });
                    $(this).html(novoElemento.blur(function () {
                        var conteudoNovo = $(this).val();
                        var posicao = p + 1;
                        var posicao2 = i + 1;
                        //alert(posicao);
                        //alert(posicao2);

                        if (conteudoNovo == "") {
                            //alert('novo');
                            //alert(conteudoNovo);
                            //alert('original');
                            //alert(conteudoOriginal);
                            $(this).parent().html(conteudoOriginal);
                        }
                         else {
                            $(this).parent()
                            .html(conteudoNovo)
                            .parents('tr')
                            .next()
                            .children('td:nth-child(' + posicao2 + ')')
                            .trigger('dbclick');
                        }                                               
                    }
                    ));
                    $(this).children().select();
                })
            })
        })
    })
}

Meu problema esta no :

var novoElemento = $('', { type:'date', value:conteudoOriginal });

O formato que ele esta saindo ao editar o componente... esta como yyyy-mm-dd e gostaria que fosse dd/mm/yyyy

O que preciso para sair neste formato?

2 respostas
solução!
var data = "2017-12-20"
data.split('-').reverse().join('/')

O retorno será 20/12/2017

É isso que você quer?

Mathews... bacana !! esta opção...

me informaram aqui que podemos usar o moment... resolvi da seguinte forma !

function editTable() {
    $(document).ready(function () {
        $('#tbEditavel tbody tr').each(function (i) {
            $(this).children('td.editavel').each(function (p) {

                $(this).dblclick(function () {
                    var conteudoOriginal = $(this).text();
                    var novoElemento = $('<input/>', { type:'date', format: 'dd/mm/yyyy' ,value:conteudoOriginal });
                    $(this).html(novoElemento.blur(function () {

                        var conteudoNovo = $(this).val();
                        var posicao = p + 1;
                        var posicao2 = i + 1;
                        //alert(posicao);
                        //alert(posicao2);

                        if (conteudoNovo == "") {
                            //alert('novo');
                            //alert(conteudoNovo);
                            //alert('original');
                            //alert(conteudoOriginal);
                            //$(this).parent().html(conteudoOriginal);
                            $(this).parent().htmal(moment(conteudoOriginal, "YYYY-MM-DD").format("DD/MM/YYYY")); 
                        }
                        else {
                            debugger; 
                            $(this).parent()
                            .html(moment(conteudoNovo, "YYYY-MM-DD").format("DD/MM/YYYY"))                          
                            .parents('tr')
                            .next()
                            .children('td:nth-child(' + posicao2 + ')')
                            .trigger('dbclick');
                        }                                               
                    }
                    ));
                    $(this).children().select();
                })
            })
        })
    })
}