动态启用/禁用 jquery 可排序项目
我的表格行可以根据是否选中某些单选按钮进行排序。可排序项在 document.ready
上初始化,如下所示:
$(document).ready(function() {
// Return a helper with preserved width of cells
// handy code I got from http://lanitdev.wordpress.com/2009/07/23/make-table-rows-sortable-using-jquery-ui-sortable/
var fixHelper = function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
};
// #opts = table id; tr.ui-state-disabled class = rows not sortable
$("#opts tbody").sortable({
items: 'tr:not(.ui-state-disabled)',
cursor: 'crosshair',
helper: fixHelper
}).disableSelection();
});
我将以下函数附加到单选按钮(ids 前缀为“active_”)onchange
,它可以添加或删除 <表行中的 code>ui-state-disabled 类属性(动态 ID 前缀为“opt_”):
var toggleDrag = function(i){
if ($('#active_'+i+'-0').is(':checked')) {
$('#opt_'+i).addClass('ui-state-disabled');
}
if ($('#active_'+i+'-1').is(':checked')) {
$('#opt_'+i).removeClass();
}
$("#opts tbody").sortable("option", "items", "tr:not(.ui-state-disabled)");
//$("#opts tbody").sortable("refresh");
//alert($('#opt_'+i).attr('class')); - alert indicates that the class attribute is being changed
//$("#opts tbody").sortable("option", "cursor", "auto"); - this works!
}
如果我选择一个单选按钮,该按钮应使先前不可排序的行可排序,它会起作用,并且我可以拖放行。问题是,如果我选择一个单选按钮来创建以前可排序、不可排序的行,我仍然可以拖放它。如果先前可排序,设置器 .sortable("option", "items", "tr:not..etc")
不会出现“取消注册”行。我也尝试过 .sortable("refresh") 但没有运气。我已经检查过类属性是否正在通过警报进行更改,确实如此。
任何对此的帮助将不胜感激。
I have table rows that are sortable depending on whether certain radio buttons are checked or not. The sortables are initialized on document.ready
as follows:
$(document).ready(function() {
// Return a helper with preserved width of cells
// handy code I got from http://lanitdev.wordpress.com/2009/07/23/make-table-rows-sortable-using-jquery-ui-sortable/
var fixHelper = function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
};
// #opts = table id; tr.ui-state-disabled class = rows not sortable
$("#opts tbody").sortable({
items: 'tr:not(.ui-state-disabled)',
cursor: 'crosshair',
helper: fixHelper
}).disableSelection();
});
I have the following function attached to the radio buttons (ids prefixed "active_") onchange
which either adds or removes the ui-state-disabled
class attribute from table rows (dynamic ids prefixed "opt_"):
var toggleDrag = function(i){
if ($('#active_'+i+'-0').is(':checked')) {
$('#opt_'+i).addClass('ui-state-disabled');
}
if ($('#active_'+i+'-1').is(':checked')) {
$('#opt_'+i).removeClass();
}
$("#opts tbody").sortable("option", "items", "tr:not(.ui-state-disabled)");
//$("#opts tbody").sortable("refresh");
//alert($('#opt_'+i).attr('class')); - alert indicates that the class attribute is being changed
//$("#opts tbody").sortable("option", "cursor", "auto"); - this works!
}
If I select a radio button that should make a previously un-sortable row sortable, it works and I can drag and drop the row. The problem is if I select a radio button to make a row that previously was sortable, un-sortable, I can still drag and drop it. The setter .sortable("option", "items", "tr:not..etc")
doesn't appear "un-register" a row if it was previously sortable. I also tried .sortable("refresh") with no luck. And I have checked to see if the class attribute is being changed with an alert and it is.
Any help with this would be greatly appreciated.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
我遇到了同样的问题,
items
选项似乎没有删除之前启用的项目。然而,
cancel
选项却可以。请注意,禁用的项目将四处移动,为可排序的项目腾出空间(该位置仍可用作放置目标),但拖动禁用的项目本身将不起作用。使用disabled
类还可以根据项目是否可排序轻松更改样式(请参阅 jsfiddle)。这里的代码部分基于 Bah Bah the Lamb 的答案,但已被大大整理和简化。
html:
jQuery:
CSS:
I ran into the same problem, that the
items
option doesn't seem to remove items which had been previously enabled.The
cancel
option, however, does. Note that the disabled items will shift around to make room for the sortable ones (the spot is still available as a drop target), but dragging the disabled items themselves will not work. Using adisabled
class also makes it easy to change the style based on whether or not the item is sortable (see on jsfiddle).The code here is partially based on Bah Bah the Lamb's answer, but it has been greatly tidied and simplified.
The html:
The jQuery:
The CSS:
我遇到了类似的问题,并找到了一个简单的解决方案(但在我的示例中,我使用的是可排序的 ul 而不是表格,因为 ul 中的标记有更多的自由度)。
其背后的想法是让列表及其所有项目可排序,但删除句柄,从而禁用单个项目的排序能力,如以下代码所示
I had a similar problem and found an easy solution (but in my example I am using a sortable ul not a table, as there is more freedom with mark-up in ul's).
The idea behind it is to leave the list and all its items sortable, but remove the handle, thus disabling the individual item's ability to sort, as seen in this code
尝试使用
disabled
选项。 http://jqueryui.com/demos/sortable/#option-disabledTry using the
disabled
option. http://jqueryui.com/demos/sortable/#option-disabled我一直在尝试做同样的事情。我真的想要这些项目功能而不是禁用。如上所述,jQueryUI 实现中存在一个弱点,即如果选择器匹配的项目发生更改,可排序不会刷新项目列表。
为了解决这个问题,我简单地销毁并重新实例化了排序。我改编了 Hannele 的 JSfiddle 来演示(http://jsfiddle.net/Sxg8D/140/) 。
I've been trying to do the same thing. I really wanted the items feature rather than disabled. As pointed out above, there is a weakness in the jQueryUI implementation whereby the sortable don't refresh the items list should the items matched by the selectors change.
To get around this, I simply destroyed and reinstantiated the sortabled. I've adapted Hannele's JSfiddle to demonstrate (http://jsfiddle.net/Sxg8D/140/).
我知道这很旧,但也有类似的问题。我将可排序的项目分组。我希望某些组可以在任何地方进行排序,而有些组只能对组的一小部分进行排序。
noSort
中的项目可以在任何地方排序。canSort
中的项目只能排序到其他canSort
块中。然后在 init 之后设置这个规则似乎就成功了。
试图在开始/停止事件中动态地执行此操作,但这确实有效,不确定“为什么”,所以请好好测试。
I know this is old, but had a similar problem. I had my sortable items in groupings. I wanted certain groups to be sortable anywhere and some to only be sortable to a subsection of groups.
Items from
noSort
can sort anywhere. Items fromcanSort
can only sort into othercanSort
blocks.Then setting this rule after the init seemed to do the trick.
Was trying to do it dynamically in the start/stop events, but this did the trick, not sure "why", so test well.