2017-11-09 1 views
0

사용자가 삽입 한 값을 되돌리기 위해 내가 만든 드래그 앤 드롭에서 물어 봅니다. 그러나 Perl을 처음 접했을 때 어떻게 될 수 있는지 모르겠습니다. done :/Perl 테이블에 값을 변환

반면에 이러한 값은 테이블 형식으로 게시해야합니다. 이러한 값을 찾을 수

기능은 담당 내 사람이이 값

 
Ex: VAR1 [ 

' Titre-1 ' = > 'Test' 

.............. 그리고 일치 나에게 조언 foreach my param (@params) {.............. }

에서 시작 에.

Code JS: 

var counter = 0; 
 

 
    document.addEventListener("dragstart", function(event) { 
 
     // The dataTransfer.setData() method sets the data type and the value of the dragged data 
 
     event.dataTransfer.setData("Text", event.target.id); 
 

 
     // Output some text when starting to drag the label element 
 
     document.getElementById("action").innerHTML = "Vous avez glissé votre élément !"; 
 

 
     // Change the opacity of the draggable element 
 
     event.target.style.opacity = "0.4"; 
 
     save = event; 
 
     setTimeout(function() { 
 
      document.getElementById('action').innerHTML = ""; }, 2500); 
 
     }); 
 

 
    // While dragging the label element, change the color of the output text 
 
    document.addEventListener("drag", function(event) { 
 
     document.getElementById("action").style.color = "#CD5C5C"; 
 
    }); 
 

 
    // Output some text when finished dragging the label element and reset the opacity 
 
    document.addEventListener("dragend", function(event) { 
 
     if(event.target.className == "drop-target") { 
 
      document.getElementById("action").innerHTML = "Vous avez bien déposé votre élément !"; 
 
     } 
 
     /* else if(event.target.className == "drop-target-Titre") { 
 
      document.getElementById("action").innerHTML = "Vous avez bien déposé votre titre !"; 
 
     } 
 
     else if(event.target.className == "drop-target-Message") { 
 
      document.getElementById("action").innerHTML = "Vous avez bien déposé votre message !"; 
 
     } 
 
     else if(event.target.className == "drop-target-Image") { 
 
      document.getElementById("action").innerHTML = "Vous avez bien déposé votre image !"; 
 
     } 
 
     else if(event.target.className == "drop-target-Lien") { 
 
      document.getElementById("action").innerHTML = "Vous avez bien déposé votre lien !"; 
 
     }*/ 
 
     event.target.style.opacity = "1"; 
 
     document.getElementById("action").style.color = "#CD5C5C"; 
 

 
     setTimeout(function() { 
 
      document.getElementById('action').innerHTML = ""; }, 2500); 
 
    }); 
 

 

 
    /* Events fired on the drop target */ 
 

 
    // When the draggable label element enters the droptarget, change the DIVS's border style 
 
    document.addEventListener("dragenter", function(event) { 
 
     if (event.target.className == "drop-target") { 
 
      event.target.style.border = "3px dotted #483D8B"; 
 
     } 
 
     else if(event.target.className == "drop-target-1") { 
 
      event.target.style.border = "3px dotted #483D8B"; 
 
      document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre élément ! "; 
 
     } 
 
     else if(event.target.className == "drop-target-2") { 
 
      event.target.style.border = "3px dotted #483D8B"; 
 
      document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre élément ! "; 
 
     } 
 
     else if(event.target.className == "drop-target-3") { 
 
      event.target.style.border = "3px dotted #483D8B"; 
 
      document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre élément ! "; 
 
     } 
 
     else if(event.target.className == "drop-target-4") { 
 
      event.target.style.border = "3px dotted #483D8B"; 
 
      document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre élément ! "; 
 
     } 
 
     else if(event.target.className == "drop-target-phone" && save.target.id == "numtel") { 
 
      event.target.style.border = "3px dotted #483D8B"; 
 
      document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre n° de téléphone !"; 
 
     } 
 
     else if (event.target.className == "drop-target-mail" && save.target.id == "mail") { 
 
      event.target.style.border = "3px dotted #483D8B"; 
 
      document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre mail !"; 
 
     } 
 
     else if(event.target.className == "drop-target-contact" && save.target.id == "contact") { 
 
      event.target.style.border = "3px dotted #483D8B"; 
 
      document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre nom et prénom !"; 
 
     } 
 

 
     setTimeout(function() { 
 
      document.getElementById('action').innerHTML = ""; }, 2500); 
 
    }); 
 

 
    // By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element 
 
    document.addEventListener("dragover", function(event) { 
 
     event.preventDefault(); 
 
    }); 
 

 
    // When the draggable label element leaves the droptarget, reset the DIVS's border style 
 
    document.addEventListener("dragleave", function(event) { 
 
     if(event.target.className == "drop-target") { 
 
      event.target.style.border = ""; 
 
     } 
 
     else if(event.target.className == "drop-target-1") { 
 
      event.target.style.border = ""; 
 
     } 
 
     else if(event.target.className == "drop-target-2") { 
 
      event.target.style.border = ""; 
 
     } 
 
     else if(event.target.className == "drop-target-3") { 
 
      event.target.style.border = ""; 
 
     } 
 
     else if(event.target.className == "drop-target-4") { 
 
      event.target.style.border = ""; 
 
     } 
 
     else if (event.target.className == "drop-target-phone") { 
 
      event.target.style.border = ""; 
 
     } 
 
     else if (event.target.className == "drop-target-mail") { 
 
      event.target.style.border = ""; 
 
     } 
 
     else if (event.target.className == "drop-target-contact") { 
 
      event.target.style.border = ""; 
 
     } 
 
    }); 
 

 
    /* On drop - Prevent the browser default handling of the data (default is open as link on drop) 
 
     Reset the color of the output text and DIV's border color 
 
     Get the dragged data with the dataTransfer.getData() method 
 
     The dragged data is the id of the dragged element ("drag1") 
 
     Append the dragged element into the drop element 
 
    */ 
 
    /*document.addEventListener("drop", function(event) { 
 
     event.preventDefault(); 
 
     if (event.target.className == "drop-target-Titre") { 
 
      document.getElementById("action").style.color = ""; 
 
      event.target.style.border = "";  
 
      var data = event.dataTransfer.getData("Text"); 
 
       switch (data) { 
 
        case 'Titre': 
 
         $('.drop-target').append("<div class='col-sm-12' droppable='false' id='deletetitle"+ counter+"' ondblclick='supprimer(this,\"titre\")'> <span style='font-style: italic; margin-right: 5%; font-size: 16px'>Votre titre :</span> <input type='text' name='TitreCli' style='margin-right: 25%; width: 250px; height: 30px; background-color: #F5F5DC'></input></div>"); 
 
         break; 
 
        case 'Texte': 
 
         $('.drop-target').append("<div class='col-sm-12' droppable='false' id='deletetext"+ counter+"' ondblclick='supprimer(this,\"texte\")'> <span style='font-style: italic; margin-right: 15%; font-size: 16px;'>Votre message : </span> <textarea name='MessageCli' style='margin-right: 25%; max-height: 50px; max-width: 500px; background-color: #F5F5DC'></textarea></div>"); 
 
         break; 
 
        case 'Image': 
 
         $('.drop-target').append("<div class='col-sm-12' droppable='false' id='deleteimage"+ counter+"' ondblclick='supprimer(this,\"image\")'> <span style='font-style: italic; margin-right: 24.5%; font-size: 16px'>Votre image : </span> <input type='text' name='ImageCli' style='margin-right: 25%; background-color: #F5F5DC'></input><div>"); 
 
         break; 
 
        case 'Lien': 
 
         $('.drop-target').append("<div class='col-sm-12' droppable='false' id='deletelink"+ counter+"' ondblclick='supprimer(this,\"lien\")'> <span style='font-style: italic; margin-right: 40%; font-size: 16px'> Votre lien : </span> <input type='text' name='LienCli' style='margin-left: -12%; margin-right: 20%; background-color: #F5F5DC'></input><div>"); 
 
         break; 
 
       } 
 
      counter ++; 
 
     } 
 
       
 
     });*/ 
 

 
    document.addEventListener("drop", function(event) { 
 
     event.preventDefault(); 
 
     if(event.target.className == "drop-target-1") { 
 
      $('.drop-target-1').append("<div class='col-sm-12' droppable='false' id='"+ save.target.id +"-1' ondblclick='deleteContents(this,\"" + save.target.id+"\")'> <span>Votre " + save.target.id +" :</span> <input type='text' id='"+ save.target.id +"-1'></input></div>"); 
 
     } 
 
     else if(event.target.className == "drop-target-2") { 
 
      $('.drop-target-2').append("<div class='col-sm-12' droppable='false' id='"+ save.target.id +"-2' ondblclick='deleteContents(this,\"" + save.target.id+"\")'> <span>Votre " + save.target.id +" :</span> <input id='"+ save.target.id+"-2'></input></div>"); 
 
     } 
 
     else if(event.target.className == "drop-target-3") { 
 
      $('.drop-target-3').append("<div class='col-sm-12' droppable='false' id='"+ save.target.id+"-3' ondblclick='deleteContents(this,\"" + save.target.id+"\")'> <span>Votre " + save.target.id+" :</span> <input type='text' id='"+ save.target.id+"-3'></input></div>"); 
 
     } 
 
     else if(event.target.className == "drop-target-4") { 
 
      $('.drop-target-4').append("<div class='col-sm-12' droppable='false' id='"+ save.target.id+"-4' ondblclick='deleteContents(this,\"" + save.target.id+"\")'> <span>Votre "+ save.target.id+" :</span> <input type='text' id='"+ save.target.id+"-4'></input></div>"); 
 
     } 
 
     else if (event.target.className == "drop-target-phone" && save.target.id == "numtel") { 
 
      $('.drop-target-phone').append("<div class='col-sm-4' droppable='false' id='telcli' ondblclick='deleteContents(this,\"téléphone\")' style='width: 175px; height: 80px;'> <span style='font-style: italic; margin-right: 8%; font-size: 16px; text-align: center'> Téléphone :</span> <input type='text' id='telcli' style='margin-right: 5%; width: 150px; height: 30px; background-color: #F5F5DC'></input></div>"); 
 
     } 
 
     else if (event.target.className == "drop-target-mail" && save.target.id == "mail") { 
 
      $('.drop-target-mail').append("<div class='col-sm-4' droppable='false' id='mailcli' ondblclick='deleteContents(this,\"mail\")' style='width: 175px; height: 80px'> <span style='font-style: italic; margin-right: 8%; font-size: 16px; text-align: center'> Mail :</span> <input type='text' id='mailcli' style='margin-right: 5%; width: 150px; height: 30px; background-color: #F5F5DC'></input></div>"); 
 
     } 
 
     else if (event.target.className == "drop-target-contact" && save.target.id == "contact") { 
 
      $('.drop-target-contact').append("<div class='col-sm-4' droppable='false' id='contactcli' ondblclick='deleteContents(this,\"contact\")' style='width: 175px; height: 80px'> <span style='font-style: italic; margin-right: 8%; font-size: 16px; text-align: center'> Contact :</span> <input type='text' id='contactcli' style='margin-right: 5%; width: 150px; height: 30px; background-color: #F5F5DC'></input></div>"); 
 
     }; 
 
     event.target.style.border = ""; 
 
    }); 
 

 
    function deleteContents(nom, argument) { 
 
     $(nom).remove(); 
 
     document.getElementById("action").innerHTML = "Vous avez bien supprimé votre " +argument+" !"; 
 
     setTimeout(function() { 
 
      document.getElementById("action").innerHTML = ""; }, 2500); 
 
     }; 
 

 
/*function preview() { 
 
     var toPrint = document.getElementById('previewarea'); 
 
     var popupWin = window.open('', '_blank', 'width=400,height=700,location=no,left=200px'); 
 
     
 
     popupWin.document.open(); 
 
    popupWin.document.write('<html><title>::PrintPreview::</title><body><p>Vos données ont bien été enregistrées !</p></body">'); 
 
     popupWin.document.write('</html>'); 
 
     popupWin.document.close(); 
 
    }*/ 
 

 
function preview(url) { 
 
regex pour le téléphone /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/; */ 
 

 
    var myData = { 
 
     'rm':'previewZone', 
 
}; 
 

 
     var list = document.getElementById("drop-target"); 
 
     var y = list.getElementsByTagName("input"); 
 
     /*var x = list.getElementsByTagName("textarea"); 
 
     for (i=0; i <x.length; i++) 
 
     { 
 
      if(x[i].id) 
 
      { 
 
       myData[x[i].id] = x[i].value; 
 
       /*result = x[i].value;*/ 
 
      /*} 
 
     }*/ 
 
     for (var i in y) 
 
     { 
 
      if(y[i].id) 
 
      { 
 
       myData[y[i].id] = y[i].value; 
 
      } 
 
     } 
 
console.log(myData); 
 
    $.post(url,myData).done(function(data) 
 
    { 
 
     var popupWin = window.open('', '_blank', 'width=400,height=700,location=no,left=200px'); 
 
     popupWin.document.open(); 
 
     popupWin.document.write('<html><title>::PrintPreview::</title><body><p>Vos données ont bien été enregistrées !</p></body">'); 
 
     popupWin.document.write('</html>'); 
 
     popupWin.document.close(); 
 
     }); 
 
}

코드 펄 :

sub previewZone 
{ 
    my $self = shift; 

    my $query = $self->query; 

    my $session = $self->param('session'); 
    my $profile = $session->param('profile'); 

    my $User = User->newFromId($profile->{'uid'}); 
    if($User eq 'NOT_FOUND') 
    { 
     return $self->redirect('index.pl?rm=notfound'); 
    } 

    my @params = $query->param(); 

    my %hash(); 

    foreach my $param (@params) 
    { 
     if($param =~ /([a-zA-Z]*)\-(\d)/) 
     { 
      my $field = $1; 
      my $number = $2; 
      $hash{$number}->{$field} = scalar $query->param($param) ; 
     } 
    } 

print %hash; 

***my $fnret = _formatModelPart(
      'data' => $data2, 
      'part' => $part 
     );*** 

    if($fnret eq 'FILE_NOT_FOUND' or $fnret eq 'FAILURE' or $fnret eq 'NO_DATA') 
    { 
     return $self->redirect('index.pl?rm=notfound'); 
    } 


    #foreach (my ($key, $value) = each @params) { 
    # print @params, $key . ' => '. $value; 
    #} 

    $log->info(Dumper(\@params)); 
} 
+0

같은 데이터 구조를 얻을 것입니다. 프랑스어로 의사 소통을 원할 경우 https://www.developpez.net/forums/ –

+0

에 가서 볼 수 있습니다. 죄송합니다. 내 문제를 편집하겠습니다.) –

