Posted By admin
editable for bootstrap 4 table

now the Xeditable (https://vitalets.github.io/x-editable/) is not support bootstrap4, this is some code for bootstrap 4.

You can see that someone has submitted PR and added support for Bootstrap v4. Here we use https://github.com/Talv/x-editable/tree/develop directly. Since it is not published to npm, we can only use the link on GitHub directly, here we use the jsdelivr tool. The files we need are in this directory bootstrap4-editable.

The files that need to be imported include:

  • 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/[email protected]/dist/bootstrap4-editable/css/bootstrap-editable.css" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/gh/Talv/[email protected]/dist/bootstrap4-editable/js/bootstrap-editable.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/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

Online example: https://live.bootstrap-table.com/code/wenzhixin/854

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *