我有一个包含不同元素的列表。我希望所有人都可以选择,但只能在小组中。像:
<ul>
<li rel="group1">Item 1</li>
<li rel="group1">Item 2</li>
<li rel="group2">Item 3</li>
<li rel="group2">Item 4</li>
<li rel="group3">Item 5</li>
<li rel="group3">Item 6</li>
</ul>
我写了一些可以工作的东西,但是如果当前的元素rel属性与首先选择的不同,我不知道如何取消当前选择。
var selected = null;
$( "#selectable" ).selectable({
selecting: function(event, ui) {
if (!selected)
selected = $(ui.selecting).attr('rel');
if (selected != $(ui.selecting).attr('rel')){
// cancel this selection
}
}
});
答案 0 :(得分:1)
您可以使用filter
选项仅启用某些列表项。
我为你准备了这个DEMO,过滤器只有一个问题。从selecting
处理程序中更改启用的项时,它不起作用。所以我在stop
处理程序中添加了一些修正,在那里我删除了未启用的项目中的选择。
您的脚本可能如下所示:
var locked = false;
function enableAll() {
$('li').addClass('enabled');
locked = false;
}
$("#selectable").selectable({
// allow only enabled items to be selected
filter: '.enabled',
selecting: function(event, ui) {
if (!locked) {
var group = $(ui.selecting).attr('rel');
// disable all items belonging to other groups
$("#selectable li[rel!='" + group + "']").removeClass('enabled');
locked = true;
}
},
stop: function() {
// this fixes selectable behavior
// (it ignores dynamically added filter while selecting)
$(this).find('li.ui-selected:not(.enabled)').removeClass('ui-selected');
// if no item is selected, then enable all groups
if($(this).find('.ui-selected').length == 0) {
enableAll();
};
}
});
// initialize
enableAll();
答案 1 :(得分:0)
选中 FIDDLE - 明智地选择。
<强> HTML 强>
<ul id="selectable">
<li class="ui-widget-content" rel="group1">Item 1</li>
<li class="ui-widget-content" rel="group1">Item 2</li>
<li class="ui-widget-content" rel="group1">Item 3</li>
<li class="ui-widget-content" rel="group2">Item 4</li>
<li class="ui-widget-content" rel="group2">Item 5</li>
<li class="ui-widget-content" rel="group3">Item 6</li>
<li class="ui-widget-content" rel="group3">Item 7</li>
</ul>
<强> jquery的强>
$("#selectable").selectable({
selected: function (event, ui) {
var gr1Count = 0;
var gr2Count = 0;
var gr3Count = 0;
$(".ui-selected").each(function () {
// Group 1
if ('group1' == $(this).attr('rel')) {
gr1Count++;
}
if (gr1Count > 1) {
$(this).removeClass('ui-selected')
}
// Group 2
if ('group2' == $(this).attr('rel')) {
gr2Count++;
}
if (gr2Count > 1) {
$(this).removeClass('ui-selected')
}
// Group 3
if ('group3' == $(this).attr('rel')) {
gr3Count++;
}
if (gr3Count > 1) {
$(this).removeClass('ui-selected')
}
});
}
});
答案 2 :(得分:0)
$(function() {
var message = $('#message');
var tr = $('#tbl').find('tr');
tr.bind('click', function(event) {
var values = '';
tr.removeClass('row-highlight');
var tds = $(this).addClass('row-highlight').find('td');
$.each(tds, function(index, item) {
values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
});
message.html(values);
});
});
MOUSE OVER:
var message = $('#message');
var tr = $('#tbl').find('tr');
tr.hover(
function() { // mouseover
$(this).addClass('row-highlight');
var values = '';
var tds = $(this).find('td');
$.each(tds, function(index, item) {
values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
});
message.html(values);
},
function() { // mouseout
$(this).removeClass('row-highlight');
message.html('');
}
);
});
CUSTOM TD:
<table id ="table1">
<th>MAHDI</th>
<th>PISHGUY</th>
<tr>
<td id = "1">username</td>
<td id = "2">666</td>
</tr>
</table>
$('#table1 tr').each(function (){
var vara = $(this).find('#2').html();
if(vara != null)
alert($(this).find('#2').html());
});
或:
<tr class="rowid">
<td class="user">A</td>
<td class="id">B</td>
</tr>
$(document).ready(function(){
rows = $(".rowid").each(function(index,value){
user = $(value).children(".user").text();
id = $(value).children(".id").text();
alert(id+'\t'+user);
});
});
答案 3 :(得分:0)
我必须做类似的事情。我最近做的一个项目有多个部分分成行,每行有三个部分或列。我们需要这些功能,如果他们将第1列从第1位排序到第3位,那么所有其他行都会相应地对其列进行排序。我通过调用animate函数完成此操作,当排序完成时,它将获取触发排序并重新定位它们的所有其他关系列。您可以在此处相应地执行相同操作,或者只是通过在每个组周围添加容器来重建列表,然后按容器排序,并禁用容器中的排序功能。因此,组1将是列表项,但在排序时,将其排序为单个实体。希望这会有所帮助。快乐的编码!