tree

class webix.ui.tree(data)
Arguments:
  • data (object) – A configuration object

Tree view.

Referenced by

mixins
TreeStateCheckbox().

External references

Official documentation page.

Code

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
webix.protoUI({
    name:"tree",
    defaults:{
        scroll:"a",
        navigation:true
    },
    $init:function(){
        this._viewobj.className += " webix_tree";

        //map API of DataStore on self
        webix.extend(this.data, webix.TreeStore, true);
        webix.extend(this.on_click, webix.TreeClick);
        this.attachEvent("onAfterRender", this._refresh_scroll);
        this.attachEvent("onPartialRender", this._refresh_scroll);
        this.data.provideApi(this,true);
        this._viewobj.setAttribute("role", "tree");

    },
    //attribute , which will be used for ID storing
    _id:"webix_tm_id",
    //supports custom context menu
    on_context:{},
    on_dblclick:{
        webix_tree_checkbox:function(){
            if(this.on_click.webix_tree_checkbox)
                return this.on_click.webix_tree_checkbox.apply(this,arguments);
        }
    },
    $fixEditor: function(editor) {
        var item = this.getItemNode(editor.id).querySelector("span");
        if (item){
            if (item.innerHTML === "") item.innerHTML =" ";
            var padding = 10;
            var pos = item.offsetLeft;
            editor.node.style.width = this.$view.scrollWidth - pos - padding + "px";
            editor.node.style.marginLeft = pos + "px";
            editor.node.style.left = "0px";
        }
    },
    //css class to action map, for onclick event
    on_click:{
        webix_tree_item:function(e, id, node){
            if(this._settings.activeTitle){
                var item = this.getItem(id);
                if(item.open)
                    this.close(id);
                else
                    this.open(id);
            }
            if (this._settings.select){
                if (this._settings.select=="multiselect" || this._settings.multiselect){
                    if (this._settings.multiselect == "level"){
                        //allow only selection on the same level
                        var select = this.getSelectedId(true)[0];
                        if (select && this.getParentId(id) != this.getParentId(select))
                            return;
                    }
                    this.select(id, false, (e.ctrlKey || e.metaKey || (this._settings.multiselect == "touch")), e.shiftKey);    //multiselection
                } else
                    this.select(id);
            }
        }
    },
    _paste: {
        // insert new item with pasted value
        insert: function(text) {
            var parent = this.getSelectedId() ||'0' ;
            this.add({ value: text }, null, parent);
        },
        // change value of each selected item
        modify: function(text) {
            var sel = this.getSelectedId(true);
            for (var i = 0; i < sel.length; i++) {
                this.getItem(sel[i]).value = text;
                this.refresh(sel[i]);
            }
        },
        // do nothing
        custom: function(text) {}
    },
    _drag_order_complex:true,
    $dragHTML:function(obj){
        return "<div class='borderless'>"+this.type.template(obj, this.type)+"</div>";
    },

    //css class to action map, for dblclick event
    type:webix.extend({
        //normal state of item
        template:function(obj,common){
            var template = common["template"+obj.level]||common.templateCommon;
            return template.apply(this, arguments);
        },
        classname:function(obj, common, marks){
            var css = "webix_tree_item";

            if (obj.$css){
                if (typeof obj.$css == "object")
                    obj.$css = webix.html.createCss(obj.$css);
                css += " "+obj.$css;
            }
            if (marks && marks.$css)
                css += " "+marks.$css;

            return css;
        },
        aria:function(obj, common, marks){
            return 'role="treeitem"'+(marks && marks.webix_selected?' aria-selected="true" tabindex="0"':' tabindex="-1"')+
                (obj.$count?('aria-expanded="'+(obj.open?"true":"false")+'"'):'')+'aria-level="'+obj.$level+'"';
        },
        templateCommon:webix.template("{common.icon()} {common.folder()} <span>#value#</span>"),
        templateStart:webix.template('<div webix_tm_id="#id#" class="{common.classname()}" {common.aria()}>'),
        templateEnd:webix.template("</div>"),
        templateCopy: webix.template("#value#")
    }, webix.TreeType)
}, webix.AutoTooltip, webix.Group, webix.TreeAPI, webix.DragItem, webix.TreeDataMove, webix.SelectionModel, webix.KeysNavigation, webix.MouseEvents, webix.Scrollable, webix.TreeDataLoader, webix.ui.proto, webix.TreeRenderStack, webix.CopyPaste, webix.EventSystem);