在 Bootstrap v4 中使用 Bootstrap Table 的 editable 插件

频道：技术栈 日期： 浏览：19

由于 x-editable 很久没有更新，所以不支持 Bootstrap v4，但是很多人问要怎么在 Bootstrap Table 的 v4 中使用 editable 这个插件，这里对其进行尝试。

可以看到已经有人提交了 PR，增加了对 Bootstrap v4 的支持，这里我们直接使用 https://github.com/Talv/x-editable/tree/develop 这个库。因为没有发布到 npm 上，所以我们只能直接使用 GitHub 上的链接，这里使用了 jsdelivr 这个工具，我们需要的文件在这个目录 bootstrap4-editable 下。

需要引入的文件包括：

  • bootstrap4-editable/css/bootstrap-editable.css

  • bootstrap4-editable/js/bootstrap-editable.min.js

  • extensions/editable/bootstrap-table-editable.min.js


<link href="https://cdn.jsdelivr.net/gh/Talv/x-editable@develop/dist/bootstrap4-editable/css/bootstrap-editable.css" rel="stylesheet"> 
<link href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css" rel="stylesheet"> 
<script src="https://cdn.jsdelivr.net/gh/Talv/x-editable@develop/dist/bootstrap4-editable/js/bootstrap-editable.min.js"></script> 
<script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script> 
<script src="https://unpkg.com/bootstrap-table@1.15.4/dist/extensions/editable/bootstrap-table-editable.min.js"></script> 
<table id="table"   
   data-pagination="true"   
   data-show-export="true"  
   data-url="json/data1.json">   
 <thead>     
 <tr>       
   <th data-field="id">ID</th>       
   <th data-field="name" data-editable="true">Item Name</th>       
   <th data-field="price" data-editable="true">Item Price</th>     
   </tr>   
   </thead> 
   </table> 
   <script>   
   $(function() {     
   $('#table').bootstrapTable()   
   }) 
   </script>


分享到：
关键词：Bootstrap v4editable