How to sort a specific node in jstree? - javascript

I created a jstree object, the page is fully loaded. And then, I would like to sort only one folder node of this tree, then refresh it. How can i do that ? (bonus point for natural order sorting)

Related

How to reload Oracle APEX 5.0 Tree dynamically

I need to reload full tree with new parameters when an event is triggered (say a button is clicked) an item value is set and new item value need to be used in Tree SQL.
Tree nodes are not refreshing When I try to refresh tree region using "Refresh" action.
The tree widget supports a whole host of advanced operations. The problem is the apex team has never exposed these options to developers. Instead they chose to mimic the technique they used for the old tree. While that tree also supported far more than what they ever exposed...
The short of it is that with both versions the data delivered to the tree is a json-payload in the render of the page. The tree consumes this and renders the nodes. Because of the "static" nature of its data it can not be refreshed.
Long story short: sorry, the tree as generated by apex does not support refreshing. You'll need to reload the page.

Algorithm to update only the changed innerHTML of the document

I have 2 JS variables. before and after. They contains the SAME html document, but have some modification. About 1%-10% change between them. I want to update the body from before to after. The variablesbefore and after are raw string.
I can do something like that:
document.documentElement.innerHTML=after
The problem is that if I render this way it not look good. The render takes time, and there is a white screen between the renders. I want to show the user 10 modification in a second (video of modifications)
So what I want to do. I want to search and find only the elements that changed only by analyze the HTML text of before and after.
My way of solution:
I can find the changes and the position in the text using Javascript Library for diff & match & patch.
The question is:
After I find the text changes. How to find only the elements who changed. I update only those elements.
I thought, maybe to create a range, that contains every change, and update the range, but how exactly to do that?
If anything unclear, please comment, I will explain better.
I found a very good library for it: https://github.com/patrick-steele-idem/morphdom
Lightweight module for morphing an existing DOM node tree to match a
target DOM node tree. It's fast and works with the real DOM—no virtual
DOM here!
Very easy to use, and doing exactly what I need
If I have understood your question correctly, then what I would have done is,
1) Make a new object (view Object) which will control the rendering of DOM elements. (Similar to MVC)
2) In this object, I would have created 3 functions.
a) init function (contains the event-handlers)
b) render1 function (which will contain elements in before element)
c) render2 function (which will contain elements in after element)
Whenever there is an event where I need to change the HTML of a class/id/body/document, I will change that in init function and call render2 function which contains the after element.
This should not give any error, however the browser has to work to render all the page, but rendering can be divided over multiple elements of document. So, whenever you need to render a part of document, make separate render functions.
p.s. there can be different approaches.
You must implement the LCS(Longest Common Subsequence). To understand better of this algorithm you can watch this youtube video. Also It's easier to first study Longest Common Substring.
I think I have a solution. virtual-dom can do the work for me. I can create two VTree, make a diff, and apply a patch.
From the documentation of virtual-dom:
virtual-dom is what I need.
Manual DOM manipulation is messy and keeping track of the previous DOM
state is hard. A solution to this problem is to write your code as if
you were recreating the entire DOM whenever state changes. Of course,
if you actually recreated the entire DOM every time your application
state changed, your app would be very slow and your input fields would
lose focus.
virtual-dom is a collection of modules designed to provide a
declarative way of representing the DOM for your app. So instead of
updating the DOM when your application state changes, you simply
create a virtual tree or VTree, which looks like the DOM state that
you want. virtual-dom will then figure out how to make the DOM look
like this efficiently without recreating all of the DOM nodes.
virtual-dom allows you to update a view whenever state changes by
creating a full VTree of the view and then patching the DOM
efficiently to look exactly as you described it. This results in
keeping manual DOM manipulation and previous state tracking out of
your application code, promoting clean and maintainable rendering
logic for web applications.
https://github.com/Matt-Esch/virtual-dom

How to append a node with children to an existing treeview with javascript

I am using Kendo UI 2012.2.607.
I am trying to append a node that I retrieved from an ajax call to add to my kendo tree view. However, despite the node matching the same model schema, only the top node is appended to the tree.
Example Node:
id: "333-333-333"
text: "Node1"
expanded: true
hasChildren: true
children: <Node2>
Node2 is of identical format. However, when I attempt to call TreeView.append("Node1") only the top level node (Node1) is appended, but not Node2, despite the tree showing Node1 should have children. Please note that the tree has loadOnDemand=true.
Is append not supposed to add the associated children?
It might help if I explain what I am trying to do. I have a potentially large tree and therefore use onDemand loading but also server side aids to limit the number of nodes per request. I provide a special node that when clicked, makes an ajax request to get more nodes and uses insertBefore to add some more.
I now have a search method as well, which i use to get the exact path to a specific node. What I want to use is this path in order to expand and add nodes dynamically (since the current node might not be loaded into the tree).

Dynatree: how to make node containing lazy children expandable?

I have created a tree navigation menu using Dynatree (http://wwwendt.de/tech/dynatree/index.html). The tree has four levels: company, group, user and computer. Every object in the tree is selectable (seleting the object opens a page showing the properties of that object), and each object can have children except for the level 4 objects ("computer").
Now I have tried to make the tree lazy-loaded according to the instructions in the documentation: http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html#lazyLoading
The first-level content loaded from the background has the isLazy option set to true and I have added the onLazyRead callback to the tree.
What I need from the tree: the first level is always loaded but expanding the first level object with the [+] character expands the first level object and loads the underlying objects (group, user, computer) in the background. Loading the tree works in the sense that I can see the first level elements, but the problem is that
the [+] sign is not displayed when the node doesn't have any children
if the node has children, the onLazyRead event is not executed
This seems like a catch-22, as there seems to be no option to make a node expandable without it having children, making it impossible to make the tree lazy-loading. What am I missing?
If your server delivers nodes that are to be lazy loaded, you must set the node.isLazy attribute to true.

How to trigger rendering of JQuery treeview

I use jquery tree plugin to render hierarchical data.
I have coded additional functions which would allow user to interact with this data (like adding/deleting nodes, swapping nodes, etc...)
Currently this plugin supports that whenever you want to add any node, you can call following method,
$("#browser").treeview({
add: branches
});
here branches is jQuery object created with the HTML block, which would represent a particular node.
However, for delete and swapping of nodes, I use common JQuery functions like,
for delete,
$("#topnd2").remove();
for swapping,
var next = $("#topnd2").next();
$("#topnd2").insertAfter(next);
topnd2 is an id of any particular tree node.
The nodes get deleted / swapped properly but the problem is the tree does not get rendered and therefore the tree images (mainly vertical lines denoting branches) are not set properly.
For example, if I delete the last node then that node will be removed from rendered treeview but the remaining sibling node should get L as branch line image but not | .
I tried calling
$("#browser").treeview();
Please let me know your ideas.
Thanks,
Jatan
I found some workaround as given below,
Once the node is swapped up, virtually add its previous node to its child,
$("#browser").treeview({add:$("#topnd2").insertBefore(previous).next()});
If node is swapped down, virtuall add the current node to its next node.
$("#browser").treeview({add:$("#topnd2").insertAfter(next)});
currently it's working fine, will update this post, if I find any problems in this approach. Also please validate this approach if you know.
Regards,
Jatan
If you try to refresh the treeview again after node removal, the link will work but not the [+] or [-] icon. Tried this on several browsers..

Categories