2014-01-16 3 views
1

두 번 클릭하면 tr 요소를 한 컨테이너에서 다른 컨테이너로 이동시키는 스크립트가 있습니다. 그러나 내가 아래에 언급 한 문제 :요소를 두 번 클릭하면 문제가 발생합니다.

1) 우리가 이동하지만 값이 오지 않는 것보다 요소를 두 번 클릭 매우 빠르다 않으면, 그것은 빈 태그를 보여줍니다.
2) 두 번 클릭 할 때 배경색을 변경하고 바깥 쪽 또는 다른 요소를 클릭하면 색상이 제거되어야합니다.

enter image description here

<script> 
    $(function() { 
     function initTabelMgmt() { 
      selectInvitees(); 
      moveSelectedInvitees(); 
      deleteInvitees(); 
      //scrollOpen(); 
     } 
     var tmContainer = $("div.cv-tm-body"); 
     var toggleAssignBtn = tmContainer.find('.cv-move-items button'); 
     /* 
     function scrollOpen() { 
      var position = $('div.cv-item li.open').first().position(); 
      var offsetTop = $('div.cv-tm-col-r .cv-helper-grid-overflow').scrollTop(); 
      var unitHeight = $('div.cv-item li.open').first().height(); 
      var containerHeight = $('div.cv-tm-col-r .cv-helper-grid-overflow').height(); 
      var scrollAmount = offsetTop + position.top; 


      if ((offsetTop - position.top) <= 0 && (offsetTop - position.top) >= (-containerHeight + unitHeight)) { 

       //do nothing 
      } else { 
       $('div.cv-tm-col-r .cv-helper-grid-overflow').animate({ 
        scrollTop: scrollAmount 

       }); 

      } 
     }; 
     */ 
     // scrollOpen end 
     function selectInvitees() { 
      //select items from invitee list 
      var startIndex, endIndex; 
      var dbclick = false; 
      tmContainer.find("table.cv-invitees").on('click', 'tr', function (e) { 

       var row = $(this); 
       setTimeout(function() { 
        //singleclick functionality start. 
        if (dbclick == false) { 
         if (!row.is('.assigned')) { 
          toggleAssignBtn.removeClass('is-disabled'); 
          if (e.shiftKey) { 
           row.parents('.cv-invitees').find('tr').removeClass('selected'); 
           endIndex = row.parents('.cv-invitees').find('tr').index(this); 
           var range = row.closest('table').find('tr').slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1).not('.assigned'); 
           range.addClass('selected'); 
          } else if (e.ctrlKey) { 
           startIndex = row.parents('.cv-invitees').find('tr').index(this); 
           row.toggleClass('selected'); 
          } else { 
           startIndex = row.parents('.cv-invitees').find('tr').index(this); 
           row.parents('.cv-invitees').find('tr').not(this).removeClass('selected'); 
           row.toggleClass('selected'); 
          } 
         } 
        } 
       }, 200) 
      }) 
       .dblclick(function() { 
        dbclick = true 
        //doubleclick functionality start. 
        toggleAssignBtn.addClass('is-disabled'); 
        function moveSelectedInviteesDBClick() { 
         var row = tmContainer.find("table.cv-invitees tr.selected"); 

         if (!row.is('.assigned')) { 
          var allOpenSeat = $('.cv-item .open'); 
          var numberOpen = allOpenSeat.length; 
          var name = row.find("td").eq(0).text();; 
          var company = row.find("td").eq(1).text(); 
          var addedInvitees = []; 

          allOpenSeat.each(function (index) { 
           if (index < 1) { 
            var openSeat = $(this); 
            openSeat.find('.name').text(name); 
            if (company != '') { 
             openSeat.find('.company').addClass('show').text(company); 
            } 
            var seatAssignment = new Object(); 
            seatAssignment.company = ""; 
            addedInvitees.push(seatAssignment); 
            openSeat.removeClass('open'); 
           } 
           row.remove(); 
          }); 
         } 
        } // moveSelectedInviteesDBClick 
        moveSelectedInviteesDBClick(); 
        setTimeout(function() { 
         dbclick = false 
        }, 300) 
       }); 
     } // selectInvitees end 

     function moveSelectedInvitees() { 
      //move invitees from left to right 
      tmContainer.find('button.cvf-moveright').click(function() { 
       var selectedItem = $('.cv-invitees .selected'); 
       var allOpenSeat = $('.cv-item .open'); 
       var numberSelected = selectedItem.length; 
       var numberOpen = allOpenSeat.length; 
       var errorMsg = tmContainer.prev('.cv-alert-error'); 
       if (numberSelected > numberOpen) { 
        errorMsg.removeClass('is-hidden'); 
       } else { 
        var name; 
        var company; 
        var invitee = []; 
        var selectedInvitees = []; 
        var count = 0; 
        selectedItem.each(function() { 
         var $this = $(this); 
         name = $this.find("td").eq(0).text(); 
         company = $this.find("td").eq(1).text(); 
         invitee = [name, company]; 
         selectedInvitees.push(invitee); 
         count = count + 1; 
         i = 0; 
         $this.remove(); 
        }); 
        var addedInvitees = []; 
        var items = $('div.cv-item li'); 
        var seatItems = $('div.cv-order li'); 
        allOpenSeat.each(function (index) { 
         if (index < count) { 
          var openSeat = $(this); 
          openSeat.find('.name').text(selectedInvitees[index][0]); 
          if (selectedInvitees[index][1] != '') { 
           openSeat.find('.company').addClass('show').text(selectedInvitees[index][1]); 
          } 
          var seatAssignment = new Object(); 
          seatAssignment.company = ""; 
          addedInvitees.push(seatAssignment); 
          //selectedInvitees.shift(); 
          openSeat.removeClass('open'); 
         } 
        }); 
        selectedInvitees = []; 
       } 
       toggleAssignBtn.addClass('is-disabled'); 
      }); 
     } // moveSelectedInvitees end 

     function deleteInvitees() { 
      //move invitees from left to right 
      tmContainer.find('div.cv-tm-col-r .cv-icon-remove').click(function() { 
       //delete seat assignment 
       var icon = $(this); 
       var idx = $('.ui-sortable li').index(icon.parent()); 
       icon.parent().fadeTo(0, 0).addClass('open').find('.name').text('Open').end().fadeTo(750, 1); 
       icon.parent().find('.company').removeClass('show').text(''); 
       // icon.parent().find('.entitystub').text('00000000-0000-0000-0000-000000000000'); 
       // icon.parent().find('.entitytype').text('0'); 
       // icon.parent().find('.pipe').remove(); 
       // icon.hide(); 
       // var testSeat = $('.seat-numbers li').get(idx); 
       //var seatStub = j$.trim(j$(testSeat).find('.seatstub').text()); 
       //var input = { 'seatStub': seatStub }; 
       //AssignSeats(input, "/Subscribers/WS/SeatAssignmentService.asmx/DeleteRegistrant"); 
      }); 
     } 
     initTabelMgmt(); 
    }); // document.ready end 

    </script> 

