Interactive tree

One of the table component modes that allows you to navigate through a large hierarchical tree. 

Demo stand of the component

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.

Falcon Space is a functional web development platform on a narrow stack MS SQL/Bootstrap. Falcon Space Gettting started
{sp-shortDemostandLinks}

SQL-tool for creating personal accounts on the site

The essence of the approach and the history of the creation of Falcon Space
Web platform for creating personal accounts

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

MS SQL web applications. Affiliate program for developers and web studios

You can develop on your own or collaborate with us on Falcon Space web development using only SQL and HTML.
See examples with SQL code
Platform documentation
Working on MS SQL Server
Note