Jak zaktualizować tablicę javascript, jeśli pozycja istnieje w tej pozycji indeksu?

Question

Całkiem nowy jQuery i JavaScript, więc bądź ostrożny ...

Pracuję nad POC, aby utworzyć stronę "mapowania kolumn", gdzie użytkownik może przeciągnąć i upuścić listę "nagłówków kolumn", aby siatka nowych nagłówków kolumn. Potrzebuję zbudować tablicę, którą mogę wysłać z powrotem do bazy danych SQL. Mam tę część (głównie) działającą, jakbym chciał.

Gdy element jest przeciągany z listy kolumn po lewej stronie do siatki nagłówków po prawej stronie, jeśli pozycja istnieje, kod powinien zaktualizować/zastąpić element tablicy w tym indeksie. Jeśli element nie istnieje, powinien dodać element do tablicy.

Na przykład: Jeśli przeciągniesz "Imię" do "Nagłówków", należy go dodać w pozycji indeksu 0. Jeśli następnie przeciągniesz "Imię" do "z", to powinno usunąć się "Wartość" w indeksie 0 i dodaj wartość na pozycji 1. Jeśli następnie przeciągniesz "Nazwisko" do "z", powinno zaktualizować tablicę na pozycji 1 z wartością "Nazwisko".

$(document).ready(() => { 
 
    $(function() { 
 
    $('.item').draggable({ 
 
     cursor: "crosshair", 
 
     cursorAt: { 
 
     left: 5 
 
     }, 
 
     distance: 10, 
 
     opacity: 0.75, 
 
     revert: true, 
 
     snap: ".target", 
 
     containment: "window" 
 
    }); 
 
    }); 
 

 
    $(function() { 
 
    var array = []; 
 
    var arraytext = ''; 
 
    $('.target').droppable({ 
 
     accept: ".item", 
 
     tolerance: 'pointer', 
 
     activeClass: 'active', 
 
     hoverClass: 'highlight', 
 
     drop: function(event, ui) { 
 
     var dropped = $(this); 
 
     var dragged = $(ui.draggable); 
 
     $(function(index, item) { 
 
      var test = ''; 
 
      array.push($(dragged).text()); 
 
      arraytext = JSON.stringify(array); 
 
      test += "Index Value = " + $(dropped).index() + ", Text = " + $(dragged).text() + "<br/>"; 
 
      $('#test').html(test); 
 
      $('#array').text(arraytext); 
 
     }); 
 
     } 
 
    }); 
 
    }); 
 
});

