原生js-自定义组件table

使用方法：

// 渲染table

msCtools.tableDom.common({

        columns:columns1 ,

        dataSource:dataSource1,

        width:'100%',

        ischeck:true,

},'tableDOM');

参数说明：

参数	说明	类型	可选值
columns	table表格列内容设置	options	Key、title、align、width
dataSource	table数据	array	——
width	控制表格宽度	String	默认宽800px
ischeck	true/false是否全选	Boolean	默认false
tableid	挂载元素的ID	String	必填

columns与dataSource中的数据相对应，没有对应数据的地方显示为空；

columns表格列内容设置，数组格式：(参数说明如下)

参数	说明	类型	可选值
key	字段名	String	必填
title	表头名	String	必填
align	对齐方式	String	选填
width	列宽度	String	选填
textOver	超出行溢出	Number	选填
ishidden	是否隐藏(true:是，false:否)	Boolean	默认false
render	函数方法	Function	选填

columns中的render函数方法，可对当前数据进行处理后显示，也可设置为数据操作（编辑、查看、删除）；

获取勾选数据方法：

msCtools.tableDom.getchecked(tableid)；

源码：

var msCtools = {
	conf: {
		host: "",	
		port: "80",
		baseapi: "/api/",
		basepath: "mhc/",
	},
	Table:{
		init:function(param,id){
			var options = {
				columns: [], // 表格列内容设置（key:字段名，title：表头名，align：对齐方式，width：列宽度，textOver：超出行溢出，ishidden：是否隐藏(true:是，false:否)默认false）
				dataSource: [], // 数据
				width: '100%', // 宽度，默认100%
				ischeck:false, // 是否勾选(true:是，false:否)，默认false
				style:{
					skin:'', // 边框样式：line线/row行/none无
					even:false, // 是否开启隔行背景(true:是，false:否)，默认false
					evenColor:['#fff','#EEF0F2'], // 隔行背景颜色设置
				},
				colClassName:'',
			}
			if (param && {}.toString.call(param) === '[object Object]') {
				for (let attr in param) {
				  options[attr] = param[attr]
				}
			}
			// 参数格式校验：columns必须为数组且key不重复，dataSource必须为数组
			if(!Array.isArray(options.columns)) {
				console.log('错误：传入columns必须为数组');
			} else {
				for(let i = 0; i < options.columns.length; i++) {
					for(let j = i + 1; j < options.columns.length; j++) {
						if(!options.columns[i].key) {
							console.log('key不存在')
							break;
						} else {
							if(options.columns[i].key === options.columns[j].key) {
								console.log('key重复')
								break;
							}
						}
					}
				}
			}
			if(!Array.isArray(options.dataSource)) {
				console.log('错误：传入dataSource必须为数组');
			}
			if(options.style === null || typeof options.style !== "object") {
				console.log('错误：style参数必须为对象');
			}
			if(options === null || typeof options !== "object") {
				console.log('错误：参数必须为对象');
			}
			// 赋值
			this.cols = options.columns;
			this.data = options.dataSource;
			this.width = options.width;
			this.ischeck = options.ischeck;
			this.style = options.style;
			this.colClassName = options.colClassName;
			this.id = id;
			this.content = document.getElementById(id);
			// 创建dom节点
			this.creatDom();
		},
		// 创建节点
		creatDom:function(){
			var table = document.createElement('table');
				table.className = 'table_style';
			// 表格边框的宽度
			table.setAttribute('border','0');
			// 单元格之间的空白
			table.setAttribute('cellspacing','0');
			// 单元边沿与其内容之间的空白
			table.setAttribute('cellpadding','10px');
			
			// table边框样式：line线/row行/none无
			if(this.style.skin == 'line'){
				// 外侧边框的哪个部分是可见的
				table.setAttribute('frame','box');
				// 内侧边框的哪个部分是可见的
				table.setAttribute('rules','all');
			}else if(this.style.skin == 'row'){
				// 外侧边框的哪个部分是可见的
				table.setAttribute('frame','box');
				// 内侧边框的哪个部分是可见的
				table.setAttribute('rules','rows');
			}else if(this.style.skin == 'none'){
				// 无边框
			}
			
			// 设置宽
			table.setAttribute('width',this.width);
			
			var thead = this.creatThead();
			var tbody = this.creatTbody();
			table.appendChild(thead);
			table.appendChild(tbody);
			this.content.appendChild(table);
		},
		// 创建thead
		creatThead:function(){
			var thead = document.createElement('thead');
			var tr = document.createElement('tr');
				tr.className = 'table_cols';
				tr.classList.add(this.colClassName);
			// 是否勾选ischeck( true / false )
			if(this.ischeck){
				var th = document.createElement('th');
					th.id = 'ischeck_th';
					th.className = 'ischeck_inp'
				var input = document.createElement('input');
					input.type = 'checkbox';
					input.setAttribute('style','vertical-align: middle;');
					var content = this.content;
					input.onchange = function(e){
						if(e.target.checked){ 
							// 选中全选
							console.log('触发选中全选');
							msCtools.Table.allCheck(content,true);
						}else{ 
							// 取消全选
							console.log('触发取消全选');
							msCtools.Table.allCheck(content,false);
						}
					}
				var span = document.createElement('span');
					span.id = 'ischeck_title';
					span.innerText = '全选';
				th.appendChild(input);
				th.appendChild(span);
				tr.appendChild(th);
			}
			var lenn = this.cols.length;
			for(var i=0;i<lenn;i++){
				// 非隐藏
				if( !this.cols[i].ishidden){
					var th = document.createElement('th');
						th.innerText = this.cols[i].title;
					tr.appendChild(th);
				}
			}
			thead.appendChild(tr);
			return thead;
		},
		// 创建tbody
		creatTbody:function(){
			var tbody = document.createElement('tbody');
			var lenn = this.data.length;
			for(var i=0;i<lenn;i++){
				var tr = document.createElement('tr');
				// 是否开启隔行背景
				if(this.style.even){
					if(this.style.evenColor){
						if(this.style.evenColor.length > 1){
							var result = i % 2 == 0 ? this.style.evenColor[0] : this.style.evenColor[1];
						}else{
							var result = i % 2 == 0 ? '#ffffff' : '#e4e0e0';
						}
					}else{
						var result = i % 2 == 0 ? '#ffffff' : '#e4e0e0';
					}
					tr.setAttribute('style','background-color:'+result)
				}
				// 是否勾选ischeck
				if(this.ischeck){
					var td = document.createElement('td');
						td.className = 'ischeck_inp'
					var input = document.createElement('input');
						input.type = 'checkbox';
						input.setAttribute('style','vertical-align: middle;');
						input.setAttribute('set-data',this.data[i].id);
						// var set_data1 = JSON.stringify(this.data[i]);
						// input.setAttribute('set-data1',set_data1);
						input.onchange = function(e){
							if(e.target.checked){ 
								// console.log('触发选中')
							}else{ 
								// console.log('触发取消')
							}
						}
					td.appendChild(input);
					tr.appendChild(td);
				}
				var lenn_cols = this.cols.length;
				for(var f=0;f<lenn_cols;f++){
					// 非隐藏
					if( !this.cols[f].ishidden){
						var td = document.createElement('td');
						var span = document.createElement('span');
						if(this.cols[f].render && typeof this.cols[f].render === 'function'){
							// 执行render函数，传入行值和列值，并且获得返回值
							let render = this.cols[f].render(this.data[i][this.cols[f].key], this.data[i]);
							// 如果返回值是一个dom节点，则向td里插入节点
							if(typeof render === "object") {
								td.classList.add('toolBtn')
								td.appendChild(render);
							} else {
								// 否则直接innerHTML
								span.innerHTML = render;
							}
						}else{
							// 直接插入对应值
							span.innerText = this.data[i][this.cols[f].key];
						}
						var td_style = '';
						// 设置对齐方式
						if(this.cols[f].align){
							td_style += 'text-align:'+this.cols[f].align+';';
						}
						// 设置列宽
						if(this.cols[f].width){
							td_style += 'width:'+this.cols[f].width+';';
						}
						// 设置满行溢出
						var textOver = 1;
						if(this.cols[f].textOver){
							textOver = this.cols[f].textOver;
						}
						span.setAttribute('style','overflow : hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: '+textOver+'; -webkit-box-orient: vertical;')
						td.setAttribute('style',td_style);
						td.appendChild(span);	
						tr.appendChild(td);	
					}
				}
				tbody.appendChild(tr);
			}
			return tbody;
		},
		// 数据操作
		tools:function(arry,data,cb){
			let func = function(){};
			if (cb && {}.toString.call(cb) === '[object Function]') {
				func = cb
			}
			var lenn = arry.length;
			var btns = document.createElement('div');
				btns.classList.add('tooldivBtn');
			for(var i=0;i<lenn;i++){
				// 事件类型：type，文字：text，样式：classname
				let element = document.createElement('a');
				element.innerHTML = arry[i].text;
				element.type = arry[i].type;
				element.className = arry[i].classname;
				var type = arry[i].type;
				element.onclick = function(e){
					// 回调函数：data点击行数据，type点击事件的执行类型：删除、修改....
					func(data,e.target.type)
				}
				btns.appendChild(element)
			}
			return btns;
		},
		// 获取选中数据
		getchecked:function(id){
			var content = document.getElementById(id);
			var table = content.querySelector('table');
			var tbody = table.querySelector('tbody');
			var node_checks = tbody.querySelectorAll('.ischeck_inp');
			var data = [];
			for(var i=0;i<node_checks.length;i++){
				var item = node_checks[i];
				var input = item.querySelector('input[type="checkbox"]');
				if(input.checked){
					// var itm = input.getAttribute('set-data1');
					// 	itm = JSON.parse(itm);
					var itm = input.getAttribute('set-data');
					data.push(itm);
				}
			}
			return data
		},
		// 全选/取消
		allCheck:function(content,ischeck){
			var table = content.querySelector('table');
			var tbody = table.querySelector('tbody');
			var node_checks = tbody.querySelectorAll('.ischeck_inp');
			for(var i=0;i<node_checks.length;i++){
				var item = node_checks[i];
				var input = item.querySelector('input[type="checkbox"]');
					input.checked = ischeck;
			}
		}
	},
}

