jquery 封装自定义组件实例

下面的代码是封装了一个 table组件。

该组件支持表格自定义列、列的显示与隐藏、列对齐方式、点击事件。

效果截图：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义组件</title>
<!-- <link rel="stylesheet" type="text/css" href="js/index.css"> -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="./js/component.js"></script>


</head>

<body >
	<div class="mytable"></div>
</body>

<script>
    $(function(){
        var table = $(".mytable").mytable({
            align:'center',
            column:[
                {name:'lsh',label:'流水号',width:80,visible:false},
                {name:'xm',label:'姓名',width:180,visible:true},
                {name:'yw',label:'语文',width:90,visible:true},
                {name:'sx',label:'数学',width:90,visible:true},
                {name:'yy',label:'英语',width:90,visible:true}
            ],
            data:[
                {lsh:'001',xm:'张三',yw:'78',sx:'89',yy:'90'},
                {lsh:'002',xm:'李四',yw:'88',sx:'69',yy:'100'},
                {lsh:'003',xm:'王五',yw:'65',sx:'43',yy:'21'}
            ],
            onclick:function(options){
                console.log(options);
            }
        })
    })

</script>
</html>

$(function(){

	var _mytable = {
		element:null,
		data:null,
		column:null,
		width:60,
		align:'left',

		_init:function(options){
			if(options.data != null){
				this.data = options.data;
			}
			if(options.column != null){
				this.column = options.column;
			}
			if(options.align != null){
				this.align = options.align;
			}
			this._render(options);
		},

		onclick:function(options){
			var obj = {},col,value;
			this.element.find("._mytable tbody tr").click(function(e){
				for(var i = 0 , len = options.column.length ; i < len ; i ++){
					col = options.column[i].name;
					value = $(this).find(".mytable_"+col).html();
					obj[col] = value
				}
				options.onclick(obj);
			})
		},

		_render:function(options){
			var _html = [];
			var visible = '';
			var width = this.width;
			_html.push('<table class="_mytable" style="text-align:'+this.align+'"><thead><tr>');
			for(var i = 0 , len = options.column.length ; i < len ; i ++){
				visible = options.column[i].visible == false ? 'none' : 'inline-block';
				width = options.column[i].width == null ? width : options.column[i].width;
				_html.push('<th style="display:'+visible+';width:'+width+'px;"');
				_html.push('class="mytable_'+options.column[i].name+'">'+options.column[i].label+'</th>');
			}
			_html.push('</tr></thead><tbody>');

			for(var i = 0 , len = options.data.length ; i < len ; i ++){
				_html.push('<tr>');
				for(var j = 0 , l = options.column.length ; j < l ; j ++){
					visible = options.column[j].visible == false ? 'none' : 'inline-block';
					width = options.column[j].width == null ? width : options.column[j].width;
					_html.push('<td class="mytable_'+options.column[j].name+'" style="display:'+visible+';width:'+width+'px;">');
					_html.push(options.data[i][options.column[j].name]+'</td>');
				}
				_html.push('</tr>');
			}
			_html.push('</tbody></table>');

			$(this.element).html(_html.join(''));
			this.onclick(options);
		}
	}

	$.fn.mytable = function(options){
		var _obj = _mytable;
		_obj.element = this;
		_obj._init(options);
		return _obj;
	}

})

jquery 封装自定义组件实例

猜你喜欢