list组件

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();
    }
}

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;
    }
};