码迷,mamicode.com
首页 > 其他好文 > 详细

list组件

时间:2016-06-27 09:08:42      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:

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

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

 

list组件

标签:

原文地址:http://www.cnblogs.com/lv-sally/p/5619141.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!