如何限制JQuery selectable-helper的范围? [英] How to limit JQuery selectable-helper's range?
本文介绍了如何限制JQuery selectable-helper的范围?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个具有JQuery的可选功能的表.每个 td .以下是我的完整html
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>
和 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链接. 我的问题是我想限制 selectable-helper 的选择范围，但我不知道该怎么做.表格的元素可以在同一列中选择，因此选择应该绑定在同一列中.如何使用CSS或JavaScript来计算?
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 ?
推荐答案
不确定我是否正确回答了您的问题.
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;
}
这篇关于如何限制JQuery selectable-helper的范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
