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.