1

I have a Table with JQuery's selectable feature.My Table was selectable each td which are in the same column. Below is my full html

<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>

And JavaScript for selectable

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

And CSS is 

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

Here is JSFIDDLE Link. My problem is I would like to restrict selectable-helper's selection range but I have no idea how to do it. Table's elements are selectable in the same column.So, the selection should be bound within the same column. How can I figure it with CSS or JavaScript ?

Cataclysm
  • 7,592
  • 21
  • 74
  • 123
  • If you don't clear enough with my question , [here](http://www.bryntum.com/examples/scheduler-latest/examples/weekview/weekview.html) is sample link that I would like to achieve. – Cataclysm Aug 28 '15 at 09:15

1 Answers1

0

Not sure if I got your question right.

Do you want to achieve something like this?

So for this example it allows you to select only columns that are defined between columns range.

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;
}
calinaadi
  • 1,466
  • 1
  • 13
  • 22