list组件

Posted 2020-07-30 lvsally

1 创建元素，创建元素的父节点为传入id的下一个兄弟节点，并且为组件元素指定唯一的class（List_bs_sign） 创建方式如下
adElm:function(a,b){var e=$C(a,b);this.appendChild(e);return $(e)},//可解决先$C再innerhtml的内存泄露问题
appendTo:function(o){o.appendChild(this);return this},
bbElm:function(a,b){var e=$C(a,b);this.insertAdjacentElement("beforeBegin",e);return $(e)},
abElm:function(a,b){var e=$C(a,b);this.insertAdjacentElement("afterBegin",e);return $(e)},
————》aeElm:function(a,b){var e=$C(a,b);this.insertAdjacentElement("afterEnd",e);return $(e)},
beElm:function(a,b){var e=$C(a,b);this.insertAdjacentElement("beforeEnd",e);return $(e)}

WT.UI.List_bs = function(j) {
    var $ = WT.$;
    var me = this;
    me.selElm = null;
    me.items = null;
    var defHead = [{
        txt: \'\',
        type: \'incr\',
        w: 20
    }, {
        txt: \'\',
        type: \'checkbox\',
        w: 20
    },{
        txt:\'\',
        type:\'icon\',
        w:20
    },{
        txt:\'\',
        type:\'content\',
        w:100
    },{
        txt:\'\',
        type:\'save\',
        w:20
    }];
    me.comType = \'List_bs\'; //增加反射
    WT.ext(me, WT.Util);
    var _args = {
        p: $DB,
        ifIncr: false, //是否有自增列
        ifCheckBox: false, //是否有选择checkbox
        ifIcon:false,
        ifSave:false,
        headOption: {
            txt: \'\',
            w: null
        },
        defHead:defHead,
        items: [],
        onClick: me._fn
    };
    me.args = me.initArgs(j, _args);
    me.items = me.get(\'items\');
    me.base = me.get(\'p\').adElm(\'\', \'div\').cn(\'list_bs bg_1 b_65 dn List_bs_sign\'); //所有弹出组件放在z1
    me.ajaxData = function(apiName, param, cbFn) {};
    me.loadData = function() {};
    me.setVal = function(v) {
        for (var i = 0, l = me.items.length; i < l; i++) {
            var _it = me.items[i];
            if (_it.val === v) {
                var _tr = me.base.find(\'table\')[0].rows[i];
                if (me.selElm) {
                    me.items[me.selElm.y].ifSelect = null;
                    changeTrColor(me.selElm.elm.pn(), _tr);
                } else {
                    changeTrColor({}, _tr);
                }
                _it.ifSelect = true;
                me.selElm = {
                    elm: _tr.find(\'td\')[0],
                    idx: _it.idx,
                    val: _it.val,
                    txt: _it.txt,
                    x: 0,
                    y: i
                };
                break;
            }
        }
        return me.selElm;
    };
    me.render = function(a) {
        a = (a instanceof Array) ? a : me.items;
        me.base.h(\'\');
        var _tbody = me.base.adElm(\'\', \'table\').ac(\'fs14 c_25\');
        var _cg = _tbody.adElm(\'\', \'colgroup\');
        if (me.get(\'ifIncr\')) _cg.adElm(\'\', \'col\').attr(\'width\', me.get(\'defHead\')[0].w + \'px;\');
        if (me.get(\'ifCheckBox\')) _cg.adElm(\'\', \'col\').attr(\'width\', me.get(\'defHead\')[1].w + \'px\');
        if (me.get(\'ifIcon\')) _cg.adElm(\'\', \'col\').attr(\'width\', me.get(\'defHead\')[2].w + \'px\');
        if (me.get(\'ifSave\')) {
            _cg.adElm(\'\', \'col\').attr(\'width\', me.get(\'defHead\')[3].w + \'px\');
            _cg.adElm(\'\', \'col\').attr(\'width\', me.get(\'defHead\')[4].w + \'px\');
        }

        for (var i = 0, l = a.length; i < l; i++) { //循环TD
            var _it = a[i];
            var _tr = WT.$(_tbody.insertRow(i));
            _tr.attr(\'idx\', _it.idx); //.attr(\'tabindex\',1);
            _tr.attr(\'val\', _it.val);
            var _tdAry = [];
            if (me.get(\'ifIncr\')) {
                _tdAry.push(\'<td>\' + (i + 1) + \'</td>\');
            }
            if (me.get(\'ifCheckBox\')) {
                _tdAry.push(\'<td><input type="checkbox" \' + (_it.ifSelect ? \'checked\' : \'\') + \'/></td>\');
            }
            if (me.get(\'ifIcon\')) {
                _tdAry.push(\'<td> <img src=\'+ _it.imgSrc +\' /> </td>\');
            }
            var _td = _it.txt.length<10 ? \'<td>\' + _it.txt + \'</td>\' : \'<td title="\'+_it.txt+\'">\' + _it.txt + \'</td>\';//当内容超过15个字符会有title
            _tdAry.push(_td);

            if (me.get(\'ifSave\')) {
                _tdAry.push(\'<td> <img opt="save" isSelect=\'+_it.isSelect+\' src=\'+ _it.save +\' /> </td>\');
            }
            _tr.h(_tdAry.join(\'\'));

            if (_it.ifSelect) {
                me.selElm = {
                    elm: _tr.chr(0),
                    idx: _it.idx,
                    val: _it.val,
                    txt: _it.txt,
                    x: 2,
                    y: i
                };
                changeTrColor({}, _tr);
            }
        }

        _tbody.evt(\'mousedown\', function(e) {
            var e = WT.e.fix(e),
                _e = e.t;
            e.stop();
            while (_e.tagName != \'TABLE\') {
                if (_e.tagName === \'TD\') {
                    if (me.selElm) {
                        if (a[me.selElm.y]) a[me.selElm.y].ifSelect = null;
                        changeTrColor(me.selElm.elm.pn(), _e.pn());

                    } else {
                        changeTrColor({}, _e.pn());
                    }

                    var rIdx = _e.pn().rowIndex;
                    me.selElm = {
                        elm: _e,
                        items: a[rIdx],
                        idx: +_e.pn().attr(\'idx\'),
                        val: a[rIdx].val,
                        txt: a[rIdx].txt,
                        x: _e.cellIndex,
                        y: rIdx
                    };
                    a[rIdx].ifSelect = true;
                }
                _e = _e.pn();
            }
            if (!me.get(\'ifSave\')) {
                me.hide();
            }
            me.get(\'onClick\')(me.selElm);
        });
    }
    var changeTrColor = function(tr1, tr2) {
        for (var i in tr1.cells) {
            if (tr1.cells[i].tagName === \'TD\') WT.$(tr1.cells[i]).dc(\'bc_opt1\');
        }
        for (var i in tr2.cells) {
            if (tr2.cells[i].tagName === \'TD\') WT.$(tr2.cells[i]).ac(\'bc_opt1\');
        }
    }
    var fliterFn = function() {}
    me.init = function() {

    }
    if (arguments.length) {
        me.init();
    }
}

View Code

2 在document下添加全局mousedown事件，查找所有class为List_bs_sign并删除所有

            var oListBs = document.querySelectorAll(\'.List_bs_sign\');
            for(var i=0; i<oListBs.length; i++){
                if (_e.nextSibling || _e.nextElementSibling!== oListBs[i]){
                    $(oListBs[i]).r();
                }
            }

 技巧

1 需要了解鼠标事件的顺序，应该先是mousedown-》click——》doubleclick；那么在全局使用mousedown削掉所有的弹框，然后再用click new新的list组件这样就不会删掉刚创建的组建了。

2 用js创建类似‘类’的结构，可以在每个组件dom结构创建时create一个div，作为base元素，然后控制base，使base具有，show，hide，remove等方法，最后在创建这些组件的时候将这些公用方法扩展到组件中。

扩展函数
\'ext\': function (target, src) {
            if(!src || !target) return null;
            for (var i in src) {
                if (src.hasOwnProperty(i)){
                    target[i] = src[i];
                }
            }
            return target;
        }

 

WT.Util = {
    _fn: function() {},
    r: function() {
        this.base.r();
    },
    get: function(k) {
        return this.args[k];
    },
    set: function(k, v) {
        this.args[k] = v;
        return v;
    },
    show: function() {
        if (this.get(\'tips_mask\')) {
            if (WT.$(\'tips_mask\')) WT.$(\'tips_mask\').show()
        }
        this.base.show();
    },
    hide: function() {
        if (this.get(\'tips_mask\')) {
            if (WT.$(\'tips_mask\')) WT.$(\'tips_mask\').hide()
        }
        this.base.hide();
    },
    initArgs: function(oArgs, nArgs) {
        var _args = oArgs || {};
        for (var i in nArgs) {
            if (_args[i] == null) {
                _args[i] = nArgs[i];
            } else {
                if (i == \'p\' || i == \'pBody\') {
                    _args[i] = WT.$(_args[i]);
                }
            }
        }
        return _args;
    }
};

View Code