यदि सूचकांक स्थिति में आइटम मौजूद है तो जावास्क्रिप्ट सरणी को कैसे अपडेट करें?

Question

jQuery और जावास्क्रिप्ट के लिए बहुत नया है तो कृपया सौम्य रहें ...

मैं एक "कॉलम मैपिंग" पृष्ठ बनाने के लिए एक पीओसी पर काम कर रहा हूं जहां उपयोगकर्ता "कॉलम हेडर" की सूची खींचने और छोड़ने में सक्षम है नए कॉलम हेडर का ग्रिड। मुझे एक सरणी बनाने की ज़रूरत है जिसे मैं एक SQL डेटाबेस पर वापस भेज सकता हूं। मेरे पास यह हिस्सा है (ज्यादातर) काम कर रहा है कि मैं कैसे चाहूंगा।

जब आइटम को दाईं ओर हेडर ग्रिड पर बाईं ओर कॉलम सूची से खींचा जाता है, यदि आइटम मौजूद है, तो कोड उस इंडेक्स पर सरणी आइटम को अपडेट/प्रतिस्थापित करना चाहिए। यदि आइटम मौजूद नहीं है, तो उसे आइटम को सरणी में जोड़ना चाहिए।

उदाहरण के लिए: यदि आप "हेडर" में "पहला नाम" खींचते हैं तो इसे इंडेक्स स्थिति 0 पर जोड़ा जाना चाहिए। यदि आप "पहले नाम" को "साथ" खींचें तो इसे इंडेक्स पर "फर्स्ट नेम" मान हटा देना चाहिए 0 और स्थिति 1 पर मान जोड़ें। यदि आप "अंतिम नाम" को "साथ" खींचें तो इसे "अंतिम नाम" मान के साथ स्थिति 1 पर सरणी को अद्यतन करना चाहिए।

$(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/

अंततः मैं सूचक मान वापस डेटाबेस के लिए तो बोनस अंक भेज देंगे अगर आप किसी भी लाल झंडे या "gotchas" नोटिस। धन्यवाद!

Answer 1

सरल समाधान एक तत्व मौजूद है, तो पाश के लिए एक खोजने के लिए इस्तेमाल करते हैं। यदि आप jQuery के साथ सहज हैं तो आप $.each() का भी उपयोग कर सकते हैं। यदि आवश्यक हो तो $("thead").find("td") का उपयोग करके तालिका शीर्षलेख कॉलम की गणना करके आप सरणी की लंबाई को गिन सकते हैं। फिर सामान्य रूप से व्यवसाय यह देखने के लिए पुन: सक्रिय होता है कि तत्व मौजूद है या नहीं, यदि इसे हटा दें, तो उचित अनुक्रमणिका में डालें।

$(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()); 

यह पंक्ति गिराए गए कॉलम को सरणी में धक्का दे रही है, इसे अद्यतन नहीं कर रही है।

आपको प्रत्येक कॉलम हेडर के लिए खाली मानों के साथ कहीं भी एक सरणी प्रारंभ करके प्रारंभ करना चाहिए।

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] 

संख्या को आपके पास कॉलम की संख्या में बदलें।

एक दिए गए इंडेक्स पर मान बदलने के लिए कार्य करें:

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

Answer 3

व्यक्तिगत तौर पर मैं सरणी के बजाय एक वस्तु का उपयोग करें और वस्तु

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; 
    }); 

के लिए कुंजी के रूप में सूचकांक का प्रयोग करेंगे, तो आप वापस अंत में सरणी मैप करने के लिए कॉलम बस से पहले सरणी पर आपत्ति सरल है होना आवश्यक है प्रस्तुत

DEMO