Jquery - 数据表中的编辑和保存按钮，用于向 Nodejs 提交 POST 请求

Question

我是 jquery 的新手，我正在使用数据table 根据 Get 请求从 nodejs 后端动态创建一个 table（使用 pug 模板和 jquery）。我已经能够成功从Nodejs获取数据并加载数据table.

但是，我现在正在尝试添加一个编辑按钮，它将显示一个 editable 文本框（与 jsfiddle link 相同）以及一个将触发 POST 调用以通过 Nodejs（使用 req.body）更新我的底层 SQL table 中的数据。我在下面找到了我试图实现的解决方案（减去保存部分），但我无法使其与我当前的代码一起使用，因为行是从 Nodejs 动态填充的。

我试着在网上寻找数据table 编辑器，但不幸的是我们没有足够的预算来支持这个插件。

JSFiddle link - http://jsfiddle.net/55rfa8zb/1/

从 Nodejs 动态获取 PUG 中的 table 值（res.render + 变量）

  <center><div class='well'>
  table(id='dtable' name='dtable' class='dtable')
    thead
      tr
        th= tbl_header1
        th= tbl_header2
        th= tbl_header3
        th= tbl_header4
        th= tbl_header5
        th= tbl_header6
        th= tbl_header7
        th= tbl_header8
        th= tbl_header9
        th= tbl_header10
        th= tbl_header11
        th= tbl_header12
        th= tbl_header13
        th= tbl_header14
    tbody
      each item in items
        if (typeof(item.schema_name) !== 'undefined')
          tr
            td= item.entity_id
            td= item.database_name
            td= item.schema_name
            td= item.entity_name
            td= item.entity_type
            td= item.db_user
            td= item.entity_owner
            td= item.external_table_location
            td= item.entity_description
            td= item.status
            td= item.latest_refresh_column
            td= item.dw_create_date
            td= item.dw_update_date
            td
              button(type="button", id="edit") Edit

Jquery：我还在下面 jquery 尝试用每个页脚单元格的文本输入替换行，但是当我使用下面的脚本时，我的数据 table 根本不会加载。

script.
  $(document).ready(function() {
    var mytable = $('#dtable').DataTable({orderCellsTop: true, fixedHeader: true});
    // Setup - add a text input to each footer cell
    $('#dtable thead tr').clone(true).appendTo( '#dtable thead' );
    $('#dtable thead tr:eq(1) th').each( function (i) {
      var title = $(this).text();
      $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

      $( 'input', this ).on( 'keyup change', function () {
        if ( mytable.column(i).search() !== this.value ) {
          mytable
            .column(i)
            .search( this.value )
            .draw();
        }
      });
    });
  });

Answer 1

我能够实施类似于上述 Jfiddle link 的解决方案。工作解决方案如下：

script.
      $(document).ready(function() {
        $("#dtable").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+"\">");
          });
        });
        $("#dtable").on('mousedown', "input", function(e) {
          e.stopPropagation();
        });
        $("#dtable").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);
          });
        });
        $("#dtable").on('mousedown', "#selectbasic", function(e) {
          e.stopPropagation();
        });
        $('#dtable thead tr').clone(true).appendTo( '#dtable thead' );
        var mytable = $('#dtable').DataTable({fixedHeader:true, autoWidth: true});
        $('#dtable thead tr:eq(1) th').each( function (i) {
          var title = $(this).text();
          $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

          $( 'input', this ).on( 'keyup change', function () {
            if ( mytable.column(i).search() !== this.value ) {
              mytable
                .column(i)
                .search( this.value )
                .draw();
            }
          });
        });
      });