Jqueryデータテーブル1つのテーブルから別のテーブルに行をドラッグアンドドロップする

Question

jquery.dataTables.jsを使用していますが、このサンプルのようにテーブル2からテーブル1に行をドラッグしたりドロップしたりしようとしています：http://jsfiddle.net/yf47u/

上記のサンプルはjsonと同じだったので、私はjsonサンプルで同じ作業をしたいと思います。

これは私のjsfiddleです：http://jsfiddle.net/f7debwj2/12/

HTML：

<br> 
<br> 
<h1> 
table1 
</h1><br> 
<br> 
<table id="example" class="display" width="100%" cellspacing="0"> 
    <thead> 
    <tr> 
     <th>First name</th> 
     <th>Place</th> 
     <th>Order</th> 
    </tr> 
    </thead> 
</table> 

<br> 
<br> 
<h1> 
table 2 
</h1><br> 
<br> 
<table id="example2" class="display" width="100%" cellspacing="0"> 
    <thead> 
    <tr> 
     <th>First name</th> 
     <th>Place</th> 
     <th>checkbox</th> 
    </tr> 
    </thead> 
</table> 

jqueryの：

$(document).ready(function() { 
    var dt = $('#example').dataTable(); 
    dt.fnDestroy(); 
}); 

$(document).ready(function() { 
    var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2'; 
    var table = $('#example').DataTable({ 
    ajax: url, 
    createdRow: function(row, data, dataIndex) { 
     $(row).attr('id', 'row-' + dataIndex); 
    }, 
    rowReorder: { 
     dataSrc: 'order', 
    }, 
    columns: [{ 
     data: 'order' 
    }, { 
     data: 'name' 
    }, { 
     data: 'place' 
    }] 
    }); 
    table.rowReordering(); 

}); 


$(document).ready(function() { 
    var dt = $('#example2').dataTable(); 
    dt.fnDestroy(); 
}); 

$(document).ready(function() { 
    var url = 'http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2'; 
    var table = $('#example2').DataTable({ 
    ajax: url, 
    createdRow: function(row, data, dataIndex) { 
     $(row).attr('id', 'row-' + dataIndex); 
    }, 
    rowReorder: { 
     dataSrc: 'order', 
    }, 
    columns: [{ 
     data: 'order' 
    }, { 
     data: 'name' 
    }, { 
     data: 'checkbox' 
    }] 
    }); 
    table.rowReordering(); 

}); 

$(document).ready(function() { 
    $('body').on('mouseenter', 'input', function() { 
    $('.btn').prop('disabled', true); 
    }); 
    $('body').on('mouseout', 'input', function() { 
    $('.btn').prop('disabled', false); 
    }); 
}); 

Answer 1

ここでは、あなたのコードに基づいて、この問題に対する私の解決策です。 1つのテーブルから別のテーブルに行をドラッグ・アンド・ドロップすることは可能ですが、FirstName列の値を動的に変更する必要があります。そうしないと、同一のFirstNameを持つ2つの行が等しいと見なされるため、それらの同じ行の一般的に、テーブルにはそのような場合に固有のキーが必要です。

はJavaScript：

var rowCache; 

    $(document).ready(function() { 
     var dt = $('#example').dataTable(); 
     dt.fnDestroy(); 
    });  

    $(document).ready(function() { 
     var dt = $('#example2').dataTable(); 
     dt.fnDestroy(); 
    }); 

    $(document).ready(function() { 
     rowCache = []; 

     var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2'; 
     var table = $('#example').DataTable({ 
      ajax: url, 
      createdRow: function(row, data, dataIndex) { 
       $(row).attr('id', 'row-' + dataIndex); 
      }, 
      rowReorder: { 
       dataSrc: 'order', 
      }, 
      columns: [{ 
       data: 'order' 
      }, { 
       data: 'name' 
      }, { 
       data: 'place' 
      }] 
     }); 

     table.rowReordering(); 

     table.on('mousedown', 'tbody tr', function() { 
      var $row = $(this); 
      var r = table.rows(function (i, data) { 
       return data.order == $row.children().first().text(); 
      }); 

      if (r[0].length > 1) 
       r = r.rows(r[0][0]);  

      rowCache.push({ selector: 'example', row: r }); 
     }); 

     table.on('mouseup', mouseUp); 
    }); 

    $(document).ready(function() { 
     var url = 'http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2'; 
     var table = $('#example2').DataTable({ 
     ajax: url, 
     createdRow: function(row, data, dataIndex) { 
      $(row).attr('id', 'row-' + dataIndex); 
     }, 
     rowReorder: { 
      dataSrc: 'order', 
     }, 
     columns: [{ 
      data: 'order' 
     }, { 
      data: 'name' 
     }, { 
      data: 'checkbox' 
     }] 
     }); 
     table.rowReordering(); 

     table.on('mousedown', 'tbody tr', function() { 
      var $row = $(this); 
      var r = table.rows(function (i, data) { 
       return data.order == $row.children().first().text(); 
      }); 

      if (r[0].length > 1) 
       r = r.rows(r[0][0]);  

      rowCache.push({ selector: 'example2', row: r }); 
     }); 

     table.on('mouseup', mouseUp); 
    }); 

    function mouseUp(event) 
    { 
     var id = $(document.elementsFromPoint(event.clientX, event.clientY)) 
      .filter('table') 
      .attr('id'); 

     if (id && event.currentTarget.id != id) 
     { 
      rowCache.every(function (el, i) { 
       if (el.selector != id) 
       {     
        var data = el.row.data(); 

        if (data.length > 0) { 

         if (!data[0].checkbox) 
          data[0].checkbox = "<input type='checkbox' />" 

         el.row.remove().draw(); 
         var $target = $("#" + id).DataTable(); 

         if ($target.rows()[0].length > 0) 
         { 
          var rowsArray = $target.rows().data().toArray(); 
          data[0].order = rowsArray[rowsArray.length - 1].order + 1; 
         } 
         else 
          data[0].order = 1; 

         $target.rows.add(data.toArray()).draw(); 
        } 
       }} 
      ); 
     } 

     rowCache = []; 
    } 

    $(document).ready(function() { 
     $('body').on('mouseenter', 'input', function() { 
      $('.btn').prop('disabled', true); 
     }); 
     $('body').on('mouseout', 'input', function() { 
      $('.btn').prop('disabled', false); 
     }); 
    }); 

JSFiddle：http://jsfiddle.net/jahn08/f7debwj2/34/