답변

1

코드는 꽤 좋은 보인다. 또한 jQuery에서 단일 클릭 이벤트에 기본 메서드 .click (...)을 등록해야합니다. 그래서 다음 줄을하려면

tmContainer.find("table.cv-invitees").on('click', 'tr', function (e) { 

변경하십시오 :

tmContainer.find("table.cv-invitees").click(function (e) { 

을하고 모든 것이 잘 작동합니다. 몇 가지 이상한 이유로 인해이 기능은 항상 작동하지 않습니다. JQuery는 이상한 행동으로 인해 미리 정의 된 이벤트 (예 : onclick, onkeyup, onchange 등)에 기본 함수를 사용하도록 공식 권장합니다.

편집 : dblick 지금 작동하지 않는 경우 는 다음과 같이 2 선을하시기 바랍니다합니다

tmContainer.find("table.cv-invitees").click(function (e) { 
// [...] 
; 
tmContainer.find("table.cv-invitees").dbclick(function (e) { 
// [...] 

Edit2가를 : 그것은 작동하지 않는 경우 가, 너무, 다음 경우 단 한번의 클릭 이벤트 리스너를 제거하십시오 .click() 클로저에 있습니다. 이 경우 jQuery의 동작은 항상 단일 클릭으로 처리하기 때문입니다. 따라서 .click()이 항상 발생하기 때문에 dblick()이 트리거되지 않습니다. 그리고 jQuery는 최대 2 번의 빠른 클릭을 계산하지 않습니다. 기대 ^^ 예상치 못한

EDIT3 :이 그대로 희망 지금 작업을해야 전체 코드입니다 :

$(function() 
    { 
    function initTabelMgmt() 
    { 
     selectInvitees(); 
     moveSelectedInvitees(); 
     deleteInvitees(); 
     //scrollOpen(); 
    } 
    var tmContainer = $("div.cv-tm-body"); 
    var toggleAssignBtn = tmContainer.find('.cv-move-items button'); 
    var iClickCounter = 0; 
    var dtFirstClick, dtSecondClick; 
    /* 
    function scrollOpen() { 
     var position = $('div.cv-item li.open').first().position(); 
     var offsetTop = $('div.cv-tm-col-r .cv-helper-grid-overflow').scrollTop(); 
     var unitHeight = $('div.cv-item li.open').first().height(); 
     var containerHeight = $('div.cv-tm-col-r .cv-helper-grid-overflow').height(); 
     var scrollAmount = offsetTop + position.top; 


     if ((offsetTop - position.top) <= 0 && (offsetTop - position.top) >= (-containerHeight + unitHeight)) { 

      //do nothing 
     } else { 
      $('div.cv-tm-col-r .cv-helper-grid-overflow').animate({ 
       scrollTop: scrollAmount 

      }); 

     } 
    }; 
    */ 
    // scrollOpen end 
    function selectInvitees() 
    { 
     //select items from invitee list 
     var startIndex, endIndex; 
     var dbclick = false; 
     tmContainer.find("table.cv-invitees").click(function(e) 
               { 
                iClickCounter++; 
                if (iClickCounter === 1) 
                { 
                 dtFirstClick = new Date(); 
                 var row = $(this); 
                 window.setTimeout(function() 
                     { 
                      //singleclick functionality start. 
                      if (dbclick == false) 
                      { 
                       if (!row.is('.assigned')) 
                       { 
                        toggleAssignBtn.removeClass('is-disabled'); 
                        if (e.shiftKey) 
                        { 
                         row.parents('.cv-invitees').find('tr').removeClass('selected'); 
                         endIndex = row.parents('.cv-invitees').find('tr').index(this); 
                         var range = row.closest('table').find('tr').slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1).not('.assigned'); 
                         range.addClass('selected'); 
                        } 
                        else if (e.ctrlKey) 
                        { 
                         startIndex = row.parents('.cv-invitees').find('tr').index(this); 
                         row.toggleClass('selected'); 
                        } 
                        else 
                        { 
                         startIndex = row.parents('.cv-invitees').find('tr').index(this); 
                         row.parents('.cv-invitees').find('tr').not(this).removeClass('selected'); 
                         row.toggleClass('selected'); 
                        } 
                       } 
                      } 
                     }, 
                     200); 
                } 
                else if (iClickCounter === 2) 
                { 
                 dtSecondClick = new Date(); 
                } 
                else if (iClickCounter === 3) 
                { 
                 if (dtSecondClick.getTime() - dtFirstClick.getTime() < 1000) 
                 { 
                  return; 
                 } 

                 iClickCounter = 0; 
                 dbclick = true 
                 //doubleclick functionality start. 
                 toggleAssignBtn.addClass('is-disabled'); 
                 function moveSelectedInviteesDBClick() 
                 { 
                  var row = tmContainer.find("table.cv-invitees tr.selected"); 

                  if (!row.is('.assigned')) 
                  { 
                   var allOpenSeat = $('.cv-item .open'); 
                   var numberOpen = allOpenSeat.length; 
                   var name = row.find("td").eq(0).text();; 
                   var company = row.find("td").eq(1).text(); 
                   var addedInvitees = []; 

                   allOpenSeat.each(function (index) 
                       { 
                        if (index < 1) 
                        { 
                         var openSeat = $(this); 
                         openSeat.find('.name').text(name); 
                         if (company != '') { 
                          openSeat.find('.company').addClass('show').text(company); 
                         } 
                         var seatAssignment = new Object(); 
                         seatAssignment.company = ""; 
                         addedInvitees.push(seatAssignment); 
                         openSeat.removeClass('open'); 
                        } 
                        row.remove(); 
                       } 
                   ); 
                  } 
                 } 
                 // moveSelectedInviteesDBClick 
                 moveSelectedInviteesDBClick(); 
                 window.setTimeout(function() 
                     { 
                      dbclick = false 
                     }, 300); 
                } 
               } 
              ); 
    } // selectInvitees end 

    function moveSelectedInvitees() 
    { 
     //move invitees from left to right 
     tmContainer.find('button.cvf-moveright').click(function() 
                 { 
                  var selectedItem = $('.cv-invitees .selected'); 
                  var allOpenSeat = $('.cv-item .open'); 
                  var numberSelected = selectedItem.length; 
                  var numberOpen = allOpenSeat.length; 
                  var errorMsg = tmContainer.prev('.cv-alert-error'); 
                  if (numberSelected > numberOpen) { 
                   errorMsg.removeClass('is-hidden'); 
                  } 
                  else 
                  { 
                   var name; 
                   var company; 
                   var invitee = []; 
                   var selectedInvitees = []; 
                   var count = 0; 
                   selectedItem.each(function() { 
                    var $this = $(this); 
                    name = $this.find("td").eq(0).text(); 
                    company = $this.find("td").eq(1).text(); 
                    invitee = [name, company]; 
                    selectedInvitees.push(invitee); 
                    count = count + 1; 
                    i = 0; 
                    $this.remove(); 
                   }); 
                   var addedInvitees = []; 
                   var items = $('div.cv-item li'); 
                   var seatItems = $('div.cv-order li'); 
                   allOpenSeat.each(function (index) 
                       { 
                        if (index < count) 
                        { 
                         var openSeat = $(this); 
                         openSeat.find('.name').text(selectedInvitees[index][0]); 
                         if (selectedInvitees[index][1] != '') 
                         { 
                          openSeat.find('.company').addClass('show').text(selectedInvitees[index][1]); 
                         } 
                         var seatAssignment = new Object(); 
                         seatAssignment.company = ""; 
                         addedInvitees.push(seatAssignment); 
                         //selectedInvitees.shift(); 
                         openSeat.removeClass('open'); 
                        } 
                       } 
                   ); 
                   selectedInvitees = []; 
                  } 
                  toggleAssignBtn.addClass('is-disabled'); 
                 } 
               ); 
    } // moveSelectedInvitees end 

    function deleteInvitees() 
    { 
     //move invitees from left to right 
     tmContainer.find('div.cv-tm-col-r .cv-icon-remove').click(function() 
                    { 
                    //delete seat assignment 
                    var icon = $(this); 
                    var idx = $('.ui-sortable li').index(icon.parent()); 
                    icon.parent().fadeTo(0, 0).addClass('open').find('.name').text('Open').end().fadeTo(750, 1); 
                    icon.parent().find('.company').removeClass('show').text(''); 
                    // icon.parent().find('.entitystub').text('00000000-0000-0000-0000-000000000000'); 
                    // icon.parent().find('.entitytype').text('0'); 
                    // icon.parent().find('.pipe').remove(); 
                    // icon.hide(); 
                    // var testSeat = $('.seat-numbers li').get(idx); 
                    //var seatStub = j$.trim(j$(testSeat).find('.seatstub').text()); 
                    //var input = { 'seatStub': seatStub }; 
                    //AssignSeats(input, "/Subscribers/WS/SeatAssignmentService.asmx/DeleteRegistrant"); 
                   } 
                  ); 
    } 
    initTabelMgmt(); 
} 
); // document.ready end 

나는 3 번에 클릭으로 당신은 두 번 클릭하여 특별한 경우에 해석 추측 같은 테이블 엔트리. 사용자가 그렇게하고 첫 번째 클릭과 두 번째 클릭 사이의 시간차가 1 초보다 길면 두 번 클릭이 시작됩니다. 나는이 특별한 경우를 다루는 해결책이라고 생각한다.

편집 4 : 3 개의 다른 테이블 열을 클릭하고 두 번 클릭하면 해고 될 수 있는지 테스트하십시오. 내 코드가 두 번 클릭을 처리하는 방식에 불리하다고 생각합니다. 따라서, 이미 1 ~ 3 번의 클릭이 설정된 테이블 열을 알아야합니다. 우리는 어떻게이 일을 할 수 있습니까? 기본적으로,이 작업을 수행하는 3 가지 가능성이 있습니다

  1. (HTML5는 데이터의 각 TR에 속성과 클릭이 이미 TR에 clicke해야이 데이터 속성 의 값을 확인합니다 :).
  2. 이벤트 ID를 보유하고있는 글로벌 객체 키/값 쌍 객체를 정의하십시오 (그러나 jQuery를 통해 이벤트로이 키를 얻는 방법을 모르겠습니다). 키로 이미 수행 된 클릭 수와 값.그리고 나서 다음 클릭에 도달하면 이 무엇인지 결정할 수 있습니다. 이것은 내가 가장 좋아하는 대안입니다!
  3. 마지막 트릭 : 모든 tr에 클릭 이벤트 만 등록하고 클릭하면 각자의 글로벌 영역을 클릭 등록하게되므로 은 실제 문제를 피할 수 있습니다. 당신은 이것을 할 수 있습니다. e. 지. 구성원 변수를 보유하는 JS 개체를 iclickCounter로 만들고 새 클래스 개체를 만듭니다 (새 클릭 이벤트가 인 경우). 그러나이 대안은 더 많은 코드가 필요하며 주요 메모리를 필요로합니다.

가능한 모든 옵션은 클릭 이벤트를 둘러 싸야합니다. 지. 루프는 주어진 테이블의 모든 tr 요소를 반복합니다. jQuery 함수 .find (..)를 호출하여이 작업을 부분적으로 수행했습니다. 이것은 발견 된 모든 html 요소에 대해 클로저를 실행합니다. 따라서, 검색된 테이블의 모든 tr 요소에 대한 귀하의 경우. 그러나 당신이해야 할 일은 위에 주어진 나의 옵션 중 하나의 대안을 만드는 것입니다.

+0

당신의 노력에 감사하지만 이제는 더블 클릭 기능이 작동하지 않습니다 ... – Praveen

+0

한 번의 클릭으로 기능이 작동하므로 단일 클릭 동작이 필요합니다.이 경우 버튼을 지정합니다. 전체를 붙여 넣으십시오. 코드. 그래서 그것은 나에게 쉽다. – Praveen

관련 문제