css样式：

/* table 默认样式 */
.table_style{border-color: #e4e0e0;padding: 0;margin: 0;}
.table_style tbody td{color: #666666;font-size: 14px;}
.table_cols{background-color:#EEF0F2;color: #333;text-align: center;line-height: 40px;}
.table_cols th{padding: 0 15px;font-size: 14px;color: #333;font-weight: normal;}
.ischeck_inp{padding-left: 15px;min-width: 50px;}
.table_style .toolBtn a{padding: 3px 10px;border: 1px solid #999;border-radius: 4px;margin-right: 10px;cursor: pointer;}

使用实例：html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试实例</title>
		<style type="text/css">
			/* table 自定义 */
			.zdy_cols{
				background-color:#01AAED;
				color: #fff;
				text-align: center;
				line-height: 60px;
			}
			.zdy_cols th{padding: 0 25px;font-size: 14px;font-weight: normal;} 
		</style>
		<script src="msCtools.js"></script>
	</head>
	<body>
		<div id="ctools_table"></div>
		<button onclick="getdata()">获取数据</button>
	</body>
	<script>
	var data = [
			{id:'001', name:'还是等会计法恒生科技粉红色快递费数据库',age:12,job:'尽快尽快'},
			{id:'002', name:'lili',age:12,job:'鼎折覆餗老看到集福卡了束带结发SDK福建省看到了附加速度快的说法可接受的开发收到了的看法是打开房间塞德里克肯德基首付款'},
			{id:'003', name:'lili',age:12,job:'尽快尽快'}
	]
	msCtools.Table.init({
		columns:[
			{key: 'id',title: 'id', align: 'center',width:'60px'},
			{key: 'name',title: '姓名', align: 'center',width:'60px'}, 
			{key: 'age',title: '年龄',align: 'center',width:'60px'},
			{key: 'job',title: '工作',align: 'center',
					render:function (text, data){
						return '<span style="color:green;">'+text+'</span>'
					}
			},
			{key: 'tools',title: '操作',align: 'center',width:'200px',
					render:function (text, data){
						return msCtools.Table.tools([{
								type:'del',
								text:'删除',
								classname:' toolBtn delBtn'
							},{
								type:'edit',
								text:'修改',
								classname:'toolBtn editBtn'
							},{
								type:'look',
								text:'查看',
								classname:'toolBtn lookBtn'
							}],data,function(e,type){
								// e:点击行数据
								// type:点击事件执行类型--删除、修改、查看
								if(type == 'del'){
									console.log('删除数据：')
									console.log(e)
								}else if(type == 'edit'){
									console.log('修改数据：')
									console.log(e)
								}else if(type == 'look'){
									console.log('查看数据：')
									console.log(e)
								}
							})
					}
			},
		],
		dataSource:data,
		width:'800px', // 宽度
		ischeck:true, // 是否勾选
        colClassName:'zdy_cols'
	},'ctools_table');
		
	function getdata(){
		var data = msCtools.Table.getchecked('ctools_table');
		console.log(data);
	}
	</script>
</html>