Holger Knublauch

Tree selection working

This diff is collapsed. Click to expand it.
......@@ -339,6 +339,73 @@ function appReloadForm(resourceURI, queryGraphURI, linkElementId) {
/**
* Selects a given node in a given tree.
* Will expand if necessary, using a server-side shortest path algorithm.
* @param treeId the id of the tree
* @param nodeURI the URI of the resource to select
*/
function appSelectTreeNode(treeId, nodeURI) {
// TODO: Currently this only works on the Tree that was created last
// but not if multiple trees are on a page
var tree = $('#' + treeId);
var dataProviderURI = tree.attr('treedataprovider');
if(!dataProviderURI) {
alert('Error: Element with id ' + treeId + ' does not have treedataprovider attribute');
return;
}
var rootURI = tree.attr('treeroot');
// Do nothing if it's already selected
var sel = tree.jstree('get_selected');
if(sel) {
if(sel.attr('resource') == nodeURI) {
return;
}
}
// Load path to root from the server and then call helper function
var data = {
_format: 'json',
_viewClass: 'app:TreeShortestPathCallback',
dataProvider: '<' + dataProviderURI + '>',
node: '<' + nodeURI + '>'
};
if(rootURI) {
data.root = '<' + rootURI + '>';
}
$.get(uispinServlet, data, function(path) {
appSelectTreeNodeHelper(tree, tree, path, 0);
});
}
// Private helper function - walks an array, expanding nodes along the way
function appSelectTreeNodeHelper(tree, node, path, index) {
var next = path[index];
node.children("ul").children("li").each(function(i, o) {
var child = $(o);
if(child.attr('resource') == next) {
if(index == path.length - 1) {
// End reached: select this node
tree.jstree('select_node', child, true);
child[0].scrollIntoView();
}
else {
tree.jstree('open_node', child, function() {
appSelectTreeNodeHelper(tree, child, path, index + 1);
});
}
}
});
}
/**
* Submits a form and switches it to viewing mode when done.
* @param form the id of the form
* @param servlet the optional name of the servlet
......
......@@ -5,8 +5,7 @@
ui:view="{= ?dataProvider }"
arg:root="{= ?root }">
<!-- The div that will be turned into a jsTree below -->
<div id="{= ?id }" />
<div id="{= ?id }" treedataprovider="{= ?dataProvider }" treeroot="{= ?root }"/>
<script type="text/javascript">
$(function () {
......@@ -15,12 +14,7 @@
"plugins" : [
"themes",
"json_data",
"ui",
"crrm",
"cookies",
"search",
"types",
"hotkeys" ],
"ui" ],
"json_data" : {
"ajax" : {
......@@ -40,6 +34,10 @@
"themes" : {
"theme" : "classic"
},
"ui": {
"select_limit": 1
}
});
});
......