Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ This project is based on jQuery-Sortable-lists (v1.4.0) http://camohub.github.io
* jQuery >= 3.x
* Fontawesome 5.3.1
* Bootstrap Iconpicker 1.10.0
* jQuery-Sortable-lists 1.4.0 (with mobile support)

## How to use
### Include the Css and scripts
Expand All @@ -32,6 +33,7 @@ This project is based on jQuery-Sortable-lists (v1.4.0) http://camohub.github.io
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="bootstrap-iconpicker/js/iconset/fontawesome5-3-1.min.js"></script>
<script type="text/javascript" src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>
<script type="text/javascript" src="jquery-sortable-lists-mobile-1.4.0.js"></script>
<script type="text/javascript" src="jquery-menu-editor.min.js"></script>
```

Expand Down Expand Up @@ -113,12 +115,22 @@ $('#btnAdd').click(function(){
### Load data from a Json
We have the method setData:
```javascript
var arrayjson = [{"href":"http://home.com","icon":"fas fa-home","text":"Home", "target": "_top", "title": "My Home"},{"icon":"fas fa-chart-bar","text":"Opcion2"},{"icon":"fas fa-bell","text":"Opcion3"},{"icon":"fas fa-crop","text":"Opcion4"},{"icon":"fas fa-flask","text":"Opcion5"},{"icon":"fas fa-map-marker","text":"Opcion6"},{"icon":"fas fa-search","text":"Opcion7","children":[{"icon":"fas fa-plug","text":"Opcion7-1","children":[{"icon":"fas fa-filter","text":"Opcion7-1-1"}]}]}];
var arrayJson = [{"href":"http://home.com","icon":"fas fa-home","text":"Home", "target": "_top", "title": "My Home"},{"icon":"fas fa-chart-bar","text":"Opcion2"},{"icon":"fas fa-bell","text":"Opcion3"},{"icon":"fas fa-crop","text":"Opcion4"},{"icon":"fas fa-flask","text":"Opcion5"},{"icon":"fas fa-map-marker","text":"Opcion6"},{"icon":"fas fa-search","text":"Opcion7","children":[{"icon":"fas fa-plug","text":"Opcion7-1","children":[{"icon":"fas fa-filter","text":"Opcion7-1-1"}]}]}];
editor.setData(arrayJson);
```
### Output
We have the function getString
Functions getJson and getJsonString. They return a Json representation of the data, respectivelly as an Json object and as a string
```javascript
var str = editor.getString();
$("#myTextarea").text(str);
var arrayJson = editor.getJson();
console.log(arrayJson);
var string = editor.arrayJsonString();
console.log(string);
```
Functions getArray and getArrayString. They return a flattened Json representation of the data, respectivelly as an Json object and as a string
```javascript
var array = editor.getArray();
console.log(arrayJson);
var string = editor.getArrayString();
console.log(string);
```
Please note it might not be possible to reconstruct the tree from getArray or getArrayString unless every item originally had an unique id property
Loading