2014-01-16 48 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) { 

,一切都应该正常工作。由于某些奇怪的原因,功能

$("#someelement").on("click", ...); 

不总是有效,只是有时候。由于这种奇怪的行为,JQuery正式推荐你使用本地函数来预定义事件(例如onclick,onkeyup,onchange等)。

编辑: 如果dblick现在无法正常工作,然后进行2行请,如:

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

EDIT2: 如果它不工作,过的话,请删除单个click事件侦听器时你在.click()关闭。因为如果发生这种情况,jQuery的行为就是将其视为一次单击。换言之,dblick()永远不会被触发,因为.click()将始终发生。然后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倍,在点击相同的表格条目。如果用户这样做,并且如果第一次点击和第二次点击之间的时间差超过一秒钟,双击将被触发。我认为应该是解决这个特殊情况的解决方案。

编辑4:请测试一下,如果可以点击3个不同的表格列并且双击也可以。我认为这是我的代码处理双击的缺点。因此,您需要知道您已从哪个表格列中设置了1到3次点击。我们应该怎么做?基本上,有3种可能性要做到这一点:

  1. (仅限HTML5 :)让每个TR数据属性和该数据属性 应该是点击已经clicke这个TR值。
  2. 定义一个全局对象键/值对对象,该对象包含事件ID(但我不知道如何通过jQuery驱动的 事件返回)作为键和已完成的点击量值为 。然后如果你正在进行下一次点击,你可以决定什么是 现在要做这个tr。这是我最喜欢的选择!
  3. 最后但并非最不重要:只注册点击事件在每个tr和 使每个点击注册一个自己的全球区域,以便我们只需 避免实际问题。你可以做这个e。 G。通过使一个JS 对象持有一个成员变量作为iclickCounter并且你创建了这个类的新对象,每当一个新的点击事件被注册为 时。但是这种替代方法需要更多的代码,并且需要大量内存。

所有可能的选项都需要环绕点击事件, G。一个循环,遍历给定表中的所有tr元素。你已经部分通过调用jQuery函数.find(..)来做到这一点。这将在每个找到的html元素上执行闭包。所以,在你的情况下,搜索表中的所有tr元素。但是你需要做的是制定上面给出的选项之一的解决方法。

+0

感谢@alpham为您的努力,但现在双击功能无法正常工作... – Praveen

+0

我需要单击单击行为,因为单击功能也起作用,我们为此案分配了按钮..您可以粘贴整个正确的代码..因此,我很容易尝试 – Praveen