のjQueryのDataTable編集行

Question

私が使用しています：https://datatables.net

問題1 - ユーザーは、私が必要なもの、新しい行に

を追加した後、ドラッグ＆ドロップが動作しません：からjquery.dataTables.jsを を作ります鉛筆でクリックした後に行を編集できます。このサンプルに似

： https://editor.datatables.net/examples/simple/inTableControls.html

HTML：

<table id="example" class="display" width="100%" cellspacing="0"> 
    <thead> 
    <tr> 
     <th>order</th> 
     <th>name</th> 
     <th>country</th> 
     <th>action</th> 
    </tr> 
    </thead> 
</table> 

<button id="addRow">Add New Row</button> 
<table id="newRow"> 
    <tbody> 
    <tr> 
     <td><select id="selectbasic" name="selectbasic" class="form-control"> 
      <option value="1">option 1</option> 
      <option value="2">option 2</option> 
      <option value="2">option 3</option> 
     </select> 
     </td> 
     <td>DVap 
     </td> 
     <td> 
     www</td> 
     <td><i class="fa fa-pencil-square" aria-hidden="true"></i> 
     <i class="fa fa-minus-square" aria-hidden="true"></i> </td> 
    </tr> 
    </tbody> 
</table> 

jqueryの：

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

    $(document).ready(function() { 
    var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2'; 
    var table = $('#example').DataTable({ 
     ajax: url, 
     rowReorder: { 
     dataSrc: 'order', 
     }, 
     columns: [{ 
     data: 'order' 
     }, { 
     data: 'place' 
     }, { 
     data: 'name' 
     }, { 
     data: 'delete' 
     }], 
     "initComplete": function(oSettings) { 
     $(this).on('click', "i.fa.fa-minus-square", function(e) { 
      table.row($(this).closest('tr')).remove().draw(); 
     }); 
     } 
    }); 

    // add row 
    $('#addRow').click(function() { 
     //t.row.add([1,2,3]).draw(); 
     var rowHtml = $("#newRow").find("tr")[0].outerHTML 
     console.log(rowHtml); 
     table.row.add($(rowHtml)).draw(); 
    }); 
    }); 

jsfiddle： http://jsfiddle.net/5L2qy092/5/

Answer 1

今、あなたは、ドラッグして、すべての行だけでなく、最初のTDをドロップすることができます。
また、編集は表のインライン展開です。 私はこれがあなたが望んだと信じています：WORKING DEMO。

<script> 
    $(document).ready(function() { 

     var table; 

     $("#example").on("mousedown", "td .fa.fa-minus-square", function(e) { 
     table.row($(this).closest("tr")).remove().draw(); 
     }) 

     $("#example").on('mousedown.edit', "i.fa.fa-pencil-square", function(e) { 

     $(this).removeClass().addClass("fa fa-envelope-o"); 
     var $row = $(this).closest("tr").off("mousedown"); 
     var $tds = $row.find("td").not(':first').not(':last'); 

     $.each($tds, function(i, el) { 
      var txt = $(this).text(); 
      $(this).html("").append("<input type='text' value='" + txt + "'>"); 
     }); 

     }); 

     $("#example").on('mousedown', "input", function(e) { 
     e.stopPropagation(); 
     }); 

     $("#example").on('mousedown.save', "i.fa.fa-envelope-o", function(e) { 

     $(this).removeClass().addClass("fa fa-pencil-square"); 
     var $row = $(this).closest("tr"); 
     var $tds = $row.find("td").not(':first').not(':last'); 

     $.each($tds, function(i, el) { 
      var txt = $(this).find("input").val() 
      $(this).html(txt); 
     }); 
     }); 


     $("#example").on('mousedown', "#selectbasic", function(e) { 
     e.stopPropagation(); 
     }); 


     var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2'; 
     table = $('#example').DataTable({ 
     ajax: url, 
     rowReorder: { 
      dataSrc: 'order', 
      selector: 'tr' 
     }, 
     columns: [{ 
      data: 'order' 
     }, { 
      data: 'place' 
     }, { 
      data: 'name' 
     }, { 
      data: 'delete' 
     }] 
     }); 

     // add row 
     $('#addRow').click(function() { 
     //t.row.add([1,2,3]).draw(); 
     var rowHtml = $("#newRow").find("tr")[0].outerHTML 
     console.log(rowHtml); 
     table.row.add($(rowHtml)).draw(); 
     }); 
    }); 
    </script> 

Answer 2

私はあなたにこれを実行するための簡単な方法を与えます：

<div id="dialog" title="Basic dialog"> 


</div> 
<table id="example" class="display" width="100%" cellspacing="0"> 
    <thead> 
    <tr> 
     <th>order</th> 
     <th>name</th> 
     <th>country</th> 
     <th>action</th> 
    </tr> 
    </thead> 
</table> 

<button id="addRow">Add New Row</button> 
<table id="newRow"> 
    <tbody> 
    <tr> 
     <td><select id="selectbasic" name="selectbasic" class="form-control"> 
      <option value="1">option 1</option> 
      <option value="2">option 2</option> 
      <option value="2">option 3</option> 
     </select> 
     </td> 
     <td>DVap 
     </td> 
     <td> 
     www</td> 
     <td><i class="fa fa-pencil-square" aria-hidden="true"></i> 
     <i class="fa fa-minus-square" aria-hidden="true"></i> </td> 
    </tr> 
    </tbody> 
</table> 



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

    $(document).ready(function() { 
    var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2'; 
    var table = $('#example').DataTable({ 
     ajax: url, 
     rowReorder: { 
     dataSrc: 'order', 
     }, 
     columns: [{ 
     data: 'order', 
     type: 'text' 
     }, { 
     data: 'place', 
     type: 'text', 
     edit: true 
     }, { 
     data: 'name', 
     type: 'text', 
     edit: true 
     }, { 
     data: 'delete', 
     type: 'text' 
     }], 
     "initComplete": function(oSettings) { 
     $(this).on('click', "i.fa.fa-minus-square", function(e) { 
      table.row($(this).closest('tr')).remove().draw(); 
     }); 


     $(this).on('click', 'i.fa.fa-pencil-square', function(e){ 
      var rowData = table.row($(this).closest('tr')).data(); 
      var columns = table.settings().pop().aoColumns; 
      var column = columns[table.column($(this).closest('td')).index()]; 
      var rowIndex = table.row($(this).closest('tr')).index(); 

      var html = '<form id="form">'; 
      for(var col in columns){ 
      if(columns[col].type === 'text' && columns[col].edit){ 
       html += '<input type="text" value="'+rowData[columns[col].data]+'" name="'+columns[col].data+'" placeholder="'+columns[col].data+'"/><br />'; 
      } 
      } 

      html += '<input type="hidden" name="rowIndex" id="rowIndex" value="'+rowIndex+'" />'; 
      html += '<input type="submit" id="update"/></form>'; 
      $('#dialog').html(html); 
      $("#dialog").modal(); 
     }); 

     } 
    }); 

    $('body').on('click', '#update', function(e) { 
     e.preventDefault(); 
     var data = $('#form').serializeArray(); 
     var rowIndex = $('#rowIndex').val(); 
     var rowData = table.row(rowIndex).data(); 
     var newData = {}; 

     newData['order'] = rowData['order']; 
     newData['delete'] = rowData['delete']; 

     for(var d in data){ 
     newData[data[d]['name']] = data[d]['value']; 
     } 

     table 
      .row(rowIndex) 
      .data(newData) 
      .draw(); 
    }); 
    }); 

http://jsfiddle.net/5L2qy092/7/