如何限制JQuery selectable-helper的範圍？

我有一個JQuery的selectable功能的表。我的表是可選的每個td它們在同一列中。下面是我的全功能HTML如何限制JQuery selectable-helper的範圍？

<html> 
    <head> 
     <link href="/css/jquery-ui.css" rel="stylesheet" type="text/css"> 
     <link href="/css/schedulerGrid.css" rel="stylesheet" type="text/css"> 
     <script src="/js/jquery-ui.js" type="text/javascript"> 
     <script src="/js/jquery.js" type="text/javascript"> 
     <script src="/js/schedulerGrid.js" type="text/javascript"> 
     </head> 
    <head> 
    <body> 
     <div class="scheduler-area"> 
      <div class="scheduler-container"> 
       <table class="scheduler"> 
        <thead> 
         <tr> 
          <th class="header"> 
           <div class="header-name">01</div> 
          </th> 
          <th class="header"> 
           <div class="header-name">02</div> 
          </th> 
          <th class="header"> 
           <div class="header-name">03</div> 
          </th> 
          <th class="header"> 
           <div class="header-name">04</div> 
          </th> 
          <th class="header"> 
           <div class="header-name">05</div> 
          </th> 
          <th class="header"> 
           <div class="header-name">06</div> 
          </th> 
          <th class="header"> 
           <div class="header-name">07</div> 
          </th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
         </tr> 
         <tr> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
         </tr> 
         <tr> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
         </tr> 
         <tr> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
         </tr> 
         <tr> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
         </tr> 
         <tr> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
         </tr> 
         <tr> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
         </tr> 
         <tr> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
          <td class="item"></td> 
         </tr> 
        </tbody> 
       </table> 
      </div>  
     </div> 
    </body> 
</html>

而且的JavaScript爲可選

var currentCol; 
$(document).ready(function(){ 
    $(".scheduler-container").selectable({ 
       filter: ".item", 
       start: function(event, ui) { 
        $(".item").removeClass("ui-selected"); 
       }, 
       stop: function(event, ui) { 

        //Reset selector. 
        currentCol = undefined; 
       }, 
       selecting: function(event, ui) { 

        if (currentCol === undefined) { 
         currentCol = $(ui.selecting).index(); 
        } 

        var nthChild = parseInt(currentCol) + 1; 
        for (var i = 1; i <= $(".scheduler").children('tbody').children('tr').children('.item').length; i++) { 

         if (i != nthChild) { 
          $(".item.ui-selecting:nth-child(" + i + ")").each(function() { 
           $(this).removeClass("ui-selecting"); 
          }); 
         } 
        } 
        ; 
       } 
    }); 
});

而且CSS是

.scheduler-area { 
    position: relative; 
    border: 1px solid #000; 
    padding-top: 37px; 
    background: #777777; 
    overflow: hidden; 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0OTQ5NDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top, #777777 0%, #494949 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#777777), color-stop(100%,#494949)); 
    background: -webkit-linear-gradient(top, #777777 0%,#494949 100%); 
    background: -o-linear-gradient(top, #777777 0%,#494949 100%); 
    background: -ms-linear-gradient(top, #777777 0%,#494949 100%); 
    background: linear-gradient(to bottom, #777777 0%,#494949 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#777777', endColorstr='#494949',GradientType=0); 
} 

.scheduler-container { 
    overflow-y: auto; 
    height: 200px; 
} 
.scheduler { 
    border-spacing: 0; 
    width:100%; 
} 
.scheduler .item + .item { 
    border-left:1px solid #777777; 
} 
.scheduler .item, .header { 
    border-bottom:1px solid #777777; 
    background: #F7F7F7; 
    color: #000; 
    padding: 25px; 
} 
.scheduler .header { 
    height: 0; 
    line-height: 0; 
    padding-top: 0; 
    padding-bottom: 0; 
    color: transparent; 
    border: none; 
    white-space: nowrap; 
    border-left: 1px solid #777777; 
    border-bottom: none; 
} 

.scheduler .header:FIRST-CHILD { 
    border-left: none; 
} 
.scheduler .header .header-name{ 
    position: absolute; 
    background: transparent; 
    color: #fff; 
    padding: 8px 25px; 
    top: 0; 
    margin-left: -26px; 
    line-height: normal; 
    border-left: 1px solid #393C44; 
    width: 165px; 
} 
.scheduler .header:first-child .header-name{ 
    border: none; 
} 

.scheduler .ui-selecting { 
    background: #97B58F; 
} 

.scheduler .ui-selected { 
    background: #4C6840; 
    color: white; 
} 
.ui-selectable-helper { 
    border:1px solid #747474; 
}

這裏是JSFIDDLE Link。我的問題是我想限制可選幫手的選擇範圍，但我不知道如何去做。表的元素可以在同一列中選擇。因此，選擇應該綁定在同一列中。我怎樣才能用CSS或JavaScript來設計它？

來源

2015-08-28 Cataclysm

如果你不清楚我的問題，[這裏]（http://www.bryntum.com/examples/scheduler-latest/examples/weekview/weekview.html）是示例鏈接，我想實現。 – Cataclysm

不知道我是否有問題。

你想達到這樣的目的嗎？

因此，對於此示例，它允許您僅選擇在列範圍之間定義的列。

var columnsRange =[[0,1],[2,3],[0,3],[0,3],[1,3],[3,3],[1,3]]; 
var currentCol; 
    $(".scheduler-container").selectable({ 
       filter: ".item", 
       start: function(event, ui) { 
        $(".item").removeClass("ui-selected"); 
       }, 
       stop: function(event, ui) { 

        //Reset selector. 
        currentCol = undefined; 
       }, 
       selecting: function(event, ui) { 

        if (currentCol === undefined) { 
         currentCol = $(ui.selecting).index(); 
        }     
        var nthChild = parseInt(currentCol) + 1; //Add one as nthChild is not zero index 
        for (var i = 1; i <= $(".scheduler").children('tbody').children('tr').children('.item').length; i++) { 

         if (i != nthChild) { 
          $(".item.ui-selecting:nth-child(" + i + ")").each(function() { 
           $(this).removeClass("ui-selecting"); 
          }); 
         } 
        }; 
        if (!isInRange($(ui.selecting))) { 
         $(ui.selecting).removeClass("ui-selecting"); 
        } 
       } 
    }); 

function isInRange(cell){  
    if (cell.closest('tr').index() >=columnsRange[cell.index()][0] && cell.closest('tr').index() <=columnsRange[cell.index()][1]) 
    {   
     return true; 
    } 
    return false; 
}

來源

2015-08-28 11:54:44 calinaadi

如何限制JQuery selectable-helper的範圍？

回答

相關問題