在添加新行时刷新 html 可编辑表格 - Bootstable

Question

我使用 boostable 插件在运行时内联编辑 HTML 行。该插件位于 https://www.jqueryscript.net/table/Editable-Tables-jQuery-Bootstrap-Bootstable.html。现在的问题是，当我想动态向表中添加新行时，我无法重新初始化表或刷新以使所有行可启动（可编辑）

添加 /assets/plugins/editable/bootstable.js 后> 以下代码是我初始化表格时使用的代码

$('#tbl_deposists').SetEditable({
    columnsEd: "1",
    onEdit: function() {}, 
    onDelete: function() {}, 
    onBeforeDelete: function() {},
    onAdd: function() {} 
});

以下代码是我用来在运行时添加额外行的代码

$("#add_deposit").click(function(){
            var name = $("#deposit_name").val();
            var amount = $("#deposit_amount").val();
            var markup = "<tr><td>" + name + "</td><td class='text-right'>" + amount + "</td></tr>";
            $("#tbl_deposists tbody").append(markup);          
        });

Answer 1

我会建议这个。初始化如下所示，您可以设置按钮。这将自动添加新行。您可以在初始化时添加其他设置，例如 columnsEd，但该示例显示了如何告诉 bootstable 使用哪个按钮来添加新行。

 $('#tbl_deposists').SetEditable({ $addButton: $('#add_deposit')});

按钮可以看起来像这样

<button class="btn btn-info" id="add"><span class="glyphicon glyphicon-plus-sign"></span>Add</button>

编辑： 我尝试过这个，看起来这个有效。实际上，您可以将 html 放在最后一个 TD 中，一切都会正常，我的意思是编辑、删除等。

$("#add_deposit").click(function(){
     var name = $("#deposit_name").val();
     var amount = $("#deposit_amount").val();
     var markup = "<tr><td>" + name + "</td><td class='text-right'>" + amount + "</td><td name='buttons'><div class='btn-group pull-right'><button id='bEdit' type='button' class='btn btn-sm btn-default' onclick='rowEdit(this);'><span class='glyphicon glyphicon-pencil'> </span></button><button id='bElim' type='button' class='btn btn-sm btn-default' onclick='rowElim(this);'><span class='glyphicon glyphicon-trash'> </span></button><button id='bAcep' type='button' class='btn btn-sm btn-default' style='display:none;' onclick='rowAcep(this);'><span class='glyphicon glyphicon-ok'> </span></button><button id='bCanc' type='button' class='btn btn-sm btn-default' style='display:none;' onclick='rowCancel(this);'><span class='glyphicon glyphicon-remove'> </span></button></div></td></tr>";
$("#tbl_deposists tbody").append(markup);          
});

Answer 2

我们可以使用 bootstable 插件在行中添加下拉列表吗？