时间戳

首页 > 解决方案 > Jquery - 数据表中的编辑和保存按钮以向 Nodejs 提交 POST 请求

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

问题描述

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

但是，我现在正在尝试添加一个编辑按钮，该按钮将显示一个可编辑的文本框（与 jsfiddle 链接相同）以及一个保存按钮，该按钮将触发 POST 调用以通过 Nodejs 更新我的基础 SQL 表中的数据（使用 req 。身体）。我找到了一个我试图在下面实现的解决方案（减去 Save 部分），但由于行是从 Nodejs 动态填充的，因此我无法使其与我当前的代码一起工作。

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

JSFiddle 链接 - http://jsfiddle.net/55rfa8zb/1/

从 Nodejs 动态获取 PUG 中的表值（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 下面用每个页脚单元格的文本输入替换行，但是当我使用下面的脚本时，我的数据表根本不会加载。

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();
        }
      });
    });
  });

标签： javascriptjquerynode.jsdatatablespug

解决方案

我能够实现类似于上面的 Jfiddle 链接的解决方案。下面的工作解决方案：

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();
            }
          });
        });
      });

推荐阅读