There is a user-case for me: after user collect some pages via [Add to cart] button, it need to display in the page with a tree way.
If a page/node is checked, which are shown in bold to identify and deep down in the tree, please see it like below:
[img]tree.png[/img]
But finally user could change which page is checked, collect page/node info againg.
Anyone have experience on it? Please help give your comments on it.
Thanks a lot.
Solved! Go to Solution.
Views
Replies
Total Likes
See:
http://helpx.adobe.com/experience-manager/using/creating-custom-cq-tree.html
Another option you have to is build you own using this JQuery plug-in:
http://code.google.com/p/dynatree/
It takes JSON. So on the backend - get the data you want to display, encode the data to JSON and pass back to the front end component where it's displayed in this component that uses this JQuery plug-in.
Views
Replies
Total Likes
See:
http://helpx.adobe.com/experience-manager/using/creating-custom-cq-tree.html
Another option you have to is build you own using this JQuery plug-in:
http://code.google.com/p/dynatree/
It takes JSON. So on the backend - get the data you want to display, encode the data to JSON and pass back to the front end component where it's displayed in this component that uses this JQuery plug-in.
Views
Replies
Total Likes
Many thanks for your reply. Today i am writing a sample according to the http://code.google.com/p/dynatree/
But always can't display the tree data at all. I don't know the reason, please see below screenshot:
And i suspect AEM if support this JQuery plugin? Could you give any suggestions? Thanks again.
[img]1.png[/img]
<%@include file="/libs/foundation/global.jsp"%> <cq:includeClientLib categories="test" /> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Dynatree - Example</title> <script type="text/javascript"> $(document).ready(function() { $("#tree").dynatree({ // using default options }); <!-- (Irrelevant source removed.) --> }); </script> </head> <body class="example"> <h1>Example: Default</h1> <p class="description"> This tree uses default options.<br> It is initalized from a hidden <ul> element on this page. </p> <div> Skin: <select id="skinCombo" size="1"> <option value="skin">Standard ('/skin/')</option> <option value="skin-vista">Vista ('/skin-vista/')</option> </select> </div> <div id="tree"> <ul id="treeData" style="display: none;"> <li id="id1" title="Look, a tool tip!">item1 with key and tooltip <li id="id2">item2 <li id="id3" class="folder">Folder with some children <ul> <li id="id3.1">Sub-item 3.1 <ul> <li id="id3.1.1">Sub-item 3.1.1 <li id="id3.1.2">Sub-item 3.1.2 </ul> <li id="id3.2">Sub-item 3.2 <ul> <li id="id3.2.1">Sub-item 3.2.1 <li id="id3.2.2">Sub-item 3.2.2 </ul> </ul> <li id="id4" class="expanded">Document with some children (expanded on init) <ul> <li id="id4.1" class="active focused">Sub-item 4.1 (active and focus on init) <ul> <li id="id4.1.1">Sub-item 4.1.1 <li id="id4.1.2">Sub-item 4.1.2 </ul> <li id="id4.2">Sub-item 4.2 <ul> <li id="id4.2.1">Sub-item 4.2.1 <li id="id4.2.2">Sub-item 4.2.2 </ul> </ul> </ul> </div> <!-- (Irrelevant source removed.) --> </body> </html>
[img]111.png[/img]
Views
Replies
Total Likes
To get AEM to support a JQuery plug-in, you have to include the PLUG-IN files in a client library. See:
http://helpx.adobe.com/experience-manager/using/integrating-jquery-framework-cq.html
With this plug-in, there is example data. Try to hook in the sample JSON data into the component before setting it via a service.
Views
Replies
Total Likes
And i check the source find a list of file JS as screenshot, i am not sure maybe the both file have conflict between jquery-1.11.0.js and jquery.js but, i don't know the reason why the file jquery-1.11.0.js imported here since clientLibs dependencies is cq.jquery.
[img]treejs.png[/img]
Views
Replies
Total Likes
hi scott, i did it follow the example but, always the tree can't see at all as beginning description. I look into it and resarch it through Internet but no any result. I think this problem not complicated and it makes me very confused for now. Could you possibly help see it again? Thanks a lot.
Views
Replies
Total Likes
And i check the source find a list of file JS as screenshot, i am not sure maybe the both file have conflict between jquery-1.11.0.js and jquery.js but, i don't know the reason why the file jquery-1.11.0.js imported here since clientLibs dependencies is cq.jquery.
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies