none
Atualizar uma table ou grid dinamicamente RRS feed

  • Pergunta

  • Olá pessoal,

    Tem como? Atualizar uma table ou grid dinamicamente, com Ajax.. ou sei la..

    Segue imagem para maior compreenção:

    Quando eu apertar no "+" ele seta uma variável como yes via Ajax, isso beleza!

    Mas como eu faço para atualizar a tabela ao lado?

    Table da esquerda variavel = no

    Table da direita variável = yes

     

    Valeu!

    quinta-feira, 8 de setembro de 2011 20:09

Respostas

  • Cria um método javascript que retorna todos os itens... ou seja vc da um post e retorna em json. Com esses dados em mãos vc pode chamar o método toda X q precisar remontar o grid.

    Ficaria +/- assim

     

    $.ajax({
    
    url : "/Controller/GetDados",
    
    type : "GET",
    
    success : function(data){
    
    $("#Grid").html("");
    
    $(data).each(function(){
    
    $("#Grid").Append("<tr><td>" + this.ID + "</td><td>" + this.Nome + "</td></tr>");
    
    });
    
    }
    
    });
    

     


    no seu controller

    public ActionResult GetDados(){
    var dados = DadosRepository.GetAll();
    return Json(dados,JsonRequestBehavior.AllowGet)
     

     

    Como boas praticas lembre-se sempre de usar nos seus table thead, tbody e tfoot quando necessário

    <table>

    <thead>

    <tr><th>ID</th><th>Nome</th></tr>

    </thead>

    <tbody id='Grid'>

    </tbody>

    </table>

     


    1000ton Analista de Sistema Plastripel - Barretos @MiltonFilho
    • Sugerido como Resposta hamiltonj sexta-feira, 4 de novembro de 2011 16:40
    • Marcado como Resposta welington jrModerator domingo, 18 de março de 2018 17:58
    segunda-feira, 24 de outubro de 2011 15:14

Todas as Respostas

  • Consigo jogar via javascript um registro de uma <table> para a outra?
    sexta-feira, 9 de setembro de 2011 14:39
  • no seu controller voce faz um metodo que vai retornar uma partial view com o conteudo da tabela do lado direito,

    entao no evento clicked do + vc faz um jquery.post(..), e o retorno do post vc faz um $("#idDivDireita").html(retornoDoPost) 

    sexta-feira, 9 de setembro de 2011 14:48
  • ixi, alguem conhece algum exemplo/tutorial com algo semelhante?
    sexta-feira, 9 de setembro de 2011 17:11
  • dúvido alguem me passar um exemplo!!!! haha :(

    desespero mode on

    segunda-feira, 12 de setembro de 2011 20:12
  • Não consegui resolver o problema ainda...

    Vejam como esta por enquanto:

    View:

        $(function () {
            // Document.ready -> link up remove event handler
            $(".RemoveLink").click(function () {
                // Get the id from the link
                var recordToDelete = $(this).attr("id");
    
                if (recordToDelete != '') {
                    // Perform the ajax post
                    $.post("/MovimentoFinanceiro/Remove", { "id": recordToDelete },
                        function (data) {
                            // Successful requests get here
                            // Update the page elements
                            $('#row-' + data.MovtoFinancID).fadeOut('fast');
                            $('#movto-total-pagos').text(data.ValMovto.toFixed(2).toString().replace('.', ','));
                }
            });
    
            $(".AddLink").click(function () {
                // Get the id from the link
                var recordToAdd = $(this).attr("id");
    
                if (recordToAdd != '') {
                    // Perform the ajax post
                    $.post("/MovimentoFinanceiro/Add", { "id": recordToAdd },
                        function (data) {
                            // Successful requests get here
                            // Update the page elements
                            $('#row-' + data.MovtoFinancID).fadeOut('fast');
                            $('#movto-total').text(data.ValMovto.toFixed(2).toString().replace('.', ','));
                        });                    
                }
            });
        });
    

    Controller:

            [HttpPost]
            public ActionResult Remove(int id)
            {
                // Altera Movimento Financeiro
                var movItem = db.MovimentoFinanceiro.Single(mov => mov.MovtoFinancID == id);
                movItem.LogBaixado = false;
                db.SaveChanges();  // Save changes
    
                // Retorna ID para remover linha
                var results = new MovimentoFinanceiro
                {
                    MovtoFinancID = id,
                    ValMovto = movItem.GetTotalMovto(true),
                    ValPago = movItem.GetTotalPago(true),
                    ValSaldo = movItem.GetTotalSaldo(true)
                };
    
                return Json(results);
            }
    
            [HttpPost]
            public ActionResult Add(int id)
            {
                // Altera Movimento Financeiro
                var movItem = db.MovimentoFinanceiro.Single(mov => mov.MovtoFinancID == id);
                movItem.LogBaixado = true;
                db.SaveChanges();  // Save changes
    
                // Retorna ID para remover linha
                var results = new MovimentoFinanceiro
                {
                    MovtoFinancID = id,
                    ValMovto = movItem.GetTotalMovto(false),
                    ValPago = movItem.GetTotalPago(false),
                    ValSaldo = movItem.GetTotalSaldo(false)
                };
    
                return Json(results);
            }
    


    Por enquanto eu só estou alterando os registros e retirando-os com o comando .fadeOut('fast').

    Gostaria de atualizar as table sem recarregar a pagina inteira.

    Exemplo da table:

    <table>
        <tr>
            <th>
                Tipo Movimento
            </th>
            <th>
                Projeto
            </th>
            <th>
                Profissional
            </th>
            <th>
                Data Venc
            </th>
            <th>
                Val Movto
            </th>
            <th></th>
        </tr>
    
    @foreach (var item in Model.MovimentoFinanceiros)
    {
        <tr id="row-@item.MovtoFinancID">
            <td>
                @Html.DisplayFor(modelItem => item.TipoMovimento.DesTipoMovto)
            </td>
            <td>
                @Truncate(item.Projeto.DesProjeto,15)
            </td>
            <td>
                @if (item.Profissional != null)
                {
                    @Truncate(item.Profissional.NomeProfissional, 15)
                }
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DataVencto)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ValMovto)
            </td>
            <td>
                <a href="#" class="AddLink" id="@item.MovtoFinancID" title="Pagar"></a>
            </td>
        </tr>
    }
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td>Total</td>
        <td id="movto-total">
            @String.Format("{0:F2}", Model.ValMovtoTotal)
        </td>
    </tr>
    </table>
    


    quarta-feira, 19 de outubro de 2011 23:18
  • Cria um método javascript que retorna todos os itens... ou seja vc da um post e retorna em json. Com esses dados em mãos vc pode chamar o método toda X q precisar remontar o grid.

    Ficaria +/- assim

     

    $.ajax({
    
    url : "/Controller/GetDados",
    
    type : "GET",
    
    success : function(data){
    
    $("#Grid").html("");
    
    $(data).each(function(){
    
    $("#Grid").Append("<tr><td>" + this.ID + "</td><td>" + this.Nome + "</td></tr>");
    
    });
    
    }
    
    });
    

     


    no seu controller

    public ActionResult GetDados(){
    var dados = DadosRepository.GetAll();
    return Json(dados,JsonRequestBehavior.AllowGet)
     

     

    Como boas praticas lembre-se sempre de usar nos seus table thead, tbody e tfoot quando necessário

    <table>

    <thead>

    <tr><th>ID</th><th>Nome</th></tr>

    </thead>

    <tbody id='Grid'>

    </tbody>

    </table>

     


    1000ton Analista de Sistema Plastripel - Barretos @MiltonFilho
    • Sugerido como Resposta hamiltonj sexta-feira, 4 de novembro de 2011 16:40
    • Marcado como Resposta welington jrModerator domingo, 18 de março de 2018 17:58
    segunda-feira, 24 de outubro de 2011 15:14
  • Como eu faço para disparar o botão:

    @Ajax.ActionLink("Refresh", "RefreshItems", "MovimentoFinanceiro", new AjaxOptions(){ UpdateTargetId = "ItemList", HttpMethod = "Post"})

    na função:

            $(".AddLink").click(function () {
                var recordToAdd = $(this).attr("id");
    
                if (recordToAdd != '') {
                    $.post("/MovimentoFinanceiro/Add", { "id": recordToAdd },
                        function (data) {
                            $('#row-' + data.MovtoFinancID).fadeOut('fast');
                            $('#movto-total').text(data.ValMovto.toFixed(2).toString().replace('.', ','));
                        });
                }
    

     

    Abs

     

     


    segunda-feira, 31 de outubro de 2011 21:00