#container { 
 
    border: solid black 1px; 
 
    margin: 0 auto; 
 
    height: 800px; 
 
} 
 

 
#gridview { 
 
    border: 2px solid #292da0; 
 
    border-radius: 5px; 
 
    background-color: #7577a3; 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fit, 100px); 
 
    grid-template-rows: auto; 
 
    margin-left: 105px; 
 
} 
 

 
.target { 
 
    border: 2px solid #1c1c3a; 
 
    border-radius: 5px; 
 
    background-color: #a7a7ef; 
 
    padding: 1em; 
 
} 
 

 
#flex { 
 
    border: 2px solid #292da0; 
 
    border-radius: 5px; 
 
    width: 100px; 
 
    background-color: #7577a3; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    justify-content: flex-end; 
 
    float: left; 
 
} 
 

 
.item { 
 
    border: 2px solid #1c1c3a; 
 
    border-radius: 5px; 
 
    background-color: #a7a7ef; 
 
    padding: 1em; 
 
} 
 

 
.active { 
 
    background-color: blue; 
 
    color: white; 
 
    border: 2px solid black; 
 
} 
 

 
.highlight { 
 
    background-color: yellow; 
 
    color: black; 
 
    border: 2px solid blue; 
 
} 
 

 
.table { 
 
    border: solid black 1px; 
 
    width: 86px; 
 
    padding: 5px; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<div id="container"> 
 
    Test: 
 
    <div id="test"> 
 
    </div> 
 
    Array: 
 
    <div id="array"> 
 
    </div> 
 
    <div id="gridview"> 
 
    <div class="target">Headers</div> 
 
    <div class="target">with</div> 
 
    <div class="target">different</div> 
 
    <div class="target">column</div> 
 
    <div class="target">names</div> 
 
    </div> 
 
    <span> 
 
    <div id="flex"> 
 
    <div class="item">First Name</div> 
 
    <div class="item">Last Name</div> 
 
    <div class="item">Code</div> 
 
    <div class="item">Date</div> 
 
    <div class="item">Amount</div> 
 
    </div> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <td class="table">Some</td> 
 
     <td class="table">Column</td> 
 
     <td class="table">Data</td> 
 
     <td class="table">Goes</td> 
 
     <td class="table">Here</td> 
 
     </tr> 
 
    </thead> 
 
     <tr> 
 
     <td class="table">Other Data</td> 
 
     <td class="table">Other Data</td> 
 
     <td class="table">Other Data</td> 
 
     <td class="table">Other Data</td> 
 
     <td class="table">Other Data</td> 
 
     </tr> 
 
    </table> 
 
    </span> 
 
</div>

JSFiddle: https://jsfiddle.net/qxwzcn9w/4/

końcu będę wysyłania wartości indeksu z powrotem do bazy danych więc dodatkowe punkty, jeśli zauważy się czerwone flagi lub „gotchas”. Dzięki!

Answer 1

Proste rozwiązanie za pomocą pętli znaleźć jeśli istnieje element. Możesz także użyć $.each(), jeśli nie masz nic przeciwko jQuery. Liczbę długości tablicy można policzyć, licząc kolumny nagłówka tabeli, używając w razie potrzeby wartości $("thead").find("td"). Następnie w zwykły sposób iteruj, czy element istnieje, jeśli tak, usuń go, a następnie wstaw do odpowiedniego indeksu.

$(function() { 
    $('.item').draggable({ 
    cursor: "crosshair", 
    cursorAt: { 
     left: 5 
    }, 
    distance: 10, 
    opacity: 0.75, 
    revert: true, 
    snap: ".target", 
    containment: "window" 
    }); 
}); 

$(function() { 
    var arraytext = ''; 
    $('.target').droppable({ 
    accept: ".item", 
    tolerance: 'pointer', 
    activeClass: 'active', 
    hoverClass: 'highlight', 
    drop: function(event, ui) { 
     var dropped = $(this); 
     var dragged = $(ui.draggable); 
     $(function(index, item) { 
     var test = ''; 

     for(var i = 0; i < array.length; i++) 
     { 
      if($(dragged).text() == array[i]) 
      { 
      array[i] = ""; 
      } 
     } 
     array[$(dropped).index()] = $(dragged).text(); 
     arraytext = JSON.stringify(array); 
     test += "Index Value = " + $(dropped).index() + ", Text = " + $(dragged).text() + "<br/>"; 
     $('#test').html(test); 
     $('#array').text(arraytext); 
     }); 
    } 
    }); 
}); 

Answer 2

array.push($(dragged).text()); 

Ta linia przesuwa upuszczoną kolumnę do tablicy, nie aktualizując jej.

Należy rozpocząć od zainicjowania tablicy gdzieś z pustymi wartościami dla każdego nagłówka kolumny.

var arr = Array.apply(null, new Array(10)).map(Number.prototype.valueOf,0); 
//console.log(arr) Outputs as [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 

Zmień liczbę na liczbę posiadanych kolumn.

do zmiany wartości w danej indeksu czynności:

arr[3]='a new value'; 
//console.log(arr) Outputs as [0, 0, 0, 'a new value', 0, 0, 0, 0, 0, 0] 

Answer 3

Osobiście używam obiekt zamiast tablicy i użyć indeksu jako klucze do obiektu

var cols ={}; 

    $('.target').droppable({ 
    ..... 
    drop: function(event, ui) { 
     var txt = $(ui.draggable).text(), 
      colIdx = $(this).index(); 
     // clear from any prior position 
     $.each(cols, function(key, val){ 
     if (val === txt){ 
      cols[key] = null 
     } 
     }); 
     // add to new position 
     cols[colIdx] = txt;   

    } 
    }).each(function(i){ 
    // add each index as key in cols object 
    cols[i] = null; 
    }); 

Jeśli musisz mieć tablicę w tylnym końcu jest prosta do mapowania cols sprzeciw wobec tablicy tuż przed złożyć

DEMO