x-editable 与 Bootstrap 4 table 和 jquery

Question

我正在尝试实施 xeditable ([xeditable1) with a Bootstrap 4 table. I am trying to emulate this snippet (https://bbbootstrap.com/snippets/edit-forms-inline-using-x-editable-editor-11973728)，但没有成功。这是我的 index.php 文件中的内容：

 <th data-field="macAddr_id" data-sortable="true" data-filter-control="input" data-editable="true">Mac Address</th>

............................

<?php
   while($row = $result->fetch_assoc()) {  ?>
   <tr>
     <td> <a href="#" id="macAddr" data-type="text" data-pk="1" class="editable editable-click editable-empty" data-abc="true"><?php echo $row["macAddr_id"]; ?></a> </div>
   </tr>

table 显示正常。在我的 index.js 中（包含在我的 index.php 文件中），我有：

$('#macAddr').editable({
    mode: 'inline',
    type: 'text',
    name: 'macAddr',
    pk: 1
});

但是编辑不起作用。当我单击或双击时，我什么都没有。

我试过多个版本的 x-editable，包括：

https://github.com/Talv/x-editable

https://vitalets.github.io/x-editable/index.html（jquery版本）

都不行。有什么我想念的吗？或者更好用的插件？

Answer 1

由于您的 a 标签在 while 循环内，因此相同的 ID 将分配给每个 a 标签。而是将其更改为 class="macAddr" 。然后，使用每个循环迭代并初始化每个 a 标签的可编辑插件 class="macAddr" .

演示代码 :

$(function() {
  $('#table').bootstrapTable()
  $.fn.editable.defaults.mode = 'inline';
  $.fn.editableform.buttons =
    '<button type="submit" class="btn btn-primary btn-sm editable-submit">' +
    '<i class="fa fa-fw fa-check"></i>' +
    '</button>' +
    '<button type="button" class="btn btn-warning btn-sm editable-cancel">' +
    '<i class="fa fa-fw fa-times"></i>' +
    '</button>';
  //loop through each a tags
  $(".macAddr").each(function() {
    //intialize..
    $(this).editable({
      mode: 'inline',
      type: 'text',
    });
  })
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="macAddr_id" data-sortable="true" data-filter-control="input" data-editable="true">Mac Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <!--change to class-->
      <td> <a href="#" data-type="text" data-pk="1" class="editable editable-click editable-empty macAddr" data-abc="true">xyz</a></td>
    </tr>
    <tr>
      <td>2</td>
      <td> <a href="#"  data-type="text" data-pk="1" class="editable editable-click editable-empty macAddr" data-abc="true">abc</a></td>
    </tr>
  </tbody>
</table>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

x-editable 与 Bootstrap 4 table 和 jquery

x-editable with Bootstrap 4 table and jquery

jquery

x-editable

bootstrap-4