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

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

效果图

基本数据

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

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


分析

功能

cellcontextmenu(ev){var that &＃61; this// 一个复制对象的函数function copy (array) {let newArray &＃61; []for(let item of array) {newArray.push(item);}return newArray;}var target &＃61; ev.target || ev.srcElement;// 将前面的菜单配置文件复制一个副本出来var contextmenulist &＃61; copy(that.contextmenulist);// 这个地方是将菜单项的列表渲染出来&＃xff0c;具体的代码可以看下面的代码块that.updata_contextmenulist(contextmenulist,that.right__menu_list)console.log("单元格右击",target.getAttribute("data-x"),target.getAttribute("data-y"))// 前面渲染成功后的菜单是透明不可见的&＃xff0c;下面的代码要把渲染的菜单&＃xff0c;显示出来var oDiv &＃61; document.getElementById(that.right__menu);oDiv.style.display &＃61; "block";oDiv.style.left &＃61; ev.clientX&＃43;"px";oDiv.style.top &＃61; ev.clientY&＃43;"px";that.focus["x"] &＃61; target.getAttribute("data-x");that.focus["y"] &＃61; target.getAttribute("data-y");console.log(that.focus);}


菜单的渲染模块

updata_contextmenulist(contextmenulist,id){ // 鼠标右键菜单刷新this.empty_id(id)var len &＃61; contextmenulist.length;var Tags &＃61; [];for(var i &＃61; 0; i < len; i&＃43;&＃43; ){// 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 &＃61; ev.target || ev.srcElement;console.log("右键菜单按钮"&＃43;target.getAttribute("data-id")&＃43;"点击事件");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;
}


最终结果

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