如何将行 ID 传递给函数 onclick 按钮、引导表

Question

我正在使用 bootstrap 4 并尝试使用删除/编辑按钮构建引导表。我使用 ajax 将数据加载到表中。我的问题是，当我单击删除或编辑按钮时，它不会通过行 id(row.id) 来运行。我用警报测试它并显示“未定义”。我以前用于另一个引导表的相同代码，它工作正常。我在这里看不到任何错误，但它不起作用。期待您的帮助。

HTML：

<table class="table table-striped table-hover" id="expenseTable"      
       data-search="true"
       data-pagination="true">
     <thead class="table-light">
         <tr>
            <th scope="col" data-feild="id" data-sortable="true">Id</th>
            <th scope="col" data-feild="user" data-sortable="true">User</th>
            <th scope="col" data-feild="category" data-sortable="true">Category</th>
            <th scope="col" data-feild="source" data-sortable="true">Source</th>
            <th scope="col" data-feild="description" data-sortable="true">Description</th>
            <th scope="col" data-feild="amount" data-sortable="true">Amount</th>
            <th scope="col" data-feild="date" data-sortable="true">Date</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="expenseTblBdy">
                                                
    </tbody>
</table>

JavaScript：

$(document).ready(function() {

    load();

    function loadExpenseData(data){
         $(function() {
             $('#expenseTable').bootstrapTable({
                  data: data,
                  columns: [ {},{},{},{},{},{},{},  
                  {
                    field: 'operate',
                    title: 'Action',
                    align: 'center',
                    valign: 'middle',
                    clickToSelect: false,
                    formatter : function(value,row,index) {
    
                         return '<button class=\'btn btn-primary btn-sm btnExp-up\' pageName="'+row.id+'" pageDetails="'+row.user+'">Update</button> <button class=\'btn btn-danger btn-sm btnExp-del\' pageName="'+row.id+'">Dalete</button>';
                          }
                        }
                      ]              
                });
    
    
                $(".btnExp-up").click(function(e){
                    
                    var expId = $(this).attr('pageName');
                    alert(expId);
    
                    //modifyExp(expId);
                    // $("#mdlOutsideUpdate").modal("show");
    
                     e.stopPropagation();
                });
    
                $(".btnExp-del").click(function(e){
                    
                    var expId = $(this).attr('pageName');
    
                    removeExp(expId);
                    e.stopPropagation();
                    
                });
    
            });
        }

});

load 函数的作用是使用 ajax 将数据加载到表中，它工作正常。

Answer 1

尝试将pageName 和pageDetails 转换为data-* 属性。返回函数看起来像

return 
`
   <button class="btn btn-primary btn-sm btnExp-up" data-pageName="${row.id}" data-pageDetails="${row.user}> 
     Update
   </button>
   <button class="btn btn-danger btn-sm btnExp-del" data-pageName="${row.id}">
     Delete
   </button>
`;

然后在按钮单击事件中，您可以访问数据值，例如

var expId = $(this).data('pageName');

注意：我没有尝试过，但我希望它有效。