javascript - Jquery Datatable如何编辑、保存和添加新行

Question

我正在尝试使表1中的行也可编辑，我也想添加一个新行。

我发现这个示例工作完美 here 。但我无法在我的样本 here in my jsfiddle 中应用

我将工作示例作为片段粘贴到下面

function addUser() {
  var $source = $("#example2").DataTable();
  var names = $($source.rows().nodes())
    .filter(':has(:checked)')
    .map(function() {
      return $(this).children().first().text();
    }).toArray();
  console.log(names);
  var $rows = $source.rows(function(i, data) {
    return names.indexOf('' + data.name) != -1;
  });
  var data = $rows.data();
  if (data.length > 0) {
    $rows.remove().draw();
    $("#example").DataTable().rows.add(data.toArray()).draw();
  }
}

function checkAll(check) {
  $('#chk').prop('checked', check == 1);
  var $source = $("#example2").DataTable();
  var names = $($source.rows().nodes())
    .find('input[type="checkbox"]')
    .each(function(i, el) {
      el.checked = check == 1;
    });
  return false;
}


function all() {
  var a = 0;
  var $source = $("#example2").DataTable();
  var names = $($source.rows().nodes())
    .find('input[type="checkbox"]')
    .each(function(i, el) {
      if (el.checked) {
        a++
      }
      console.log(a);
    });
  if (a == 5) {
    $('#chk').prop('checked', true);
  } else {
    $('#chk').prop('checked', false);
  }
}

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

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

});

$(document).ready(function() {


  $('#example2').on('click', 'input[type="checkbox"]', function() {
    all();
  });

  $('body').on('mouseenter', 'input', function() {
    $('.btn').prop('disabled', true);
  });
  $('body').on('mouseout', 'input', function() {
    $('.btn').prop('disabled', false);
  });
  $('#chk').on('change', function() {
    console.log($(this));
    if ($(this)[0].checked) {
      checkAll(1);
    } else {
      checkAll(0);
    }
  });
  $('#checkAll').click(function() {
    checkAll(1);
  });
  $('#uncheckAll').click(function() {
    checkAll(0);
  });
  $('#btnAddUser').click(function() {
    addUser();
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="//cdn.rawgit.com/DataTables/RowReorder/ce6d240e/js/dataTables.rowReorder.js"></script>
<link href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="//cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<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>Place</th>
      <th>checkbox</th>
    </tr>
  </thead>
</table>


<div class="col-md-12">
  <div class="col-md-6">
    <button type="button" class="btn btn-success" id="btnAddUser">Add a user</button>
  </div>
  <div class="col-md-6">select all or none
    <div class="btn-group">
      <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <input type="checkbox" name="vehicle1" value="Bike" id="chk">
        <i class="fa fa-caret-down" aria-hidden="true"></i>
      </div>
      <ul class="dropdown-menu" role="menu">
        <li><a id="checkAll">All</a></li>
        <li><a id="uncheckAll">None</a></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

看到我为旧问题所做的 fiddle 在新问题中扮演主 Angular ，这很有趣。

无论如何，我已经为你做了一个plunker，它可以工作。将 dataTables.rowReorder.js 文件添加到您的项目中，我对其进行了修改以支持输入编辑。

我向这个笨蛋添加了一些东西:添加行函数将迭代 TABLE2，并选择选中复选框的行，并将它们添加到 TABLE1 并从 TABLE2 中删除它们。它采用所选行的name值和默认值Some Country，您可以对其进行调试并获取表中所需的任何数据。

 $('#addRow').click(function() { 

        var rowsHtml; 
        var $newRowTemplate = $("#newRow").find("tr");

        table2.rows().every(function(rowIdx, tableLoop, rowLoop) {

          var row = this.node();
          var isChecked = $(row).find("input[type='checkbox']").prop("checked");

          if (isChecked) {
            $newRowTemplate.find("td:first").text(table.rows().count() + 1);
            $newRowTemplate.find("input[name='name']").attr("value",this.data().name);
            $newRowTemplate.find("input[name='country']").attr("value","Some Country");

            rowHtml = $newRowTemplate[0].outerHTML;  
            table.row.add($(rowHtml)).draw();

            $(row).addClass("remove");

          }

        });

        table2.rows(".remove").remove().draw();

      });

我还修复了您在“工作 fiddle ”中提供的搜索功能，该搜索不适用于新添加的行，我的可以工作，这是因为需要更新 table.cell。 data() 而不仅仅是数据表的 html，这很重要!

您可以在保存功能中看到它:

 $("#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);

          //This is where I update the cell data with the new value
          table.cell(this).data(txt);
        });

        var $firstTdSelect = $row.find("td:first");
        var selectValue = $firstTdSelect.find("select").val();
        $row.find("td:first").html(selectValue);

        //This is where I update the cell data with the new value            
        table.cell($firstTdSelect).data(selectValue);

      });

您在问题中询问添加新行、编辑行，我添加了更多内容，不要提示“全部保存”和“取消”按钮不存在，因为您无法向用户询问在这里为您完成所有工作，请使用这个已经包含“全部保存”按钮所需的所有代码的插件，并尝试自己解决它，如果您无法成功发布新问题。

看看这个 Working Plunk 。