用JS自制表格软件玩数据5. 渲染出整个Excel单元格

Posted 2022-02-11 妇男主任

读取文件，渲染表格

• 结构设计
• 模块细节
• • 全局计数器
  • 渲染表格
  • • 左上角的标签
    • 渲染列坐标
    • 渲染行坐标
    • 渲染单元格

经过前面几节内容的准备工作之后，终于到了要渲染表格的环节。渲染表格的模块，继承自渲染器。

结构设计

现在到了开始渲染表格的示例代码：

/**
 * 表格渲染类
 */
class table_render extends renderDOM

	/**
	* 初始化表格
	*/
	constructor() 
		super();
	

在开始写代码的时候，先了解一下：表格如何工作的：

模块细节

全局计数器

安排了 creatGlobalId 作为一个简单的全局ID计数器。目前把它设计成为自增。

creatGlobalId()
	return "_"+this.GlobalId++;

渲染表格

左上角的标签

Tags.push(
	"Tag" : "div", "ID" : this.creatGlobalId(), "ClassName" : "cells__spacer",
	"Action":
		"click":function()
			// console.log("选择全部");
			var cells__inputs = document.getElementsByClassName("cells__input");
			var length = cells__inputs.length;
			for(var i = 0;i<length;i++)
				cells__inputs[i].style.backgroundColor = "#f3f2f1";
				that.focus["cells"].push(cells__inputs[i].getAttribute("id"));
			

			that.focus.x = 0;
			that.focus.y = 0;
			return false;
		,
		"change":function()
	
);

渲染列坐标

// 打印列号
while(col != x)

	Tags.push(
		"Tag" : "div", "ID" : col, "ClassName" : "cells__alphabet", "Text" : col,
		"Data" : [
			 "k":"x", "v":col ,
			 "k":"y", "v":"0" 
		],
		"Action":
			"click":that.colclick.bind(that),
			"dblclick":function(),
			"change":function(),
			"mousemove":function()
				//更改鼠标样式
				if (event.offsetX > this.offsetWidth - 10)
					this.style.cursor = 'col-resize';
				else
					this.style.cursor = 'default';
			,
			"mouseover":function(),
			"mouseout":function(),
			"mousedown":function(),
			"mouseup":function(),
			"contextmenu":that.colcontextmenu.bind(that)
		
	);

	that.focus["ColumnsSize"].push("200px")
	col = that.charcode.excel_Row_Increase(col,1);

渲染行坐标

// 打印行号
for(i = 1; !(i > y); i++ )
	Tags.push(
		"Tag" : "div", "ID" : ""+i, "ClassName" : "cells__number", "Text" : ""+i,
		"Data" : [
			 "k":"x", "v":"0" ,
			 "k":"y", "v":i 
		],
		"Action":
			"click":that.rowclick.bind(that),
			"change":function(),
			"mousemove":function()
				//更改鼠标样式
				if (event.offsetY > this.offsetHeight - 10)
					this.style.cursor = 'row-resize';
				else
					this.style.cursor = 'default';
			,
			"contextmenu":that.rowcontextmenu.bind(that)
		
	);
	that.focus["RowsSize"].push("25px")

渲染单元格

这是渲染结果

var cellsTags = [];
col = "A";
for(i = 1; !(i > y); i++ )
	while(col != x)

		cellsTags.push(
			"Tag" : "div", "ID" : col+i, "ClassName" : "cells__input", "Text" : "",
			"Data" : [
				 "k":"merge", "v": col+i+":"+col+i ,
				 "k":"t", "v":"" ,
				 "k":"v", "v":"" ,
				 "k":"w", "v":"" ,
				 "k":"f", "v":"" ,
				 "k":"x", "v":""+col ,
				 "k":"y", "v":i 
			],
			"Action":
				"click":that.cellclick.bind(that),
				"dblclick":that.celldblclick.bind(that),
				"change":that.cellchange.bind(that),
				"mouseover":that.cellmouseover.bind(that),
				"mouseout":that.cellmouseout.bind(that),
				"mousedown":that.cellmousedown.bind(that),
				"mouseup":that.cellmouseup.bind(that),
				"contextmenu":that.cellcontextmenu.bind(that)
			
		);
		
		col = that.charcode.excel_Row_Increase(col,1);
	
	col = "A";


this.renderDOM('cells',cellsTags,function(target) ,function(target) );

在这