x 在引导程序 4 中可编辑？答案

【问题标题】：x-editable in bootstrap 4?x 在引导程序 4 中可编辑？
【发布时间】：2016-11-15 14:40:57
【问题描述】：

我目前正在探索 Bootstrap 4。

在 Bootstrap 3 中，我使用 x-editable 实现了内联编辑。

但是对于 Bootstrap 4，我找不到如何实现内联编辑。

有什么建议吗？

【问题讨论】：

我遇到了同样的问题。尝试与它一起使用时出现错误：bootstrap editible null not found. Have you included corresponding js file?
啊实际上，我有点工作了 - 但是提示符坏了（奇怪的造型）。我遇到的问题不包括 tether.min.js。虽然它仍然不能解决整体问题
我没有尝试过，但另一种选择可能是jinplace.org（我与它没有任何关系）

标签： twitter-bootstrap bootstrap-4 inline-editing

【解决方案1】：

这个技巧对我有用：

$.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="fa fa-fw fa-check"></i></button>' + '<button type="button" class="btn editable-cancel"><i class="fa fa-fw fa-remove"></i></button>' ;

【讨论】：

欢迎来到 Stack Overflow！虽然这段代码可能会回答这个问题，但最好包括对问题的描述，以及您的代码将如何解决给定的问题。对于未来，这里有一些信息，how to crack a awesome answer 在 Stack Overflow 上。

【解决方案2】：

引导程序 4 中的可编辑字段

我正在使用这个 .contenteditable 函数来使表格可编辑或不可编辑。

<tr>
  <td class="pt-3-half" contenteditable="false">Example</td>
  <td class="pt-3-half" contenteditable="false">Example</td>
  <td class="pt-3-half" contenteditable="false">Example</td>
  <td class="pt-3-half" contenteditable="true">Example</td>
  <td class="pt-3-half" contenteditable="true">Example</td>
  <td>
    <span class="table-remove"><button type="button" class="btn btn-danger">Remove</button></span>
  </td>
</tr>

为了使表单可编辑或不可编辑，我正在使用 .readyonly 输入字段内的函数。

<tr>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello1" autocomplete="none" readonly></td>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello2" autocomplete="none" readonly></td>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello3" autocomplete="none" readonly></td>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello4" autocomplete="none"></td>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello5" autocomplete="none"></td>
</tr>

【讨论】：