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
        },
        ifPos: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‘); //所有弹出组件放在z1
    if (me.get(‘ifPos‘)) {
        me.base = me.get(‘p‘).aeElm(‘‘, ‘div‘).cn(‘list_bs bg_1 dn pa b_65 z10 List_bs_sign‘);
        var _ifPos = me.get(‘ifPos‘);
        me.base.css(WT.box([_ifPos.x,_ifPos.y,_ifPos.w,_ifPos.h].join(‘,‘)));
    }else{
        me.base = me.get(‘p‘).aeElm(‘‘, ‘div‘).cn(‘list_bs bg_1 dn pa b_65 z10 List_bs_sign‘);
    }
    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(‘click‘, 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下添加全局点击事件，查找所有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();
                }
            }