描述:
我有两个Infragistics DataGrids,一个是UI.Sortable
,并接受来自第二个Grid UI.Draggable
的行。
我使用receive
事件来获取网格内部删除的新行位置/索引,以执行服务器请求,以相应地重新排序数据库中的行。
只要我在第一个网格中的现有行之间删除行,这一切都很有效。当我在网格中进一步向下移动一行时(网格本身由多个HTML表格元素和一个包含div
标记组成),该行将被删除到网格的末尾(这是所需的行为),但是我得到的索引/位置总是' 1'。
代码:
var newItem;
$("#tbl2 tr").draggable({
connectToSortable: "#tbl",
helper: 'clone'
});
$("#tbl").sortable({
revert: true,
items: "tr",
beforeStop: function (event, ui) {
newItem = ui.item;
},
receive: function (event, ui) {
$newOrder = $(newItem).parent().children().index(newItem);
alert($newOrder);
}
}).disableSelection();
<div id="tbl">
<table id="dataTbl">
<tr><td><b>Test1</b></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</table>
</div>
<table id="tbl2">
<tr><td><b>Test1</b></td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</table>
演示(简化,我使用tables
代替WebDataGrid
并在第一个表周围添加div
以重现相同的行为)
答案 0 :(得分:1)
您的可排序#tbl
不是表,而是包含实际表的div
。这意味着,在某些情况下,拖动的行可以删除到表外,$(newItem).parent().children()
是容器的子项,而不是行。
一个简单的解决方法是将您的表用作可排序的,类似这样的
var $receiver = $("#tbl").find('table');
$receiver.sortable({
// ...
}).disableSelection();
并将draggables连接到此表:
$("#tbl2 tr").draggable({
connectToSortable: $receiver,
helper: 'clone'
});
请参阅http://jsfiddle.net/dn7Z4/了解演示。
答案 1 :(得分:1)
正如nikoshr指出的那样,您的sortable是容器div#tbl
,而不是其中的表。因此,该项目将附加到div#tbl
。
他的answer是一种可行的解决方法。但是,如果您确实希望容器div#tbl
是可排序的,请将已删除的项追加到其中的表中,并根据当前设置中的表检索索引,您可以按如下方式更新接收处理程序:
function (event, ui) {
if(!$(newItem).parent().is('tbody')) // check whether it's a drop in container or not
$(this).children('#dataTbl').append(newItem.remove()); //it so manually append the item to table
$newOrder = $(newItem).parent().children().index(newItem);
alert($newOrder);
}