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

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

效果图

基本数据

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

/**
* @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;
}

最终结果

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