답변

1

이 줄은 쿼리에서 모든 매개 변수 키를 가져옵니다

my @params = $query->param(); 

및 0,123,은 예를 들어 매개 변수의 값을 얻을 것입니다, 그래서 당신은 당신의 해시를 채울 수있는 방법 중 하나는 당신이 정규 표현식을 사용할 수 있습니다 그들의 말에 번호로 매개 변수에 의해 그룹화 할 경우

foreach my $param (@params) 
{ 
    $hash{$param}=$query->param($param); 
} 

입니다 이와 같이 번호와 필드 이름을 캡처 한 다음 매개 변수 값을 해시 해시에 저장합니다.

if($param =~ /^(.*)-(\d+)$/) 
{ 
    my $field=$1; 
    my $number=$2; 

    $hash{$number}->{$field}=$query->param($param); 
} 

Title-1=Something&File-1=something.txt처럼 보였다 쿼리 문자열에 대한

, 당신은 그것은 여기에 영어 만의

$VAR1 = { 
      '1' => { 
        'Title' => 'Something', 
        'File' => 'something.txt' 
       } 
     }; 
+0

Thx for ur help Chris! 지금 당장 이걸 확인해 보겠습니다. :) –

+0

지금하고 싶은 것은,이 값을 해시, 해시, 요소의 수를 저장하여 게시하는 것입니다. 예를 들어, –

+0

해시의 해쉬는'$ somekey} = $ somevalue ='somevalue;'처럼 보이지만 키와 값만 있습니다. 두 번째 키가 누락되었습니다. –