从一个jquery Datatable中拖动一行并将其放入另一个Datatable [英] Dragging a row from one jquery Datatable and dropping it into another Datatable

问题描述

我试图从一个jquery Datatable中拖动一行或一组行，并将其放入另一个Datatable。

  oTable = $（＃dragtable）。dataTable（{
aaData：app_emp，
bProcessing：true，
bDestroy：true，
aoColumns [{
mDataProp：employeeId
}，{
mDataProp：empName
}] 
}）rowReordering（）;我从ajax调用获取json并填充数据表如上所述。行重排序功能正在运行，而且还可以通过以下方式获取json：
  

<我可以在同一个数据表中拖放行

  $（＃dragtable）.draggable（{
帮手：克隆，
}）; 
  

上面的代码是拖动整个表，如果我修改如下：

$（＃dragtable tbody tr）.draggable（{
helper：clone，
}）;

它仅拖动Datatable的标题行，而不是主体中的数据行。

我有以下代码将行放入另一个jquery datable。

  $（＃tobedroppedtable tbody tr）droppable（{}）; 
  

我需要帮助拖放，因为上述代码不起作用。

解决方案

尝试这可能是有帮助的，但我不确定

 code> oTable //这是您用于初始化数据表的varibale。 
  

所以我将使用这个变量。

  $（oTable.fnGetNodes（））。draggable（{
 helper：clone，
}）; 
  

我认为问题是，draggable不适用于您的表的所有行。这是
为什么当您尝试拖动一个sinlge行时拖动整个表的原因。尝试看看是否适用于您。

首先，这一行：

  $（oTable.fnGetNodes（））。draggable（{
  

看起来很简单，将可拖动的功能添加到datatable的所有行中，这是一个关键，如果使用另一个选择器，可以使用#tableId tr，你会认为这样会起作用，那就是因为如果你更改数据在表中查看，即通过过滤，则可以在显示的新行上丢失可拖动功能。因此，为了将其应用于表的所有行，您必须调用数据表插件提供的函数。

Iam trying to drag a row or a group of rows from one jquery Datatable and drop it into another Datatable .

oTable = $("#dragtable").dataTable({
    "aaData": app_emp,
    "bProcessing": true,
    "bDestroy": true,
    "aoColumns": [{
        "mDataProp": "employeeId"
    }, {
        "mDataProp": "empName"
    }]
}).rowReordering();

Iam getting the json from ajax call and populating the datatable as above.The row reordering feature is working and Iam able to drag and drop the rows in the same datatable

$("#dragtable ").draggable({
    helper: "clone",
});

Above code is dragging the entire table and if I modify it as below:

$("#dragtable tbody tr ").draggable({ helper: "clone", });

Its dragging only the header row of the Datatable and not the rows of data in the body.

I have the below code for dropping the rows into another jquery datatable.

$("#tobedroppedtable tbody tr").droppable({});

I need help on dragging and dropping as the above code is not working.

解决方案

Try this may be this can help but I am not sure

oTable // this is the varibale which you have used to initialize data table.

So I will use this variable.

$("oTable.fnGetNodes()").draggable({
     helper: "clone",  
});

I think the issue is, draggable is not applied to all the rows of your table. This is the reason why the entire table is being dragged when you try to drag a sinlge row. Try and see if that works for you.

First, this line:

$(oTable.fnGetNodes()).draggable({

Looks simple enough. This line adds the draggable functionality to all rows of the datatable. This was a key. If you use another selector, something like "#tableId tr" which you would think would work, you’ll be in trouble. That’s because if you change the data that is viewed in the table, i.e. by filtering, then the draggable functionality will be lost on the new rows that are shown. So, in order to apply it to ALL rows of the table, you must call the function supplied by the datatables plugin.

这篇关于从一个jquery Datatable中拖动一行并将其放入另一个Datatable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！