标签:
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(); } }
标签:
原文地址:http://www.cnblogs.com/lv-sally/p/5619141.html