bootstrap-table
bootstrap-table copied to clipboard
wenzhixin
Table Editable: Add, Delete, Edit and Save data (JSON file)
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:
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!
Guys, Sorry! I was wrong with the label "docs" Please change to "help-wanted"
Guys I need your help... please
I can not believe that no one has a working example for my issue
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.
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/[email protected]/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[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>
<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
@wenzhixin can you review why this example is not working on our online editor?
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.
@typo3ua you ay refer this solution:
https://codesandbox.io/s/jp3n485v73?file=/index.js
