Changes for page Tree Widget

Last modified by Admin on 2024/03/29 01:15

<
From version < 21.72 >
edited by Admin
on 2019/04/13 01:23
To version < 22.1 >
edited by Marius Dumitru Florea
on 2019/04/19 11:19
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -xwiki:XWiki.Admin
1 +xwiki:XWiki.mflorea
ExtensionCode.ExtensionClass[0]
Description
... ... @@ -489,3 +489,67 @@
489 489  * [[Document Tree Macro>>Extension.Document Tree Macro]]
490 490  * Navigation Panel
491 491  * [[The WYSIWYG Editor>>platform:Features.WysiwygEditor]]
492 +
493 +== Static Tree ==
494 +
495 +Create a new page ##Test.StaticTree## with the following content:
496 +
497 +{{code language="none"}}
498 +{{velocity}}
499 +{{html}}
500 +#set ($discard = $xwiki.linkx.use($services.webjars.url('org.xwiki.platform:xwiki-platform-tree-webjar', 'tree.min.css',
501 + {'evaluate': true}), {'type': 'text/css', 'rel': 'stylesheet'}))
502 +#set ($discard = $xwiki.jsx.use('Test.StaticTree'))
503 +<div class="myCustomTree">
504 + <ul>
505 + <li><a>Group 1</a>
506 + <ul>
507 + <li><a>SubGroup 1</a></li>
508 + <ul>
509 + <li><a>Item 11</a></li>
510 + <li><a>Item 12</a></li>
511 + <li><a>Item 13</a></li>
512 + </ul>
513 + <li><a>SubGroup 2</a></li>
514 + <li><a>Item 21</a></li>
515 + <li><a>Item 22</a></li>
516 + </ul>
517 + </li>
518 + <li>
519 + <a>SubGroup 3</a>
520 + <ul>
521 + <li><a>Item 31</a></li>
522 + <li><a>Item 32</a></li>
523 + </ul>
524 + </li>
525 + <li>
526 + <a>Item 4</a>
527 + </li>
528 + </ul>
529 +</div>
530 +{{/html}}
531 +{{/velocity}}
532 +{{/code}}
533 +
534 +Then add a ##JavaScriptObject## with this content to the same page:
535 +
536 +{{code language="js"}}
537 +require(["$!services.webjars.url('org.xwiki.platform:xwiki-platform-tree-webjar', 'require-config.min.js', {'evaluate': true})"], function() {
538 + require(['tree'], function($) {
539 + $('.myCustomTree').xtree({
540 + core: {
541 + themes: {
542 + icons: false,
543 + dots: false
544 + }
545 + },
546 + plugins: ['checkbox'],
547 + checkbox: {
548 + three_state: false
549 + }
550 + });
551 + });
552 +});
553 +{{/code}}
554 +
555 +Make sure you set the "Parse content" property to Yes, then save and view the page. Check the [[jsTree documentation>>https://www.jstree.com/]] for more configuration options.
Show installed count
... ... @@ -1,0 +1,1 @@
1 +Yes

Get Connected