jqtree 1.8.2 → 1.8.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bower.json +1 -1
- package/package.json +31 -29
- package/src/dragAndDropHandler/generateHitAreas.ts +47 -43
- package/src/nodeElement/ghostDropHint.ts +3 -37
- package/src/nodeElement/index.ts +1 -1
- package/src/saveStateHandler.ts +43 -59
- package/src/version.ts +1 -1
- package/tree.jquery.debug.js +69 -106
- package/tree.jquery.debug.js.map +1 -1
- package/tree.jquery.js +2 -2
- package/tree.jquery.js.map +1 -1
- package/.editorconfig +0 -12
- package/.eslintrc +0 -48
- package/.github/workflows/ci.yml +0 -68
- package/.github/workflows/codeql-analysis.yml +0 -32
- package/.github/workflows/size.yml +0 -24
- package/.github/workflows/static.yml +0 -57
- package/.prettier +0 -3
- package/config/.postcssrc +0 -6
- package/config/babel.config.json +0 -11
- package/config/babel.coverage.config.json +0 -4
- package/config/jest.config.js +0 -24
- package/config/jest.polyfills.js +0 -14
- package/config/playwright.config.js +0 -18
- package/config/production +0 -6
- package/config/rollup.config.mjs +0 -71
- package/css/jqtree.postcss +0 -193
- package/devserver/devserver.js +0 -7
- package/devserver/devserver_scroll.js +0 -8
- package/devserver/index.html +0 -22
- package/devserver/test_index.html +0 -22
- package/devserver/test_scroll.html +0 -28
- package/devserver/test_scroll_container.html +0 -39
- package/docs/.ruby-version +0 -1
- package/docs/Gemfile +0 -5
- package/docs/Gemfile.lock +0 -82
- package/docs/_config.yml +0 -126
- package/docs/_entries/events/index.md +0 -6
- package/docs/_entries/events/tree-click.md +0 -37
- package/docs/_entries/events/tree-close.md +0 -15
- package/docs/_entries/events/tree-contextmenu.md +0 -21
- package/docs/_entries/events/tree-dblclick.md +0 -19
- package/docs/_entries/events/tree-init.md +0 -15
- package/docs/_entries/events/tree-load-data.md +0 -15
- package/docs/_entries/events/tree-loading-data.md +0 -27
- package/docs/_entries/events/tree-move.md +0 -73
- package/docs/_entries/events/tree-open.md +0 -15
- package/docs/_entries/events/tree-refresh.md +0 -12
- package/docs/_entries/events/tree-select.md +0 -28
- package/docs/_entries/functions/addnodeafter.md +0 -20
- package/docs/_entries/functions/addnodebefore.md +0 -8
- package/docs/_entries/functions/addparentnode.md +0 -20
- package/docs/_entries/functions/appendnode.md +0 -50
- package/docs/_entries/functions/closenode.md +0 -23
- package/docs/_entries/functions/destroy.md +0 -12
- package/docs/_entries/functions/getnodebycallback.md +0 -24
- package/docs/_entries/functions/getnodebyhtmlelement.md +0 -29
- package/docs/_entries/functions/getnodebyid.md +0 -21
- package/docs/_entries/functions/getselectednode.md +0 -10
- package/docs/_entries/functions/getstate.md +0 -19
- package/docs/_entries/functions/gettree.md +0 -12
- package/docs/_entries/functions/index.md +0 -6
- package/docs/_entries/functions/is-node-selected.md +0 -11
- package/docs/_entries/functions/isdragging.md +0 -12
- package/docs/_entries/functions/loaddata.md +0 -46
- package/docs/_entries/functions/loaddatafromurl.md +0 -55
- package/docs/_entries/functions/movedown.md +0 -8
- package/docs/_entries/functions/movenode.md +0 -15
- package/docs/_entries/functions/moveup.md +0 -8
- package/docs/_entries/functions/opennode.md +0 -44
- package/docs/_entries/functions/prependnode.md +0 -21
- package/docs/_entries/functions/refresh.md +0 -12
- package/docs/_entries/functions/reload.md +0 -22
- package/docs/_entries/functions/removenode.md +0 -12
- package/docs/_entries/functions/scrolltonode.md +0 -13
- package/docs/_entries/functions/selectnode.md +0 -45
- package/docs/_entries/functions/setoption.md +0 -12
- package/docs/_entries/functions/setstate.md +0 -8
- package/docs/_entries/functions/toggle.md +0 -25
- package/docs/_entries/functions/tojson.md +0 -13
- package/docs/_entries/functions/updatenode.md +0 -50
- package/docs/_entries/general/changelog.md +0 -434
- package/docs/_entries/general/demo.html +0 -28
- package/docs/_entries/general/downloads.md +0 -9
- package/docs/_entries/general/examples.md +0 -8
- package/docs/_entries/general/features.md +0 -15
- package/docs/_entries/general/index.md +0 -7
- package/docs/_entries/general/introduction.md +0 -9
- package/docs/_entries/general/requirements.md +0 -6
- package/docs/_entries/general/tutorial.md +0 -71
- package/docs/_entries/general/usecases.md +0 -15
- package/docs/_entries/multiple_selection/add-to-selection.md +0 -21
- package/docs/_entries/multiple_selection/get-selected-nodes.md +0 -10
- package/docs/_entries/multiple_selection/index.md +0 -9
- package/docs/_entries/multiple_selection/remove-from-selection.md +0 -11
- package/docs/_entries/node/children.md +0 -12
- package/docs/_entries/node/getdata.md +0 -17
- package/docs/_entries/node/getlevel.md +0 -13
- package/docs/_entries/node/getnextnode.md +0 -12
- package/docs/_entries/node/getnextsibling.md +0 -10
- package/docs/_entries/node/getnextvisiblenode.md +0 -15
- package/docs/_entries/node/getpreviousnode.md +0 -12
- package/docs/_entries/node/getprevioussibling.md +0 -10
- package/docs/_entries/node/getpreviousvisiblenode.md +0 -15
- package/docs/_entries/node/index.md +0 -13
- package/docs/_entries/node/parent.md +0 -10
- package/docs/_entries/options/animationspeed.md +0 -7
- package/docs/_entries/options/autoescape.md +0 -6
- package/docs/_entries/options/autoopen.md +0 -28
- package/docs/_entries/options/buttonleft.md +0 -12
- package/docs/_entries/options/closedicon.md +0 -26
- package/docs/_entries/options/data-url.md +0 -45
- package/docs/_entries/options/data.md +0 -46
- package/docs/_entries/options/datafilter.md +0 -17
- package/docs/_entries/options/draganddrop.md +0 -18
- package/docs/_entries/options/index.md +0 -6
- package/docs/_entries/options/keyboardsupport.md +0 -14
- package/docs/_entries/options/oncanmove.md +0 -22
- package/docs/_entries/options/oncanmoveto.md +0 -22
- package/docs/_entries/options/oncanselectnode.md +0 -26
- package/docs/_entries/options/oncreateli.md +0 -22
- package/docs/_entries/options/ondragmove.md +0 -20
- package/docs/_entries/options/ondragstop.md +0 -20
- package/docs/_entries/options/onismovehandle.md +0 -17
- package/docs/_entries/options/onloadfailed.md +0 -15
- package/docs/_entries/options/onloading.md +0 -22
- package/docs/_entries/options/openedicon.md +0 -26
- package/docs/_entries/options/openfolderdelay.md +0 -15
- package/docs/_entries/options/rtl.md +0 -18
- package/docs/_entries/options/savestate.md +0 -39
- package/docs/_entries/options/selectable.md +0 -18
- package/docs/_entries/options/showemptyfolder.md +0 -26
- package/docs/_entries/options/slide.md +0 -12
- package/docs/_entries/options/start_dnd_delay.md +0 -13
- package/docs/_entries/options/tabindex.md +0 -14
- package/docs/_entries/options/usecontextmenu.md +0 -14
- package/docs/_examples/01_load_json_data.html +0 -45
- package/docs/_examples/02_load_json_data_from_server.html +0 -29
- package/docs/_examples/03_drag_and_drop.html +0 -42
- package/docs/_examples/04_save_state.html +0 -46
- package/docs/_examples/05_load_on_demand.html +0 -68
- package/docs/_examples/06_autoescape.html +0 -45
- package/docs/_examples/07_autoscroll.html +0 -42
- package/docs/_examples/08_multiple_select.html +0 -60
- package/docs/_examples/09_custom_html.html +0 -61
- package/docs/_examples/10_icon_buttons.html +0 -26
- package/docs/_examples/11_right-to-left.html +0 -25
- package/docs/_examples/12_button_on_right.html +0 -26
- package/docs/_examples/13_drag_outside.html +0 -48
- package/docs/_examples/14_filter.html +0 -111
- package/docs/_layouts/example.html +0 -7
- package/docs/_layouts/page.html +0 -26
- package/docs/documentation.css +0 -3
- package/docs/index.html +0 -65
- package/docs/package.json +0 -22
- package/docs/pnpm-lock.yaml +0 -892
- package/docs/postcss.config.js +0 -7
- package/docs/static/bower.json +0 -8
- package/docs/static/bower_components/fontawesome/css/all.min.css +0 -9
- package/docs/static/bower_components/fontawesome/webfonts/fa-brands-400.ttf +0 -0
- package/docs/static/bower_components/fontawesome/webfonts/fa-brands-400.woff2 +0 -0
- package/docs/static/bower_components/fontawesome/webfonts/fa-regular-400.ttf +0 -0
- package/docs/static/bower_components/fontawesome/webfonts/fa-regular-400.woff2 +0 -0
- package/docs/static/bower_components/fontawesome/webfonts/fa-solid-900.ttf +0 -0
- package/docs/static/bower_components/fontawesome/webfonts/fa-solid-900.woff2 +0 -0
- package/docs/static/bower_components/fontawesome/webfonts/fa-v4compatibility.ttf +0 -0
- package/docs/static/bower_components/fontawesome/webfonts/fa-v4compatibility.woff2 +0 -0
- package/docs/static/bower_components/jquery/dist/jquery.js +0 -10704
- package/docs/static/bower_components/jquery/dist/jquery.min.js +0 -2
- package/docs/static/bower_components/jquery-mockjax/dist/jquery.mockjax.js +0 -1061
- package/docs/static/documentation.js +0 -26
- package/docs/static/example.postcss +0 -68
- package/docs/static/example_data.js +0 -122
- package/docs/static/examples/autoescape.js +0 -17
- package/docs/static/examples/autoscroll.js +0 -6
- package/docs/static/examples/button-on-right.js +0 -13
- package/docs/static/examples/custom_html.js +0 -27
- package/docs/static/examples/drag-outside.js +0 -37
- package/docs/static/examples/drag_and_drop.js +0 -13
- package/docs/static/examples/filter.js +0 -63
- package/docs/static/examples/icon_buttons.js +0 -12
- package/docs/static/examples/load_json_data.js +0 -16
- package/docs/static/examples/load_json_data_from_server.js +0 -9
- package/docs/static/examples/load_on_demand.js +0 -19
- package/docs/static/examples/multiple_select.js +0 -23
- package/docs/static/examples/right-to-left.js +0 -11
- package/docs/static/examples/save_state.js +0 -11
- package/docs/static/monokai.css +0 -70
- package/docs/static/spinner.gif +0 -0
- package/docs/tailwind.config.js +0 -16
- package/sitemap.txt +0 -14
- package/src/playwright/.eslintrc +0 -5
- package/src/playwright/coverage.ts +0 -38
- package/src/playwright/playwright.test.ts +0 -401
- package/src/playwright/playwright.test.ts-snapshots/with-dragAndDrop-moves-a-node-1-Chromium-darwin.png +0 -0
- package/src/playwright/playwright.test.ts-snapshots/with-dragAndDrop-moves-a-node-1-Chromium-linux.png +0 -0
- package/src/playwright/playwright.test.ts-snapshots/without-dragAndDrop-displays-a-tree-1-Chromium-darwin.png +0 -0
- package/src/playwright/playwright.test.ts-snapshots/without-dragAndDrop-displays-a-tree-1-Chromium-linux.png +0 -0
- package/src/playwright/playwright.test.ts-snapshots/without-dragAndDrop-selects-a-node-1-Chromium-darwin.png +0 -0
- package/src/playwright/playwright.test.ts-snapshots/without-dragAndDrop-selects-a-node-1-Chromium-linux.png +0 -0
- package/src/playwright/testUtils.ts +0 -153
- package/src/test/.eslintrc +0 -17
- package/src/test/global.d.ts +0 -1
- package/src/test/jqTree/accessibility.test.ts +0 -25
- package/src/test/jqTree/create.test.ts +0 -54
- package/src/test/jqTree/events.test.ts +0 -290
- package/src/test/jqTree/keyboard.test.ts +0 -247
- package/src/test/jqTree/loadOnDemand.test.ts +0 -198
- package/src/test/jqTree/methods.test.ts +0 -1491
- package/src/test/jqTree/mouse.test.ts +0 -82
- package/src/test/jqTree/options.test.ts +0 -595
- package/src/test/node.test.ts +0 -1396
- package/src/test/nodeUtils.test.ts +0 -21
- package/src/test/position.test.ts +0 -30
- package/src/test/support/exampleData.ts +0 -23
- package/src/test/support/jqTreeMatchers.ts +0 -68
- package/src/test/support/matchers.d.ts +0 -31
- package/src/test/support/setupTests.ts +0 -5
- package/src/test/support/testUtil.ts +0 -30
- package/src/test/support/treeStructure.ts +0 -39
- package/src/test/util.test.ts +0 -27
- package/tsconfig.json +0 -24
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: closeNode
|
|
3
|
-
name: functions-closenode
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function closeNode(node);**
|
|
7
|
-
|
|
8
|
-
**function closeNode(node, slide);**
|
|
9
|
-
|
|
10
|
-
Close this node. The node must have child nodes.
|
|
11
|
-
|
|
12
|
-
Parameter **slide**: close the node using a slide animation (default is true).
|
|
13
|
-
|
|
14
|
-
{% highlight js %}
|
|
15
|
-
var node = $tree.tree('getNodeById', 123);
|
|
16
|
-
$tree.tree('closeNode', node);
|
|
17
|
-
{% endhighlight %}
|
|
18
|
-
|
|
19
|
-
To close the node without the slide animation, call with **slide** parameter is false.
|
|
20
|
-
|
|
21
|
-
{% highlight js %}
|
|
22
|
-
$tree.tree('closeNode', node, false);
|
|
23
|
-
{% endhighlight %}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: getNodeByCallback
|
|
3
|
-
name: functions-getnodebycallback
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function getNodeByCallback(callback);**
|
|
7
|
-
|
|
8
|
-
Get a tree node using a callback. The callback should return true if the node is found.
|
|
9
|
-
|
|
10
|
-
{% highlight js %}
|
|
11
|
-
var node = $('#tree1').tree(
|
|
12
|
-
'getNodeByCallback',
|
|
13
|
-
function(node) {
|
|
14
|
-
if (node.name == 'abc') {
|
|
15
|
-
// Node is found; return true
|
|
16
|
-
return true;
|
|
17
|
-
}
|
|
18
|
-
else {
|
|
19
|
-
// Node not found; continue searching
|
|
20
|
-
return false;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
);
|
|
24
|
-
{% endhighlight %}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: getNodeByHtmlElement
|
|
3
|
-
name: functions-getnodebyhtmlelement
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function getNodeByHtmlElement(htmlElement);**
|
|
7
|
-
|
|
8
|
-
Get a tree node by an html element. The html htmlElement should be:
|
|
9
|
-
|
|
10
|
-
* The `li` element for the node
|
|
11
|
-
* Or, an element inside the `li`. For example the `span` for the title.
|
|
12
|
-
|
|
13
|
-
{% highlight js %}
|
|
14
|
-
var element = document.querySelector('#tree1 .jqtree-title');
|
|
15
|
-
|
|
16
|
-
var node = $('#tree1').tree('getNodeByHtmlElement', element);
|
|
17
|
-
|
|
18
|
-
console.log(node);
|
|
19
|
-
{% endhighlight %}
|
|
20
|
-
|
|
21
|
-
The element can also be a jquery element:
|
|
22
|
-
|
|
23
|
-
{% highlight js %}
|
|
24
|
-
var $element = $('#tree1 .jqtree-title');
|
|
25
|
-
|
|
26
|
-
var node = $('#tree1').tree('getNodeByHtmlElement', $element);
|
|
27
|
-
|
|
28
|
-
console.log(node);
|
|
29
|
-
{% endhighlight %}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: getNodeById
|
|
3
|
-
name: functions-getnodebyid
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function getNodeById(id);**
|
|
7
|
-
|
|
8
|
-
Get a tree node by node-id. This assumes that you have given the nodes in the data a unique id.
|
|
9
|
-
|
|
10
|
-
{% highlight js %}
|
|
11
|
-
var $tree = $('#tree1');
|
|
12
|
-
var data = [
|
|
13
|
-
{ id: 10, name: 'n1' },
|
|
14
|
-
{ id: 11, name: 'n2' }
|
|
15
|
-
];
|
|
16
|
-
|
|
17
|
-
$tree.tree({
|
|
18
|
-
data: data
|
|
19
|
-
});
|
|
20
|
-
var node = $tree.tree('getNodeById', 10);
|
|
21
|
-
{% endhighlight %}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: getState
|
|
3
|
-
name: functions-getstate
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Get the state of tree: which nodes are open and which one is selected?
|
|
7
|
-
|
|
8
|
-
Returns a javascript object that contains the ids of open nodes and selected nodes:
|
|
9
|
-
|
|
10
|
-
{% highlight js %}
|
|
11
|
-
{
|
|
12
|
-
open_nodes: [1, 2, 3],
|
|
13
|
-
selected_node: [4, 5, 6]
|
|
14
|
-
}
|
|
15
|
-
{% endhighlight %}
|
|
16
|
-
|
|
17
|
-
If you want to use this function, then your tree data should include an **id** property for each node.
|
|
18
|
-
|
|
19
|
-
You can use this function in combination with [setState](#functions-setstate) to save and restore the tree state.
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: isNodeSelected
|
|
3
|
-
name: multiple-selection-is-node-selected
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Return if this node is selected.
|
|
7
|
-
|
|
8
|
-
{% highlight js %}
|
|
9
|
-
var node = $('#tree1').tree('getNodeById', 123);
|
|
10
|
-
var isSelected = $('#tree1').tree('isNodeSelected', node);
|
|
11
|
-
{% endhighlight %}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: isDragging
|
|
3
|
-
name: functions-isdragging
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function isDragging();**
|
|
7
|
-
|
|
8
|
-
Is currently a node being dragged for drag-and-drop? Returns `True` or `False`.
|
|
9
|
-
|
|
10
|
-
{% highlight js %}
|
|
11
|
-
const isDragging = $('#tree1').tree('isDragging');
|
|
12
|
-
{% endhighlight %}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: loadData
|
|
3
|
-
name: functions-loaddata
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function loadData(data);**
|
|
7
|
-
|
|
8
|
-
**function loadData(data, parentNode);**
|
|
9
|
-
|
|
10
|
-
Load data in the tree. The data is array of nodes.
|
|
11
|
-
|
|
12
|
-
You can **replace the whole tree** or you can **load a subtree**.
|
|
13
|
-
|
|
14
|
-
{% highlight js %}
|
|
15
|
-
// Assuming the tree exists
|
|
16
|
-
var newData = [
|
|
17
|
-
{
|
|
18
|
-
name: 'node1',
|
|
19
|
-
children: [
|
|
20
|
-
{ name: 'child1' },
|
|
21
|
-
{ name: 'child2' }
|
|
22
|
-
]
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
name: 'node2',
|
|
26
|
-
children: [
|
|
27
|
-
{ name: 'child3' }
|
|
28
|
-
]
|
|
29
|
-
}
|
|
30
|
-
];
|
|
31
|
-
$('#tree1').tree('loadData', newData);
|
|
32
|
-
{% endhighlight %}
|
|
33
|
-
|
|
34
|
-
Load a subtree:
|
|
35
|
-
|
|
36
|
-
{% highlight js %}
|
|
37
|
-
// Get node by id (this assumes that the nodes have an id)
|
|
38
|
-
var node = $('#tree1').tree('getNodeById', 100);
|
|
39
|
-
|
|
40
|
-
// Add new nodes
|
|
41
|
-
var data = [
|
|
42
|
-
{ name: 'new node' },
|
|
43
|
-
{ name: 'another new node' }
|
|
44
|
-
];
|
|
45
|
-
$('#tree1').tree('loadData', data, node);
|
|
46
|
-
{% endhighlight %}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: loadDataFromUrl
|
|
3
|
-
name: functions-loaddatafromurl
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function loadDataFromUrl(url);**
|
|
7
|
-
|
|
8
|
-
**function loadDataFromUrl(url, parentNode);**
|
|
9
|
-
|
|
10
|
-
**function loadDataFromUrl(parentNode);**
|
|
11
|
-
|
|
12
|
-
Load data in the tree from an url using ajax. You can **replace the whole tree** or you can **load a subtree**.
|
|
13
|
-
|
|
14
|
-
{% highlight js %}
|
|
15
|
-
$('#tree1').tree('loadDataFromUrl', '/category/tree/');
|
|
16
|
-
{% endhighlight %}
|
|
17
|
-
|
|
18
|
-
Load a subtree:
|
|
19
|
-
|
|
20
|
-
{% highlight js %}
|
|
21
|
-
var node = $('#tree1').tree('getNodeById', 123);
|
|
22
|
-
$('#tree1').tree('loadDataFromUrl', '/category/tree/123', node);
|
|
23
|
-
{% endhighlight %}
|
|
24
|
-
|
|
25
|
-
You can also omit the url. In this case jqTree will generate a url for you. This is very useful if you use the load-on-demand feature:
|
|
26
|
-
|
|
27
|
-
{% highlight js %}
|
|
28
|
-
var $tree = $('#tree1');
|
|
29
|
-
|
|
30
|
-
$tree.tree({
|
|
31
|
-
dataUrl: '/my_data/'
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
var node = $tree.tree('getNodeById', 456);
|
|
35
|
-
|
|
36
|
-
// jqTree will load data from /my_data/?node=456
|
|
37
|
-
$tree.tree('loadDataFromUrl', node);
|
|
38
|
-
{% endhighlight %}
|
|
39
|
-
|
|
40
|
-
You can also add an **on_finished** callback parameter that will be called when the data is loaded:
|
|
41
|
-
|
|
42
|
-
**function loadDataFromUrl(url, parentNode, onFinished);**
|
|
43
|
-
|
|
44
|
-
**function loadDataFromUrl(parentNode, onFinished);**
|
|
45
|
-
|
|
46
|
-
{% highlight js %}
|
|
47
|
-
$('#tree1').tree(
|
|
48
|
-
'loadDataFromUrl',
|
|
49
|
-
'/category/tree/123',
|
|
50
|
-
null,
|
|
51
|
-
function() {
|
|
52
|
-
alert('data is loaded');
|
|
53
|
-
}
|
|
54
|
-
);
|
|
55
|
-
{% endhighlight %}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: moveNode
|
|
3
|
-
name: functions-movenode
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function moveNode(node, targetNode, position);**
|
|
7
|
-
|
|
8
|
-
Move a node. Position can be 'before', 'after' or 'inside'.
|
|
9
|
-
|
|
10
|
-
{% highlight js %}
|
|
11
|
-
var node = $tree.tree('getNodeById', 1);
|
|
12
|
-
var targetNode = $tree.tree('getNodeById', 2);
|
|
13
|
-
|
|
14
|
-
$tree.tree('moveNode', node, targetNode, 'after');
|
|
15
|
-
{% endhighlight %}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: openNode
|
|
3
|
-
name: functions-opennode
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function openNode(node);**
|
|
7
|
-
|
|
8
|
-
**function openNode(node, slide);**
|
|
9
|
-
|
|
10
|
-
**function openNode(node, onFinished);**
|
|
11
|
-
|
|
12
|
-
**function openNode(node, slide, onFinished);**
|
|
13
|
-
|
|
14
|
-
Open this node. The node must have child nodes.
|
|
15
|
-
|
|
16
|
-
Parameter **slide (optional)**: open the node using a slide animation (default is true).
|
|
17
|
-
Parameter **onFinished (optional)**: callback when the node is opened; this also works for nodes that are loaded lazily
|
|
18
|
-
|
|
19
|
-
{% highlight js %}
|
|
20
|
-
// create tree
|
|
21
|
-
var $tree = $('#tree1');
|
|
22
|
-
$tree.tree({
|
|
23
|
-
data: data
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
var node = $tree.tree('getNodeById', 123);
|
|
27
|
-
$tree.tree('openNode', node);
|
|
28
|
-
{% endhighlight %}
|
|
29
|
-
|
|
30
|
-
To open the node without the slide animation, call with **slide** parameter is false.
|
|
31
|
-
|
|
32
|
-
{% highlight js %}
|
|
33
|
-
$tree.tree('openNode', node, false);
|
|
34
|
-
{% endhighlight %}
|
|
35
|
-
|
|
36
|
-
Example with `on_finished` callback:
|
|
37
|
-
|
|
38
|
-
{% highlight js %}
|
|
39
|
-
function handleOpened(node) {
|
|
40
|
-
console.log('openende node', node.name);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
$tree.tree('openNode', node, handleOpened);
|
|
44
|
-
{% endhighlight %}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: prependNode
|
|
3
|
-
name: functions-prependnode
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function prependNode(newNodeInfo, parentNode);**
|
|
7
|
-
|
|
8
|
-
Add a node to this parent node as the first child. If **parentNode** is empty, then the new node becomes a root node.
|
|
9
|
-
|
|
10
|
-
{% highlight js %}
|
|
11
|
-
var parentNode = $tree.tree('getNodeById', 123);
|
|
12
|
-
|
|
13
|
-
$tree.tree(
|
|
14
|
-
'prependNode',
|
|
15
|
-
{
|
|
16
|
-
name: 'new_node',
|
|
17
|
-
id: 456
|
|
18
|
-
},
|
|
19
|
-
parentNode
|
|
20
|
-
);
|
|
21
|
-
{% endhighlight %}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: refresh
|
|
3
|
-
name: functions-refresh
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function refresh();**
|
|
7
|
-
|
|
8
|
-
Refresh the rendered nodes. In most cases you will not use this, because tree functions will rerender automatically. E.g. The functions `openNode` and `updateNode` rerender automatically.
|
|
9
|
-
|
|
10
|
-
{% highlight js %}
|
|
11
|
-
$('#tree1').tree('refresh');
|
|
12
|
-
{% endhighlight %}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: reload
|
|
3
|
-
name: functions-reload
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function reload();**
|
|
7
|
-
|
|
8
|
-
**function reload(onFinished);**
|
|
9
|
-
|
|
10
|
-
Reload data from the server.
|
|
11
|
-
|
|
12
|
-
* Call `onFinished` when the data is loaded.
|
|
13
|
-
|
|
14
|
-
{% highlight js %}
|
|
15
|
-
$('#tree1').tree('reload');
|
|
16
|
-
{% endhighlight %}
|
|
17
|
-
|
|
18
|
-
{% highlight js %}
|
|
19
|
-
$('#tree1').tree('reload', function() {
|
|
20
|
-
console.log('data is loaded');
|
|
21
|
-
});
|
|
22
|
-
{% endhighlight %}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: scrollToNode
|
|
3
|
-
name: functions-scrolltonode
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function scrollToNode(node);**
|
|
7
|
-
|
|
8
|
-
Scroll to this node. This is useful if the tree is in a container div and is scrollable.
|
|
9
|
-
|
|
10
|
-
{% highlight js %}
|
|
11
|
-
var node = $tree.tree('getNodeById', 1);
|
|
12
|
-
$tree.tree('scrollToNode', node);
|
|
13
|
-
{% endhighlight %}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: selectNode
|
|
3
|
-
name: functions-selectnode
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function selectNode(node);**
|
|
7
|
-
|
|
8
|
-
**function selectNode(null);**
|
|
9
|
-
|
|
10
|
-
**function selectNode(node, { mustToggle, mustSetFocus });**
|
|
11
|
-
|
|
12
|
-
Select this node.
|
|
13
|
-
|
|
14
|
-
You can deselect the current node by calling **selectNode(null)**.
|
|
15
|
-
|
|
16
|
-
{% highlight js %}
|
|
17
|
-
// create tree
|
|
18
|
-
const $tree = $('#tree1');
|
|
19
|
-
$tree.tree({
|
|
20
|
-
data: data,
|
|
21
|
-
selectable: true
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
const node = $tree.tree('getNodeById', 123);
|
|
25
|
-
$tree.tree('selectNode', node);
|
|
26
|
-
{% endhighlight %}
|
|
27
|
-
|
|
28
|
-
**Options**
|
|
29
|
-
|
|
30
|
-
* **mustSetFocus**:
|
|
31
|
-
* **true (default)**: set the focus to the node; only do this on selection, not deselection
|
|
32
|
-
* **false**: do not set the focus
|
|
33
|
-
* **mustToggle**:
|
|
34
|
-
* **true (default)**: toggle; deselected if selected and vice versa
|
|
35
|
-
* **false**: select the node, never deselect
|
|
36
|
-
|
|
37
|
-
{% highlight js %}
|
|
38
|
-
const node = $tree.tree('getNodeById', 123);
|
|
39
|
-
$tree.tree('selectNode', { mustSetFocus: false });
|
|
40
|
-
{% endhighlight %}
|
|
41
|
-
|
|
42
|
-
{% highlight js %}
|
|
43
|
-
const node = $tree.tree('getNodeById', 123);
|
|
44
|
-
$tree.tree('selectNode', { mustToggle: false });
|
|
45
|
-
{% endhighlight %}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: setOption
|
|
3
|
-
name: functions-setoption
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function setOption(option, value);**
|
|
7
|
-
|
|
8
|
-
Set a tree option. These are the same options that you can set when creating the tree.
|
|
9
|
-
|
|
10
|
-
{% highlight js %}
|
|
11
|
-
$('#tree1').tree('setOption', 'keyboardSupport', false);
|
|
12
|
-
{% endhighlight %}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: toggle
|
|
3
|
-
name: functions-toggle
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function toggle(node);**
|
|
7
|
-
|
|
8
|
-
**function toggle(node, slide);**
|
|
9
|
-
|
|
10
|
-
* slide: true / false
|
|
11
|
-
|
|
12
|
-
Open or close the tree node.
|
|
13
|
-
|
|
14
|
-
Default: toggle with slide animation:
|
|
15
|
-
|
|
16
|
-
{% highlight js %}
|
|
17
|
-
var node = $tree.tree('getNodeById', 123);
|
|
18
|
-
$tree.tree('toggle', node);
|
|
19
|
-
{% endhighlight %}
|
|
20
|
-
|
|
21
|
-
Toggle without animation:
|
|
22
|
-
|
|
23
|
-
{% highlight js %}
|
|
24
|
-
$tree.tree('toggle', node, false);
|
|
25
|
-
{% endhighlight %}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: updateNode
|
|
3
|
-
name: functions-updatenode
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**function updateNode(node, name);**
|
|
7
|
-
|
|
8
|
-
**function updateNode(node, data);**
|
|
9
|
-
|
|
10
|
-
Update the title of a node. You can also update the data.
|
|
11
|
-
|
|
12
|
-
Update the name:
|
|
13
|
-
|
|
14
|
-
{% highlight js %}
|
|
15
|
-
var node = $tree.tree('getNodeById', 123);
|
|
16
|
-
|
|
17
|
-
$tree.tree('updateNode', node, 'new name');
|
|
18
|
-
{% endhighlight %}
|
|
19
|
-
|
|
20
|
-
Update the data (including the name)
|
|
21
|
-
|
|
22
|
-
{% highlight js %}
|
|
23
|
-
var node = $tree.tree('getNodeById', 123);
|
|
24
|
-
|
|
25
|
-
$tree.tree(
|
|
26
|
-
'updateNode',
|
|
27
|
-
node,
|
|
28
|
-
{
|
|
29
|
-
name: 'new name',
|
|
30
|
-
id: 1,
|
|
31
|
-
otherProperty: 'abc'
|
|
32
|
-
}
|
|
33
|
-
);
|
|
34
|
-
{% endhighlight %}
|
|
35
|
-
|
|
36
|
-
It is also possible to update the children. Note that this removes the existing children:
|
|
37
|
-
|
|
38
|
-
{% highlight js %}
|
|
39
|
-
$tree.tree(
|
|
40
|
-
'updateNode',
|
|
41
|
-
node,
|
|
42
|
-
{
|
|
43
|
-
name: 'new name',
|
|
44
|
-
id: 1,
|
|
45
|
-
children: [
|
|
46
|
-
{ name: 'child1', id: 2 }
|
|
47
|
-
]
|
|
48
|
-
}
|
|
49
|
-
);
|
|
50
|
-
{% endhighlight %}
|