Table Editable: Add, Delete, Edit and Save data (JSON file)

typo3ua commented 4 years ago

Hello, everyone!

I tried to do it myself but I could not do it and so I write here and I ask you help...

I could not find the working example and so I create example myself here..., but edit function does not work (This example does not work too...), I do not know why... on my local machine it works well...

Working of example on my local PC: 2020-10-04 14_09_32-Edit

First issue: I can not reproduce this example in the online editor

Second issue: All that i add, delete or edit I can no t save in the JSON file on my local example of my the local machine

I need your help.

Thanks in advance!

typo3ua commented 4 years ago

Guys, Sorry! I was wrong with the label "docs" Please change to "help-wanted"

typo3ua commented 4 years ago

Guys I need your help... please

I can not believe that no one has a working example for my issue

djhvscf commented 4 years ago

Looks like your example is missing a import. See this error:

Uncaught TypeError: Cannot read property 'Constructor' of undefined at bootstrap-editable.js:4780 at bootstrap-editable.js:4833 bootstrap-editable.js:1000 Uncaught Error: null not found. Have you included corresponding js file? at Popup.splitOptions (bootstrap-editable.js:1000) at Popup.init (bootstrap-editable.js:924) at new Popup (bootstrap-editable.js:905) at HTMLAnchorElement. (bootstrap-editable.js:1329) at Function.each (jquery.min.js:2) at S.fn.init.each (jquery.min.js:2) at S.fn.init.$.fn.editableContainer (bootstrap-editable.js:1321) at Editable.show (bootstrap-editable.js:1800) at Editable.toggle (bootstrap-editable.js:1831) at Editable. (bootstrap-editable.js:1554)

typo3ua commented 4 years ago

Yes, it is only the online example... but in my the local example i do not have this errors

This is my local code

HTML and JS

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Edit Property</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/x-editable-bs4@1.5.4/dist/bootstrap4-editable/css/bootstrap-editable.min.css">

  </head>
  <body>

    <div id="toolbar">
        <button id="add" class="btn btn-success">Add</button>
        <button id="remove" class="btn btn-danger" disabled>Delete</button>
    </div>

     <hr>

    <table
      id="table"
      data-toggle="table"
      data-search="true"
      data-pagination="true"
      data-url="owners.json">
      <thead class="thead-re">
        <tr>
          <th data-field="state" data-checkbox="true"></th>
          <th data-field="id" data-title="ID" data-editable="true">Id</th>
          <th data-field="name" data-title="Name" data-editable="true">Name</th>
          <th data-field="price" data-title="Price" data-editable="true">Price</th>
        </tr>
      </thead>
    </table>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/x-editable-bs4@1.5.4/dist/bootstrap4-editable/js/bootstrap-editable.min.js"></script>

    <script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>

    <script src="https://unpkg.com/bootstrap-table@1.18.0/dist/extensions/editable/bootstrap-table-editable.min.js"></script>

    <script>
      var $table = $('#table');
      var $add = $('#add');
      var $remove = $('#remove');

      $(function() {

        $.fn.editable.defaults.emptytext = '-';

        $table.bootstrapTable('getData');

        $add.click(function () {
          var randomId = 100 + ~~(Math.random() * 100)
          $table.bootstrapTable('insertRow', {
            index: 1,
            row: {
              id: randomId,
              name: '',
              price: '$'
            }
          })
        });

        $table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
          $remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
        });

        $remove.click(function () {
          var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
          })
          $table.bootstrapTable('remove', {
            field: 'id',
            values: ids
          })
          $remove.prop('disabled', true)
        });

      })
    </script>
  </body>
</html>

...and JSON

[
  {
      "id": "0",
      "name": "Item 0",
      "price": "$9000"
  },
  {
      "id": "1",
      "name": "Item 1",
      "price": "$4000"
  },
  {
      "id": "2",
      "name": "Item 2",
      "price": "$5000"
  },
  {
      "id": "3",
      "name": "Item 3",
      "price": "$6000"
  },
  {
      "id": "4",
      "name": "Item 4",
      "price": "$3000"
  },
  {
      "id": "5",
      "name": "Item 5",
      "price": "$2000"
  },
  {
      "id": "6",
      "name": "Item 6",
      "price": "$1000"
  },
  {
      "id": "7",
      "name": "Item 7",
      "price": "$100"
  },
  {
      "id": "8",
      "name": "Item 8",
      "price": "$200"
  },
  {
      "id": "9",
      "name": "Item 9",
      "price": "$300"
  },
  {
      "id": "10",
      "name": "Item 10",
      "price": "$400"
  },
  {
      "id": "11",
      "name": "Item 11",
      "price": "$500"
  },
  {
      "id": "12",
      "name": "Item 12",
      "price": "$500"
  }
]

All that i add, delete or edit I can not save in the JSON file ...I do not know how is to do

djhvscf commented 4 years ago

@wenzhixin can you review why this example is not working on our online editor?

technificentConsulting commented 3 years ago

Hello, Has there been any resolution? The online example is still not working and I am in the same position, unable to find a working example. Any help or direction is appreciated.

djhvscf commented 3 years ago

@wenzhixin

Fashad-Ahmed commented 2 years ago

@typo3ua you ay refer this solution:

https://codesandbox.io/s/jp3n485v73?file=/index.js

wenzhixin / bootstrap-table

Table Editable: Add, Delete, Edit and Save data (JSON file) #5364