Interactive tree
One of the table component modes that allows you to navigate through a large hierarchical tree.
Configuring the Tree
To output data, you need to configure the table as follows.
1. SELECT 1 to return to the table of the following form:
declare @result TABLE (id int, parentID int, name nvarchar(256), data nvarchar(max))
data - additional object data passed as a JSON line (quotation marks are required for parameters). If not used, pass an empty line.
parentID - reference to the element's parent. This field is used to build the hierarchy of elements (on the browser side).
2. In SELECT 3 specify ViewMode='dynamicTree' and plugin settings.
select 'dynamicTree' ViewType,
'{ 'levelDistance': 100, 'setCurrentAsRoot': false, 'orientation': 'top',
'contHeight':'400px',
'itemFormCode': 'tst-dynTreeItem',
'itemFormContainer': '.itemFormDetails'
}' dynamicTreeOptions
both the system settings of the jit plugin and additional settings are passed to dynamicTreeOptions:
- setCurrentAsRoot - if true, when the element is clicked, the chart will be transformed (the root element becomes the currently selected one).
- orientation - left, right, top, bottom - 'where' will the tree grow.
- contHeight - you can set the height of the container. By default, the container has a height of 500px (with a width of 100%).
- itemFormCode, itemFormContaiter - if these parameters are set, then when you click on the element, in the container with the selector itemFormContaiter будет добавляться форма с кодом itemFormCode, которой в качестве data-itemID будет передаваться id текущего элемента.
By default, the plugin's system settings (which you can replace with your own in dynamicTreeOptions) look like this:
var defaultOptions = {
//id of viz container element
injectInto: contID,
//set duration for the animation
duration: 800,
//SET THE TREE TO VERTICAL
orientation: 'left',
//set animation transition type
transition: $jit.Trans.Quart.easeInOut,
//set distance between node and its children
levelDistance: 50,
//enable panning
Navigation: {
enable: true,
panning: true
},
//set node and edge styles
//set overridable=true for styling individual
//nodes or edges
Node: {
height: 25,
width: 60,
type: 'rectangle',
color: '#aaa',
overridable: true
},
Edge: {
type: 'bezier',
overridable: true
},
onBeforeCompute: function (node) {
as.vis.log('loading ' + node.name);
},
onAfterCompute: function () {
as.vis.log('done');
},
//This method is called on DOM label creation.
//Use this method to add event handlers and styles to
//your node.
onCreateLabel: function (label, node) {
label.id = node.id;
label.innerHTML = node.name;
label.onclick = function () {
if (options.setCurrentAsRoot) {
st.setRoot(node.id, 'animate');
} else {
st.onClick(node.id);
}
if (options.itemFormCode && options.itemFormContainer) {
var cont = $(options.itemFormContainer);
if (cont.length) {
var s = '';
cont.html(s);
as.initControls(cont);
}
}
};
//set label styles
var style = label.style;
style.width = 60 + 'px';
style.height = 17 + 'px';
style.cursor = 'pointer';
style.color = '#333';
style.fontSize = '0.8em';
style.textAlign = 'center';
style.paddingTop = '3px';
},
//This method is called right before plotting
//a node. It's useful for changing an individual node
//style properties before plotting it.
//The data properties prefixed with a dollar
//sign will override the global node style properties.
onBeforePlotNode: function (node) {
//add some color to the nodes in the path between the
//root node and the selected node.
if (node.selected) {
node.data.$color = '#ff7';
}
else {
delete node.data.$color;
//if the node belongs to the last plotted level
if (!node.anySubnode('exist')) {
//count children number
var count = 0;
node.eachSubnode(function (n) { count++; });
//assign a node color based on
//how many children it has
node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];
}
}
},
//This method is called right before plotting
//an edge. It's useful for changing an individual edge
//style properties before plotting it.
//Edge data proprties prefixed with a dollar sign will
//override the Edge global style properties.
onBeforePlotLine: function (adj) {
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data.$color = '#eed';
adj.data.$lineWidth = 3;
}
else {
delete adj.data.$color;
delete adj.data.$lineWidth;
}
}
};
Questions about the Tree
How can I add an element?
Through a separate form, after which to make a refreshContainer with our tree.
How can I delete an element?
You can implement an additional button in itemForm to delete this element and then update the tree via refreshContainer.
- Management
- Falcon Space Foundation
- Basic components
- Falcon Space Features
- Коммуникация с пользователем
- Дизайн, стилизация
- Integrations
- Каталоги
- Навигация
- Документы
- Additional component Falcon Space. Working with indicators Falcon Space. Panel-hints Falcon Space. The counters component Falcon Space. Business processes Falcon Space. Working with the catalog, shopping cart, and orders Working with HTML blocks Falcon Space. Working with trees (hierarchy) Universal likes, dislikes, ratings, voting for products Interactive tree Gantt Chart The Kanban Board Chartbar diagram Map with markers Cards Progress line Timeline Uploaded files Data output in the form of a graph on the site Output of the request movement by statusbar statuses
- Продвижение, SEO
- Системные моменты
- HOWTO
- HOWTO Tables
- HOWTO Forms
- Working with SQL
- HOWTO JS
- HOWTO Layout
- Solve problems
Falcon Space Platform
This is a reduction in the cost of ownership
at the expense of fewer people to support
This is a quick change
while using the program
This is a modern interface
full adaptation for mobile devices
- Falcon Space Video
- Platform features demo will allow you to understand how this or that component looks and works
- Have a question? Write to the chat at the bottom right