用JS自制表格软件玩数据8. 设计单元格中的右键菜单

Posted 2022-11-15 妇男主任

右键菜单选项的设计

• 效果图
• 基本数据
• • 分析
• 功能
• 菜单的渲染模块
• 右键菜单的样式
• 最终结果

当写完本系列后，我会把源代码分享出来给大家。本课程也会持续更新与矫正。欢迎留言指正！

效果图

基本数据

首先构建一个基本的配置数据

/**
* @property Array contextmenulist 右键菜单列表
 */
this.contextmenulist = [
	
		"icon": "",
		"name": "复制",
		"event": function ()  
	,
	
		"icon": "",
		"name": "剪切",
		"event": function ()  
	,
	
		"icon": "",
		"name": "粘贴",
		"event": function ()  
	,
	
		"icon": "",
		"name": "清空全部格式",
		"event": function () 
			var cells__inputs = document.getElementsByClassName("cells__input");
			var length = cells__inputs.length;
			for(var i = 0;i<length;i++)
				cells__inputs[i].setAttribute("style","");
			
		
	
];

分析

属性	说明
icon	图标
name	按钮的文字
event	点击该按钮后会执行的代码

功能

	cellcontextmenu(ev)
		var that = this

		// 一个复制对象的函数
		function copy (array) 
			let newArray = []
			for(let item of array) 
				newArray.push(item);
			
			return  newArray;
		
		
		var target = ev.target || ev.srcElement;

		// 将前面的菜单配置文件复制一个副本出来
		var contextmenulist = copy(that.contextmenulist);

		// 这个地方是将菜单项的列表渲染出来，具体的代码可以看下面的代码块
		that.updata_contextmenulist(contextmenulist,that.right__menu_list)

		console.log("单元格右击",target.getAttribute("data-x"),target.getAttribute("data-y"))

		// 前面渲染成功后的菜单是透明不可见的，下面的代码要把渲染的菜单，显示出来
		var oDiv = document.getElementById(that.right__menu);
		oDiv.style.display = "block";
		oDiv.style.left = ev.clientX+"px";
		oDiv.style.top = ev.clientY+"px";
		that.focus["x"] = target.getAttribute("data-x");
		that.focus["y"] = target.getAttribute("data-y");
		console.log(that.focus);
	

菜单的渲染模块

updata_contextmenulist(contextmenulist,id) // 鼠标右键菜单刷新
	this.empty_id(id)
	var len = contextmenulist.length;
	var Tags = [];
	for(var i = 0; i < len; i++ )
		// right__menu__element 是菜单的样式
		Tags.push(
			"Tag" : "li", "ID" : this.creatGlobalId(), "ClassName" : "right__menu__element", "Text":contextmenulist[i]["name"],
			"Data" : [
				 "k":"id", "v":i 
			],
			"Action":
				"click":function(ev)
					var target = ev.target || ev.srcElement;
					console.log("右键菜单按钮"+target.getAttribute("data-id")+"点击事件");
					contextmenulist[target.getAttribute("data-id")]["event"]();
				
			
		);
	
	this.renderDOM(id,Tags,function(target),function(target));

右键菜单的样式

.right__menu
	position: absolute;
	background: #fff;
	border: 1px solid black;
	display: none;


.right__menu__element
	list-style-type: none;
	margin: 10px;
	text-align: left;
	cursor:default;

最终结果

这个右键菜单会跟着鼠标的位置一起展示，如果点击其他位置，它就会消失。这里面用到了事件的冒泡机制。我后面会在更深一步介绍渲染器的代码里详细介绍到。