欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

java编程自写一款JavaScript超实用表格插件

程序员文章站 2022-06-25 10:53:59
目录使用效果文档说明第一步第二步第三步源码使用效果文档说明第一步从tablefactory获图标form对象。或者:第二步加载参数,传入json对象表格效果:json参数明细:实例:对应于:第三步将t...

使用效果

java编程自写一款JavaScript超实用表格插件

文档说明

第一步

从tablefactory获图标form对象。

java编程自写一款JavaScript超实用表格插件

或者:

java编程自写一款JavaScript超实用表格插件

第二步

加载参数,传入json对象

java编程自写一款JavaScript超实用表格插件

表格效果:

java编程自写一款JavaScript超实用表格插件

json参数明细:

java编程自写一款JavaScript超实用表格插件

实例:

java编程自写一款JavaScript超实用表格插件

java编程自写一款JavaScript超实用表格插件

对应于:

java编程自写一款JavaScript超实用表格插件

第三步

将table加载到页面中对应id的div中。

如:

java编程自写一款JavaScript超实用表格插件

根据列数可以动态调整td的宽度

java编程自写一款JavaScript超实用表格插件

单独放入一个文件,可以直接调用。

java编程自写一款JavaScript超实用表格插件

源码

//表格工厂
var tablefactory = function(type){
	if(this instanceof tablefactory){
		return new this[type]();
	}else{
		return new tablefactory(type); //防止没有写new的情况
	}
}
tablefactory.prototype = {	
	chartform : function(){
		var html = ''; //私有属性
		this.loadparams = function(opts){
			var jsonarr = []; //json数组
			var icount = 0;//用于控制行变色
			var rowheaderarr = [];//每行第一列格式数组
			if(opts.jsonarr){
				jsonarr = opts.jsonarr;
			}
			if(opts.rowheaderarr){
				rowheaderarr = opts.rowheaderarr;
			}
			var colnum = jsonarr.length; //记录总列数
			var rownum = rowheaderarr.length - 1;//总行数(除去首行)			
			html = "<table id='table' style=\"border-collapse:collapse;border-spacing:0;border:1px solid #ccc;font-size:12px;text-align:center;\"   >"+
								"<tbody><tr> "+
									"<td  >&nbsp;</td>"; //左上角空的td
						
			//拼写第一行 
			for(var i = 0;i < colnum;i++){
				var c1 = jsonarr[i].c1;
				html += '<td  style="border:1px solid #ccc;height:14px;background-color:#e2fdfe;font-size:14px;font-weight:bold;padding:3px;" >' + c1 + '</td>';
			}
			html += '</tr><tr>';
			for(var i = 0;i < rownum + 1;i++){
				//拼写行头
				var colorbox = rowheaderarr[i].split(',')[0];
				var heardertext = rowheaderarr[i].split(',')[1];
				html += "<td class='colorbox' style='padding:3px;height:14px;border:1px solid #ccc;width:66px;text-align:center;'><div style='border-radius:2px 2px 2px 2px;display:inline-block;width:12px;height:12px;background-color:"+colorbox+";float:left;'></div>"+heardertext+"</td>";
				//拼写这一行右边的所有列
				for(var j = 0;j < colnum;j++){
					//alert(i);
					var colvalue = jsonarr[j]['c'+(i+2)];
					var tdwidth;					
					if(colnum <= tablefactory.td_widths.length)
						tdwidth = tablefactory.td_widths[colnum-1];
					else 
						tdwidth = tablefactory.td_widths[tablefactory.td_widths.length - 1];
					console.info(tdwidth);
					if(i%2 == 0){
						html += '<td style = "height:14px;border:1px solid #ccc;width:'+ tdwidth +'px;text-align:center;background-color:#e2fdfe;">'+colvalue+'</td>'; 
					}else{
						html += '<td style = "height:14px;border:1px solid #ccc;width:'+ tdwidth +'px;text-align:center;background-color:#fff;">'+colvalue+'</td>'; 
					}					 
				}
				
				//换行
				html += '</tr><tr>';				
			}
			html += '</tr><tr>';
			html += '</tr>';
			html += '</tbody></table>';
		} ;
		this.loaddata = function(houseid,callback){
			document.getelementbyid(houseid).innerhtml = html; //展示table
			if(callback) callback();
		}
	}
}
	tablefactory.td_widths = [220,190,150,120,90,60,10];

demo:

<script src='common.js'></script>
<div id='tb' class='tb'></div>
<div id='tb1' class='tb'></div>
<div id='tb2' class='tb'></div>
<div id='tb3' class='tb'></div>
<div id='tb4' class='tb'></div>
<style>
    .tb {
		padding:6px;
	}
</style>
<script>
	var chartform = tablefactory('chartform');
	chartform.loadparams({
						jsonarr:	[
										{c1:'北京',c2:2,c3:3,c4:3,c5:1,c6:6},
										{c1:'上海',c2:2,c3:2,c4:3,c5:1,c6:6},
										{c1:'河南',c2:2,c3:4,c4:3,c5:1,c6:6},
										{c1:'河北',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'东北',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'四川',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'重庆',c2:2,c3:6,c4:3,c5:1,c6:6}
									],
						rowheaderarr: [
											'#000ccc,任务总数',			//行名称
											'#990033,立项阶段',
											'#66ff00,检查阶段',
											'#663399,审理阶段',
											'#33ccff,报告阶段'
									  ]
					});

	chartform.loaddata('tb');
	chartform.loadparams({
						jsonarr :	[
										{c1:'北京',c2:2,c3:3,c4:3,c5:1,c6:6},
										{c1:'上海',c2:2,c3:2,c4:3,c5:1,c6:6},
										{c1:'河南',c2:2,c3:4,c4:3,c5:1,c6:6},
										{c1:'河北',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'东北',c2:2,c3:6,c4:3,c5:1,c6:6},										{c1:'四川',c2:2,c3:6,c4:3,c5:1,c6:6},
									],
						rowheaderarr : [
											'#000ccc,任务总数',			//行名称
											'#990033,立项阶段',
											'#66ff00,检查阶段',
											'#663399,审理阶段',
											'#33ccff,报告阶段'
									  ]
					});
	chartform.loaddata('tb1');
	chartform.loadparams({
						jsonarr:	[
										{c1:'北京',c2:2,c3:3,c4:3,c5:1,c6:6},
										{c1:'上海',c2:2,c3:2,c4:3,c5:1,c6:6},
										{c1:'河南',c2:2,c3:4,c4:3,c5:1,c6:6},
										{c1:'河北',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'东北',c2:2,c3:6,c4:3,c5:1,c6:6},
									],
						rowheaderarr: [
											'#000ccc,任务总数',			//行名称
											'#990033,立项阶段',
											'#66ff00,检查阶段',
											'#663399,审理阶段',
											'#33ccff,报告阶段'
									  ]
					});
	chartform.loaddata('tb2');
</script>

以上就是java编程自写一款javascript超实用表格插件的详细内容,更多关于java编程javascript表格插件的资料请关注其它相关文章!