searchable JQuery Connected Sortable 的奇怪行为。需要修复
Strange behavior to searchable JQuery Connected Sortable. Need fix
我正在使用一个连接的排序表,通过 asp.net 后端单击按钮可以很好地保存。其他功能包括搜索每个列表的能力。在您将项目从一个列表拖放到另一个列表之前,这种方法效果很好。当我使用 JavaScript 搜索一个列表以搜索一个列表中的项目时,它仍然认为它是第一个列表的一部分。有人见过这种行为吗?并且您是否知道可能的修复方法,使项目永久成为 DOM 中所述拖动列表的一部分。此行为存在于 FF、IE、Chrome 等
现在我在这个列表上确实有按钮,可以根据选中的项目然后单击按钮将项目从一个列表移动到另一个列表,然后使用 JQuery append(); 它成为第二个列表的一部分; .这使该项目成为第二个列表 DOM 的永久部分,并且能够在该列表中进行搜索。
所以这是我的 "Ah-Ha" 时刻。它正在做它应该做的事情来寻找物品并展示它,如果它不是物品,它就不会展示它。但是,当使用 sortable 将项目移动到另一列时,它仍然具有与第一列相同的 class。我需要进行切换。
答案如下...
http://jsfiddle.net/6jmLvysj/
$(input)
.change(function () {
var filter = $(this).val();
if (filter) {
//here is my DAH moment it is looking for this class so when the user was typing in the first search input it was looking for item it would be searching for it is the second column--give myself a Gib slap--
$(list).find(".ui-state-default:not(:Contains(" + filter + "))").hide();
$(list).find("ui-state-default:Contains(" + filter + ")").show();
} else {
$(list).find(".ui-state-default").show();
}
return false;
})
.keyup(function () {
$(this).change();
});
然后这个
//so here is where I changed this code when the user brings the item over then it changes it to the proper respected class depending where the user drops it so it can be searched.
stop: function (event, ui) {
if (ui.item.hasClass("ui-state-default")) {
ui.item.attr('class', 'ui-state-highlight');
}
else {
ui.item.attr('class', 'ui-state-default');
}
我正在使用一个连接的排序表,通过 asp.net 后端单击按钮可以很好地保存。其他功能包括搜索每个列表的能力。在您将项目从一个列表拖放到另一个列表之前,这种方法效果很好。当我使用 JavaScript 搜索一个列表以搜索一个列表中的项目时,它仍然认为它是第一个列表的一部分。有人见过这种行为吗?并且您是否知道可能的修复方法,使项目永久成为 DOM 中所述拖动列表的一部分。此行为存在于 FF、IE、Chrome 等
现在我在这个列表上确实有按钮,可以根据选中的项目然后单击按钮将项目从一个列表移动到另一个列表,然后使用 JQuery append(); 它成为第二个列表的一部分; .这使该项目成为第二个列表 DOM 的永久部分,并且能够在该列表中进行搜索。
所以这是我的 "Ah-Ha" 时刻。它正在做它应该做的事情来寻找物品并展示它,如果它不是物品,它就不会展示它。但是,当使用 sortable 将项目移动到另一列时,它仍然具有与第一列相同的 class。我需要进行切换。
答案如下... http://jsfiddle.net/6jmLvysj/
$(input)
.change(function () {
var filter = $(this).val();
if (filter) {
//here is my DAH moment it is looking for this class so when the user was typing in the first search input it was looking for item it would be searching for it is the second column--give myself a Gib slap--
$(list).find(".ui-state-default:not(:Contains(" + filter + "))").hide();
$(list).find("ui-state-default:Contains(" + filter + ")").show();
} else {
$(list).find(".ui-state-default").show();
}
return false;
})
.keyup(function () {
$(this).change();
});
然后这个
//so here is where I changed this code when the user brings the item over then it changes it to the proper respected class depending where the user drops it so it can be searched.
stop: function (event, ui) {
if (ui.item.hasClass("ui-state-default")) {
ui.item.attr('class', 'ui-state-highlight');
}
else {
ui.item.attr('class', 'ui-state-default');
}