jquery 封装自定义组件实例

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

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

效果截图：

代码如下：

$(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('');
			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('');
			}
			_html.push('');

			for(var i = 0 , len = options.data.length ; i < len ; i ++){
				_html.push('');
				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('');
				}
				_html.push('');
			}
			_html.push('
'+options.column[i].label+'
');
					_html.push(options.data[i][options.column[j].name]+'
');

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

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

})