SelectionModel

class webix.SelectionModel()

Selectionmodel mixin

Referenced by

views
dataview(), list(), tree().

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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
webix.SelectionModel={
    $init:function(){
        //collection of selected IDs
        this._selected = webix.toArray();
        webix.assert(this.data, "SelectionModel :: Component doesn't have DataStore");

        //remove selection from deleted items
        this.data.attachEvent("onStoreUpdated",webix.bind(this._data_updated,this));
        this.data.attachEvent("onStoreLoad", webix.bind(this._data_loaded,this));
        this.data.attachEvent("onAfterFilter", webix.bind(this._data_filtered,this));
        this.data.attachEvent("onIdChange", webix.bind(this._id_changed,this));
        this.$ready.push(this._set_noselect);
    },
    _set_noselect: function(){
        if (this._settings.select=="multiselect" || this._settings.multiselect)
            webix._event(this.$view,"mousedown", function(e){
                var shiftKey = (e||event).shiftKey;
                if(shiftKey){
                    webix._noselect_element = this;
                    webix.html.addCss(this,"webix_noselect",1);
                }
            });
    },
    _id_changed:function(oldid, newid){
        for (var i = this._selected.length - 1; i >= 0; i--)
            if (this._selected[i]==oldid)
                this._selected[i]=newid;
    },
    _data_filtered:function(){
        for (var i = this._selected.length - 1; i >= 0; i--){
            if (this.data.getIndexById(this._selected[i]) < 0) {
                var id = this._selected[i];
                this.removeCss(id, "webix_selected", true);
                this._selected.splice(i,1);
                this.callEvent("onSelectChange",[id]);
            }
        }
    },
    //helper - linked to onStoreUpdated
    _data_updated:function(id,obj,type){
        if (type == "delete"){                //remove selection from deleted items
            if (this.loadBranch){
                //hierarchy, need to check all
                for (var i = this._selected.length - 1; i >= 0; i--)
                    if (!this.exists(this._selected[i]))
                        this._selected.splice(i,1);
            } else
                this._selected.remove(id);
        }
        else if (!id && !this.data.count() && !this.data._filter_order){    //remove selection for clearAll
            this._selected = webix.toArray();
        }
    },
    _data_loaded:function(){
        if (this._settings.select)
            this.data.each(function(obj){
                if (obj && obj.$selected) this.select(obj.id);
            }, this);
    },
    //helper - changes state of selection for some item
    _select_mark:function(id,state,refresh,need_unselect){
        var name = state ? "onBeforeSelect" : "onBeforeUnSelect";
        if (!this.callEvent(name,[id,state])) return false;

        if (need_unselect){
            this._silent_selection = true;
            this.unselectAll();
            this._silent_selection = false;
        }

        if (state)
            this.addCss(id, "webix_selected", true);
        else
            this.removeCss(id, "webix_selected", true);

        if (refresh)
            refresh.push(id);                //if we in the mass-select mode - collect all changed IDs
        else{
            if (state)
                this._selected.push(id);        //then add to list of selected items
            else
                this._selected.remove(id);
            this._refresh_selection(id);    //othervise trigger repainting
        }

        var name = state ? "onAfterSelect" : "onAfterUnSelect";
        this.callEvent(name,[id]);

        return true;
    },
    //select some item
    select:function(id,preserve){
        var ctrlKey = arguments[2];
        var shiftKey = arguments[3];
        //if id not provide - works as selectAll
        if (!id) return this.selectAll();

        //allow an array of ids as parameter
        if (webix.isArray(id)){
            for (var i=0; i < id.length; i++)
                this.select(id[i], (i?1:preserve), ctrlKey, shiftKey);
            return;
        }

        webix.assert(this.data.exists(id), "Incorrect id in select command: "+id);

        //block selection mode
        if (shiftKey && this._selected.length)
            return this.selectAll(this._selected[this._selected.length-1],id);

        //single selection mode
        var need_unselect = false;
        if (!ctrlKey && !preserve && (this._selected.length!=1 || this._selected[0]!=id))
            need_unselect = true;

        if (!need_unselect && this.isSelected(id)){
            if (ctrlKey) this.unselect(id);    //ctrl-selection of already selected item
            return;
        }

        this._select_mark(id, true, null, need_unselect);
    },
    //unselect some item
    unselect:function(id){
        //if id is not provided  - unselect all items
        if (!id) return this.unselectAll();
        if (!this.isSelected(id)) return;

        this._select_mark(id,false);
    },
    //select all items, or all in defined range
    selectAll:function(from,to){
        var range;
        var refresh=[];

        if (from||to)
            range = this.data.getRange(from||null,to||null);    //get limited set if bounds defined
        else
            range = this.data.getRange();            //get all items in other case
                                                //in case of paging - it will be current page only
        range.each(function(obj){
            if (!this.data.getMark(obj.id, "webix_selected")){
                this._selected.push(obj.id);
                this._select_mark(obj.id,true,refresh);
            }
        },this);
        //repaint self
        this._refresh_selection(refresh);
    },
    //remove selection from all items
    unselectAll:function(){
        var refresh=[];

        this._selected.each(function(id){
            this._select_mark(id,false,refresh);    //unmark selected only
        },this);

        this._selected=webix.toArray();
        this._refresh_selection(refresh);    //repaint self
    },
    //returns true if item is selected
    isSelected:function(id){
        return this._selected.find(id)!=-1;
    },
    /*
        returns ID of selected items or array of IDs
        to make result predictable - as_array can be used,
            with such flag command will always return an array
            empty array in case when no item was selected
    */
    getSelectedId:function(as_array){
        switch(this._selected.length){
            case 0: return as_array?[]:"";
            case 1: return as_array?[this._selected[0]]:this._selected[0];
            default: return ([].concat(this._selected)); //isolation
        }
    },
    getSelectedItem:function(as_array){
        var sel = this.getSelectedId(true);
        if (sel.length > 1 || as_array){
            for (var i = sel.length - 1; i >= 0; i--)
                sel[i] = this.getItem(sel[i]);
            return sel;
        } else if (sel.length)
            return this.getItem(sel[0]);
    },
    //detects which repainting mode need to be used
    _is_mass_selection:function(obj){
         // crappy heuristic, but will do the job
        return obj.length>100 || obj.length > this.data.count/2;
    },
    _refresh_selection:function(refresh){
        if (typeof refresh != "object") refresh = [refresh];
        if (!refresh.length) return;    //nothing to repaint

        if (this._is_mass_selection(refresh))
            this.data.refresh();    //many items was selected - repaint whole view
        else
            for (var i=0; i < refresh.length; i++)    //repaint only selected
                this.render(refresh[i],this.data.getItem(refresh[i]),"update");

        if (!this._silent_selection)
        this.callEvent("onSelectChange",[refresh]);
    }
};

webix.ready(function(){
    webix.event(document.body,"mouseup", function(e){
        if(webix._noselect_element){
            webix.html.removeCss(webix._noselect_element,"webix_noselect");
            webix._noselect_element = null;
        }
    });
});
/*
    Behavior:DataMove - allows to move and copy elements, heavily relays on DataStore.move
    @export
        copy
        move
*/