jquery - 可使用 Bootstrap 4 表和 jquery 进行 x 编辑

Question

我正在尝试使用 Bootstrap 4 表实现 xeditable ([xeditable 1 )。我试图模仿这个片段（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>

该表显示正常。在我的 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 版）

两者都不起作用。有什么我想念的吗？还是使用更好的插件？

标签： jquerybootstrap-4x-editable

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>