├── .gitignore
├── LICENSE
├── Readme.md
├── bower.json
├── example.html
├── json-tree.css
├── json-tree.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .directory
3 | *.log
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | Copyright (c) 2014 Konstantin Skipor
3 |
4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software
5 | and associated documentation files (the "Software"), to deal in the Software without restriction,
6 | including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
7 | and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
8 | subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
11 |
12 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
13 | LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
14 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
15 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
16 | OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
1 | # Editable JSON tree
2 |
3 | [](https://www.npmjs.org/package/json-tree2)
4 |
5 | An AngularJS directive used for displaying and editing JSON data in a tree view. It works independently of jQuery (only internal angular's jqLite).
6 | Available operations with nodes:
7 |
8 | * `add` new nodes,
9 | * `reset` node values to null,
10 | * `remove` node completely,
11 | * `change` node value,
12 | * `convert` type of the node (to object, array, string, number, boolean, null, function) implicitly,
13 | * `drag` and `sort` tree nodes (via pressed `Ctrl`).
14 |
15 | ## How to use
16 |
17 | ### Install
18 |
19 | ##### bower
20 |
21 | $ bower install json-tree
22 |
23 | An AngularJS would be installed as a dependency automatically. If it won't, install it manually:
24 |
25 | $ bower install angular
26 |
27 | Add dependencies to the `` section of your main html:
28 | ```html
29 |
30 |
31 |
32 | ```
33 |
34 | If you don't use bower, you can manually download and unpack json-tree ([zip](https://github.com/krispo/json-tree/archive/v0.1.5.zip), [tar.gz](https://github.com/krispo/json-tree/archive/v0.1.5.tar.gz)).
35 |
36 | ##### npm
37 |
38 | $ npm install json-tree2
39 |
40 | ### Basic usage
41 |
42 | Inject `json-tree` directive into angular module and push some data to the controller:
43 | ```javascript
44 | angular.module('myApp', ['json-tree'])
45 | .controller('myCtrl', function('$scope'){
46 | $scope.jsonData = { /* JSON data */ };
47 | })
48 | ```
49 |
50 | and in html again you can use it like:
51 | ```html
52 |
53 |
54 |
55 |
56 |
57 | ```
58 |
59 | By default, it is used a **high** edit level that allows you to add new nodes,
60 | reset node values to null, completely remove node, change value and type of the node (to object, array, string, number, boolean, function, null),
61 | drag and sort tree nodes.
62 |
63 | If you want to operate only with key-values of the nodes and to avoid transformation of json tree, you can add **low** `edit-level` attribute like:
64 | ```html
65 |
66 | ```
67 |
68 | You can also customize initial depth of tree view by adding `collapsed-level` attribute like, that takes a numeric value:
69 | ```html
70 |
71 | ```
72 | If `collapsed-level` <= 0, then json-tree is fully collapsed. If `collapsed-level` == 1, then the first level node would be uncollapsed.
73 | If == 2 - the first and second level nodes. And so on.
74 |
75 | You can completely refresh directive by using directive internal refresh function. To access this function just add `node` attribute like:
76 | ```html
77 |
78 | ```
79 | and then use it in controller as:
80 | ```javascript
81 | $scope.nodeOptions.refresh();
82 | ```
83 |
84 | Drag and sort your tree nodes via pressed `Ctrl` key.
85 |
86 | Add more style to prettify the view. See complete example in `example.html` file.
87 |
88 | ### Custom template
89 |
90 | The default template can be overridden by new custom template as follows:
91 | ```js
92 | angular.module('myApp', ['json-tree'])
93 |
94 | .controller('myCtrl', ['$scope', 'jsonTreeConfig', function($scope, jsonTreeConfig){
95 | jsonTreeConfig.templateUrl = 'custom-template.html';
96 | }]);
97 | ```
98 |
99 | ---
100 | For more details of technically usage, please, watch example [online](http://krispo.github.io/json-tree) and test it.
101 | There is given a short instruction.
102 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "json-tree",
3 | "version": "0.1.5",
4 | "description": "An AngularJS directive for displaying and editing JSON tree",
5 | "main": ["json-tree.js", "json-tree.css"],
6 | "license": "MIT",
7 | "keywords": [
8 | "json",
9 | "tree",
10 | "json-tree",
11 | "angular",
12 | "directive",
13 | "nested",
14 | "sortable",
15 | "editable"
16 | ],
17 | "authors": [
18 | "Konstantin Skipor"
19 | ],
20 | "homepage": "http://krispo.github.io/json-tree",
21 | "repository": {
22 | "type": "git",
23 | "url": "https://github.com/krispo/json-tree.git"
24 | },
25 | "dependencies": {
26 | "angular": "^1.x"
27 | },
28 | "ignore": [
29 | "**/.*",
30 | "node_modules",
31 | "bower_components",
32 | "src",
33 | "test",
34 | "tests",
35 | "lib",
36 | "examples"
37 | ]
38 | }
--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | JSON Viewer
5 |
6 |
14 |
15 |
16 |
Editable JSON-tree AngularJS directive
17 |
Operations with nodes: add, reset, remove, change value and type, drag and sort
36 | --- is an input field, where you can input any JSON data. The directive automatically determine the type and reconstruct tree view.
37 |
Examples of typing:
38 | [1,2,3] --- convert to Array,
39 | {"json": "tree"} --- convert to Object,
40 | true --- convert to Boolean,
41 | 20.14 --- convert to Number,
42 | Hello World! --- convert to String,
43 | function(){} --- convert to Function
44 |
45 |
46 | « + » --- add element(s) to the collection. For example, if you add [4,"5",6] to [1,2,3] -> the result is [1,2,3,4,"5",6]. If you add [[4,"5",6]] to [1,2,3] -> the result is [1,2,3,[4,"5",6]].
47 |
48 | « ~ » --- reset node value to null.
49 |
50 | « - » --- completely remove the node.
51 |
52 | «Ctrl» --- press Ctrl key to drag and sort tree nodes.
53 |