How to properly manipulate rows in a grid in jQuery

I have next GridView

Grid

I am having the following problem, if I edit an already existing line in grid

and add it again, it does not keep the sequence number it belonged to and repeats the sequence number of the last added line.

What I need to do: Once you edit the line and add it, keep the original sequence.

obs. The inclusion of new lines (sequences) is already dynamic, only you need to fix the editing of lines already existing in the grid

Example:

I edited and added the first item again. And it didn't keep the original sequence number (1) and is still repeating the last sequence added.

Grid edited

Codes:

Add line:

 function AdicionarLinha(faixa, vlrInicial, vlrFinal, vlrBonus) {
    faixa = 1;
    var dados = new Array();
    j = 0;
    var repetido = false;
    $("#<%=gridFxValor.ClientID%> tr").each(function () {
        if (($(this).find('td:eq(2)').text()).trim().length > 0 || !($(this).find('td:eq(2)').text()).trim() == undefined && $(this).find('th:eq(2)').text().length <= 0) {
            if ($(this).find('td:eq(2)').text() == faixa && $(this).find('td:eq(2)').text() == vlrInicial && $(this).find('td:eq(2)').text() == vlrFinal && $(this).find('td:eq(2)').text() == vlrBonus) {
                $("#<%=txtFxCodigo.ClientID%>").val('');
                $("#<%=txtFxVlrInicial.ClientID%>").val('');
                $("#<%=txtFxVlrFinal.ClientID%>").val('');
                $("#<%=txtFxVlrBonus.ClientID%>").val('');
                criarDivAlert("Alerta", "Faixa de valor jรก inserida.");
                exibirAlerta(false);
                repetido = true;
            }               
            faixa++;
        }
    });
    if (repetido == false) {
        $("#<%=gridFxValor.ClientID%> tr").each(function () {
            if (($(this).find('td:eq(2)').text()).trim().length > 0 || !($(this).find('td:eq(2)').text()).trim() == undefined && $(this).find('th:eq(2)').text().length <= 0) {
                var linha = Array();
                i = 2;
                $(this).find('td').each(function () {
                    if ($(this).text() != '') {
                        linha[i - 2] = ($(this).text()).trim();
                        i++;
                    }
                });
                $(this).remove();
                dados[j++] = linha;
            }
        });
        dados[dados.length] = new Array(faixa, vlrInicial, vlrFinal, vlrBonus);
        SetarDadosGrid(dados);
    }
}

      

Set grid data:

function SetarDadosGrid(dados) {
    $("#<%=gridFxValor.ClientID%>").append("");
    $("#<%=hdfTable.ClientID%>").val('');
    LimparGrid();
    var hidden = "";
    for (i = 0; i < dados.length; i++) {
        var string = "";
        string += "<tr id='tr" + i + "' style='color:#333333;background-color:#F7F6F3;'>";
        string += "<td align='center'>";
        string += "<input type='image' name='ctl00$ContentPlaceHolder1$gridFaixa$ctl02$btnExcluirBonusValor' id='d" + i + "' onclick='javascript: DeletarLinha(this.id);' title='Excluir' text='Delete' src='../images/svg/delete.svg' style='width:15px;border-width:0px;'>";
        string += "</td><td align='center'>";
        string += "<input type='image' name='ctl00$ContentPlaceHolder1$gridFaixa$ctl02$btnEditarBonusValor' id='e" + i + "' onclick='EditartarLinha(this.id);' title='Editar' text='Editar' src='../images/svg/edit.svg' style='width:15px;border-width:0px;'></td>";
        for (k = 0; k < dados[i].length; k++) {
            string += "<td>";
            string += "<span>" + dados[i][k] + "</span>";
            string += "</td>";

        }


        hidden += Array(dados[i][0] + "$" + dados[i][1] + "$" + dados[i][2] + "$" + dados[i][3] + "|");
        string += "</tr>";
        $("#<%=gridFxValor.ClientID%>").append(string);
    }


    $("#<%=hdfTable.ClientID%>").val(hidden);
    $("#fxOferta").show();
    $("#<%=txtFxCodigo.ClientID%>").val('');
    $("#<%=txtFxVlrInicial.ClientID%>").val('');
    $("#<%=txtFxVlrFinal.ClientID%>").val('');
    $("#<%=txtFxVlrBonus.ClientID%>").val('');
}

      

Change the line:

function EditartarLinha(id) {
    var tr = document.getElementById("tr" + id.trim().replace('e', ''));
    $("#<%=txtFxCodigo.ClientID%>").val($(tr).find('td:eq(2)').text());
    $("#<%=txtFxVlrInicial.ClientID%>").val($(tr).find('td:eq(3)').text());
    $("#<%=txtFxVlrFinal.ClientID%>").val($(tr).find('td:eq(4)').text());
    $("#<%=txtFxVlrBonus.ClientID%>").val($(tr).find('td:eq(5)').text());
    tr.remove();
    AtualizaHidden();

      

+3


source to share





All Articles