Jquery Datatable如何编辑，保存和添加新行

时间：2017-03-17 09:14:59

标签： javascript jquery datatables

我正在尝试从表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>

2 个答案:

答案 0 :(得分：2)


看到我为旧问题所做的小提琴正在主演新问题，这很有趣。

无论如何，我为你做了一个傻瓜，它正在工作。 将dataTables.rowReorder.js文件带到您的项目，我修改它以支持输入编辑。

我添加到这个plunker的东西很少： 添加行函数将遍历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();

      });

我还修复了您在＆＃34;工作小提琴＆＃34;中提供的搜索功能，搜索没有为新添加的行，我的工作和它工作，因为有一个需要更新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);

      });

您在问题中询问是否要添加新行，编辑行，还添加了一些内容，不要抱怨＆＃34;全部保存＆＃34;和＆＃34;取消＆＃34;按钮不在那里，因为你不能要求这里的用户为你做所有的工作，拿这个已经包含你需要的所有代码的那个＆＃34;全部保存＆＃34;如果你没有成功发布一个新问题，请按下并尝试通过自己解决。

请查看 Working Plunk 。

答案 1 :(得分：1)

我使用datatables和jquery创建了一个完全可编辑的表（添加，编辑，删除）。它位于http://jsbin.com/yafuvah/edit?html,css,js,output，如果你想玩它。我有一个使用复选框的版本，但此版本使用选择行扩展设置为单行。

   var dataObject = null;

    $(document).ready(function () {
        var table = $('#example').DataTable({
            buttons: [{
              text: "Edit", className :"editButton",
                extend: "selectedSingle",
                action: function (e, dt, bt, config) { editRow(e, dt, bt, config); }
            }, {
                text: "Save",
                extend: "selectedSingle",
                action: function (e, dt, bt, config) { saveRow(e, dt, bt, config); }
            }, {
                text: "Add",
                action: function (e, dt, bt, config) { addRow(e, dt, bt, config); }
            }, {
                text: "Delete",
                extend: "selectedSingle",
                action: function (e, dt, bt, config) { removeRow(e, dt, bt, config); }
            }],
            dom: "Btp",
            select: "single"
        });

        var dataObject = table.rows().data();

        // keep the rows from deselection when you click on a textbox
        // this means you have to click between textboxes to change edit rows when more than one is onpen
        $("#example").on("click", "input", function (e) { e.stopPropagation(); return false; });

        table.on('user-select', function (e, dt, type, cell, originalEvent) {
            if ($('#example input').length > 0) {
                e.preventDefault();
                return false;
            }
        });
    });

    // Adds a new row in edit mode
    function addRow(e, dt, bt, config) {
        if ($('#example input').length > 0) {
            // only one row is allowed to be in edit mode at a time
            return false;
        }
        var $nr = dt.row.add(["", "", "", "", "", ""]).draw(false).nodes().to$();
      $nr.addClass("newRow");
        dt.rows($nr).select();
        $nr.children("td").each(function (i, it) {
            $(it).append("<input type='text'>");
        });
      $(".editButton span").text("Cancel");
      // Puts 
      dt.page("first").draw();
    }

     function removeRow(e, dt, bt, config){
          var r = dt.rows(".selected").nodes()[0];
       var n = $("td:first", r).text();
       if(!confirm("You are about to remove " + n)){return;}
        dt.rows(".selected").remove().draw();
     }

    // Save the selected row (assuming its in edit mode)
    function saveRow(e, dt, bt, config) {
        var r = dt.rows(".selected").nodes()[0];

        // if row is not edit mode, just return.
        if ($("input", r).length === 0) { return; }


        var d = dt.rows(".selected").data()[0];
        var containsText = false;
        $(r).children("td").each(function (i, it) {
            var di = $("input", it).val();
            if (di.length > 0) { containsText = true; }
            $(it).html(di);
            d[i] = di;
        });
        if (!containsText) {
            alert("This row contains no data and will be removed");
            dt.rows(".selected").remove().draw();
        }
      $(".editButton span").text("Edit");
    }

    // Puts a row in edit mode
    function editRow(e, dt, bt, config) {
       var r = dt.rows(".selected").nodes()[0];
     if(  $("span", bt[0]).text() == "Cancel"){

       if($(r).hasClass("newRow")){
          dt.rows(".selected").remove().draw();
       }
       else {
       $(r).children("td").each(function (i, it) {
            var od = dt.cells(it).data();
            $(it).html(od[0]);
        });
       } 

       $("span", bt[0]).text("Edit");
       return;
     }

        // if row already in edit mode, just return.
        if ($("input", r).length > 0) { return; }

        $(r).children("td").each(function (i, it) {
            var h = $("<input type='text'>");
            h.val(it.innerText);
            $(it).html(h);
        });
      $("span", bt[0]).text("Cancel");
    }
相关问题
最新问题