jQuery的數據表編輯一行

Question

我使用：從jquery.dataTables.js：https://datatables.net

問題1 - 拖放不會在用戶工作後添加一個新行

我需要什麼： 使行點擊鉛筆後可編輯。

類似於此示例： 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/