对webix中的datatable进行数据拓展

/// 
 
/**
 * 对webix中的datatable进行数据拓展
 */
(function() {
    webix.lcextend = webix.lcextend || {};

    function defaultcompare(item1, item2) {
        if (item1 > item2)
            return 1
        else if (item1 === item2)
            return 0
        else
            return -1;
    }
    webix.lcextend.getSortFunc = function(group) {
        return function(item1, item2) {
            for (var i = 0; i < group.length; i++) {
                var itemconf = group[i];
                if (typeof itemconf == "string") {
                    itemconf = {
                        key: itemconf,
                        dir: "asc",
                        func: defaultcompare
                    }
                }
                var dir = itemconf.dir || "asc"; //当前升序还是降序
                if (dir == "asc") {
                    dir = 1;
                } else {
                    dir = -1;
                }
                var func = itemconf.func || defaultcompare; //比较函数
                var key = itemconf.key; //key值
                //var value = func(item1[key], item2[key]);
                var value;
                if (func == defaultcompare)
                    value = func(item1[key], item2[key]);
                else
                    value = func(item1, item2);
                if (value == 0)
                    continue;
                else
                    return dir * value;
            }
            return 0;
        }
    };

    function cloneSpan(spans, from, dest) {
        if (typeof dest == "string") {
            dest = [dest];
        }
        var spanslength = spans.length,
            item;
        for (var i = 0; i < spanslength; i++) {
            item = spans[i];
            if (item[1] == from) {
                for (var j = 0; j < dest.length; j++) {
                    item = webix.extend([], item);
                    item[1] = dest[j];
                    spans.push(item);
                }
            }
        }
    }

    webix.extend(webix.ui.datatable, {
        getData: function() {
            /// 

            /// 获取当前table中的所有行数据
            /// 
            /// 
 
  所有行数据组成的数组
 
            var dts = [];
            var datastore = this.data;
            for (var i = 0; i < datastore.order.length; i++) {
                dts.push(datastore.pull[datastore.order[i]]);
            }
            return dts;
        },
        calculateSpan: function(group, clones, sort) {
            /// 

            /// 计算单元格合并，只能进行树状结构的合并
            /// 备注:可以在此方法上面进行相同单元格合并的拓展
            /// 
            /// 进行合并的列id，越靠前越靠近根节点
            /// 需要进行合并克隆的信息 
            /// item结构:
            /// {
            ///     from:string,
            ///     dest:[string,....]
            /// }
            /// 
            /// 
 
            //数据排序
            var sortconf = [];
            var colum;
            for (var i = 0; i < group.length; i++) {
                colum = this.getColumnConfig(group[i]);
                sortconf.push({
                    key: group[i],
                    dir: colum ? colum.dir : null,
                    func: colum ? colum.func : null
                });
            }
            if (sort instanceof Array) {
                for (var i = 0; i < sort.length; i++) {
                    if (sortconf.indexOf(sort[i]) == -1) {
                        colum = this.getColumnConfig(sort[i]);
                        sortconf.push({
                            key: sort[i],
                            dir: colum ? colum.dir : null,
                            func: colum ? colum.func : null
                        })
                    }
                }
            }
            if (sort !== false)
                this.sort(webix.lcextend.getSortFunc(sortconf));

            //分组
            if (typeof group == "string") {
                group = [group];
            }
            var spans = [],
                data;

            if (this.config.pager) {
                //表示要进行分页操作;
                data = [];
                var coll = this.getData();
                var size = this.getPager().config.size;
                var page = this.getPage();
                var length = size * page + size;
                for (var i = size * page; i < ((coll.length - length) > 0 ? length : coll.length); i++) {
                    data.push(coll[i]);
                }
            } else {
                data = this.getData();
            }
            var positionmark = {};
            var groupkey = "";
            for (var i = 0; i < data.length; i++) {
                groupkey = "";
                for (var j = 0; j < group.length; j++) {
                    groupkey += ((j == 0) ? "" : ",") + data[i][group[j]];
                    if (positionmark[groupkey]) { //存在
                        positionmark[groupkey][3] = i;
                    } else {
                        positionmark[groupkey] = [i, groupkey, group[j], i];
                    }
                }
            }
            var row, item;
            for (var i in positionmark) {
                item = positionmark[i];
                row = [];
                row[0] = data[item[0]]["id"];
                row[1] = item[2];
                row[2] = 1;
                row[3] = item[3] - item[0] + 1;
                spans.push(row);
            }

            if (!clones || typeof clones !== "object")
                return spans;


            if (!(clones instanceof Array))
                clones = [clones];
            for (var i = 0; i < clones.length; i++) {
                cloneSpan(spans, clones[i].from, clones[i].dest);
            }
            return spans;
        },
        refreshSpan: function(group, clones) {
            this.removeSpan();
            var spans = this.calculateSpan.apply(this, arguments);
            this.addSpan(spans);
            this.refresh();
        },
        getTag: function() {
            return this.config.tag; //datatable 关联的tag
        },
        setTag: function(value, key) {
            if (key && typeof key == "string") {
                if (this.config.tag === undefined || this.config.tag === null) //没有进行定义
                    this.config.tag = {};
                this.config.tag[key] = value;
            } else {
                this.config.tag = value;
            }
        },
        getcolumns: function() {
            var show = this.getshowcolumns();
            var hide = this.gethidecolumns();
            return [].concat(show, hide);
        },
        getshowcolumns: function() {
            // return this._columns;//columns
            return this.config.columns;
        },
        gethidecolumns: function() {
            var cls = [];
            if (this._hidden_column_hash) {
                for (var i in this._hidden_column_hash) {
                    cls.push(this._hidden_column_hash[i]);
                }
            }
            return cls;
        },
        gettablehtml: function() {
            var trs = this.$view.getElementsByTagName("tr");
            var html = [];
            html.push("");
            for (var i = 0; i < trs.length; i++) {
                if (trs[i].innerText) {
                    html.push(trs[i].outerHTML);
                }
            }
            html.push("")

            html.push("");
            var data = this.getData();
            var columns = this.getshowcolumns();
            for (var i = 0; i < data.length; i++) {
                html.push("");
                for (var j = 0; j < columns.length; j++) {
                    if (columns[j].template && typeof columns[j].template === "function") {
                        html.push("" + columns[j].template(data[i], this.type, data[i][columns[j].id], columns[j], i) + "");
                    } else {
                        html.push("" + data[i][columns[j].id] + "");
                    }
                }
                html.push("");
            }
            html.push("");

            var table = document.createElement("table");
            table.innerHTML = html.join("");

            var spans = this.getSpan(); //获取所有span信息
            for (var rowid in spans) {
                var rowindex = this.getIndexById(rowid); //获取行index
                for (var colid in spans[rowid]) {
                    var colindex = this.getColumnIndex(colid); //获取列index
                    if (colindex == -1) {
                        continue;
                    }
                    //进行合并操作
                    var value = spans[rowid][colid];
                    var colspan = value[0];
                    var rowspan = value[1];
                    var tdvalue = value[2];
                    var td = table.querySelector('td[rowid="' + rowindex + '"][colid="' + colindex + '"]');
                    if (td) {
                        if (tdvalue) {
                            td.innerHTML = tdvalue;
                        }
                        td.colSpan = colspan;
                        td.rowSpan = rowspan;
                        for (var rowi = 0; rowi < rowspan; rowi++) {
                            for (var colj = 0; colj < colspan; colj++) {
                                if (rowi == 0 && colj == 0) {
                                    continue;
                                }
                                var selected = table.querySelector('td[rowid="' + (rowindex + rowi) + '"][colid="' + (colindex + colj) + '"]');
                                selected && selected.parentNode && selected.parentNode.removeChild(selected);
                            }
                        }
                    }
                }
            }
            return table;
        }
    });

    webix.extend(webix.ui.datatable, {
        $init: function() {
            this.$ready.push(function() {
                this.callEvent("onDataTableReady", {});
            });
        }
    })

    webix.extend(webix.ui.treetable, {
        getchilds: function(rowid) {
            var row = this.getItem(rowid)
            var result = [];
            if (row.$count && row.$count > 0) {
                var childid = this.getFirstChildId(rowid);
                for (var i = 0; i < row.$count; i++) {
                    if (i !== 0) {
                        childid = this.getNextSiblingId(childid)
                    }
                    result.push(this.getItem(childid));
                }
            }
            return result;
        },
        getparent: function(rowid) {
            var pid = this.getParentId(rowid);
            if (pid) {
                return this.getItem(pid);
            }
            return null;
        }
    });

    var comboextend = {
        NullGuid: "00000000-0000-0000-0000-000000000000",
        _applyChanges: function(e) {
            var input = this.getInputNode();
            var newvalue = "";


            var suggvalue = webix.$$(this.config.suggest).getValue();
            if (!suggvalue) {
                if (input.value) {
                    this.config.value = comboextend.NullGuid;
                    this.config.text = input.value;
                    return;
                }
            }

            if (input.value)
                newvalue = webix.$$(this.config.suggest).getSuggestion() || this.config.value;
            if (newvalue != this.config.value)
                this.setValue(newvalue, true);
            else
                this.$setValue(newvalue);
        },
        setValue: function(newvalue, text) {
            if (newvalue === comboextend.NullGuid) {
                var input = this.getInputNode();
                input.value = text;
                this.config.text = input.value;
                this.config.value = comboextend.NullGuid;
            } else {
                this.oldsetValue.apply(this, arguments);
            }
        },
        $setValue: function(newvalue) {
            if (newvalue === comboextend.NullGuid) {
                var input = this.getInputNode();
                input.value = this.config.text;
            } else
                this.old$setValue.apply(this, arguments);
        },
        registEvent: function() {
            var _self = this;
            var markchange = "";
            webix.event(this.getInputNode(), "keydown", function(e) {
                if (webix.isUndefined(this.value)) {
                    markchange = this.innerHTML;
                } else {
                    markchange = this.value;
                }
                console.log("keydown:" + markchange);
            });

            webix.event(this.getInputNode(), "input", function(e) {
                var value = "";
                if (webix.isUndefined(this.value)) {
                    value = this.innerHTML;
                } else {
                    value = this.value;
                }
                if (value != markchange) {
                    webix.$$(_self.config.suggest)._suggestions(e);
                }
                console.log("input:" + value);
            });
        }
    }

    webix.extend(webix.ui.combo, {
        extendFilter: function() {
            if (this.$isExtendFilter) {
                return;
            }
            this.$isExtendFilter = true;
            comboextend.registEvent.apply(this);
            this.attachEvent("onAfterRender", comboextend.registEvent);
            //this.attachEvent("onAfterRender", function () {
            //    var _self = this;
            //    var markchange = "";
            //    webix.event(this.getInputNode(), "keydown", function () {
            //        if (webix.isUndefined(this.value)) {
            //            markchange = this.innerHTML;
            //        } else {
            //            markchange = this.value;
            //        }
            //    });
            //    webix.event(this.getInputNode(), "propertychange", function () {
            //        var value = "";
            //        if (webix.isUndefined(this.value)) {
            //            value = this.innerHTML;
            //        } else {
            //            value = this.value;
            //        }
            //        if (value != markchange) {
            //            webix.$$(_self.config.suggest)._suggestions(e);
            //        }
            //    });
            //})
        },
        extendEditable: function() {
            /// 

            /// 支持编辑输入的功能
            /// 
            var _self = this;
            if (this.$isExtendEditable) {
                return;
            }
            this.$isExtendEditable = true;

            this.old_applyChanges = this._applyChanges;
            this._applyChanges = comboextend._applyChanges;

            this.old$setValue = this.$setValue;
            this.$setValue = comboextend.$setValue;

            this.oldsetValue = this.setValue;
            this.setValue = comboextend.setValue;

            //var inputvalue = "";
            //this.attachEvent("onBeforeRender", function () {
            //    var node = this.getInputNode();
            //    webix.event(node, "change", function () {
            //        if (webix.isUndefined(this.value)) {
            //            inputvalue = this.innerHTML;
            //        } else {
            //            inputvalue = this.value;
            //        }
            //    });
            //})
            //this.attachEvent("onAfterRender", function () {
            //    var node = this.getInputNode();
            //    webix.event(node, "change", function () {
            //        if (webix.isUndefined(this.value)) {
            //            this.innerHTML = inputvalue;
            //        } else {
            //            this.value = inputvalue;
            //        }
            //        _self._applyChanges();
            //    });
            //});
            this.refresh();
        }
    })

    webix.protoUI({
        name: "filtermultisuggest",
        defaults: {
            body: {
                rows: [{
                        view: "text",
                        on: {
                            onKeyPress: function() {
                                var popup = this.getParentView().getParentView();
                                popup.setValue(popup.getValue());
                            }
                        }
                    },
                    {
                        view: "list",
                        type: "multilist",
                        borderless: true,
                        autoheight: true,
                        yCount: 5,
                        multiselect: "touch",
                        select: true,
                        on: {
                            onItemClick: function(id) {
                                var popup = this.getParentView().getParentView();
                                webix.delay(function() {
                                    popup._toggleOption(id);
                                });
                            }
                        }
                    },
                    {
                        view: "button",
                        click: function() {
                            var suggest = this.getParentView().getParentView();
                            suggest.setMasterValue({ id: suggest.getValue() });
                            suggest.hide();
                        }
                    }
                ]
            }
        },
        Jt: function(obj) {
            return obj.rows[1];
        },
        _d: function() {
            //button text 显影控制
            var button = this.getButton();
            var text = (this.config.button ? (this.config.buttonText || webix.i18n.controls.select) : 0);
            if (button) {
                if (text) {
                    button.config.value = text;
                    button.refresh();
                } else
                    button.hide();
            }
            var filter = this.getText();
            filter.setValue("");
            filter.refresh();
        },
        getText: function() {
            return this.getBody().getChildViews()[0];
        },
        getButton: function() {
            return this.getBody().getChildViews()[2];
        },
        getList: function() {
            return this.getBody().getChildViews()[1];
        },
        setValue: function(value) {
            var text = [];
            var list = this.getList();
            list.unselect();

            if (value) {
                if (typeof value == "string")
                    value = value.split(this.config.separator);

                if (value[0]) {
                    for (var i = 0; i < value.length; i++) {
                        if (list.getItem(value[i])) {
                            if (list.exists(value[i]))
                                list.select(value[i], true);
                            text.push(this.getItemText(value[i]));
                        }
                    }
                }
            }

            this.config.value = value ? value.join(this.config.separator) : "";
            return text;
        },
        getValue: function() {
            return this.config.value;
        }
    }, webix.ui.multisuggest);


}())