当写完本系列后,我会把源代码分享出来给大家。本课程也会持续更新与矫正。欢迎留言指正!
框选
在Excel 表格中,一般我们会出一片区域来批量修改数据。现在要来实现这个过程。
如图所示:框选从 B2 开始,至 E8 结束。
实际上,框选会有4 种可能:
- 从B2开始,E8 结束
- 从B8开始,E2 结束
- 从 E2 开始,E8 结束
- 从 E8 开始,E2 结束
/**
* @property {Function} CharMinus 字母相减
* @param {String} CharA 输入字符
* @param {String} CharB 输入字符
* @returns {Number} 返回十进制编码
*/
CharMinus(CharA,CharB){ // 字母相减
return this.CharToDecimal(CharA)-this.CharToDecimal(CharB)
}
/**
* @property {Function} GetRectangle 计算出框选区域
* @param {String} from 行列串,例如:A1
* @param {String} to 行列串,例如:B2
* @returns {Array} 返回字符串数组,["A","1"]
*/
GetRectangle(from,to){
var t = this.setRectanglecorner(from,to);
var fromRC = t[0];
var toRC = t[1];
var distance = [
this.CharMinus(toRC[0],fromRC[0]),
toRC[1]-fromRC[1]
]
// console.log(fromRC);
// console.log(toRC);
// console.log(distance);
var Rowcount = parseInt(fromRC[1])+distance[1]+1;
var ColList = this.caculatemap.slice(this.CharToDecimal(fromRC[0]),this.CharToDecimal(fromRC[0])+distance[0]+1);
var length = ColList.length;
var Rectangle = [];
for(var i = 0;i<length;i++){
for(var j = fromRC[1];j<Rowcount;j++){
Rectangle.push(ColList[i]+j);
}
}
return {
"Rowlength":Rowcount-parseInt(fromRC[1]),
"Collength":length,
"Rectangle":Rectangle
};
}
列选择
/**
* @property {Function} colclick 点击列标头
* @param {Object} ev
* @returns {Boolean} 返回点击结果
*/
colclick(ev){
var that = this
that.emptyselectcells();
var target = ev.target || ev.srcElement;
console.log("选择"+target.getAttribute("id")+"列");
var ii = that.searchcolInCells( target )
// console.log(that.focus["sheets_size"][0],that.focus["sheets_size"][1])
// console.log(ii)
var cells__inputs = document.getElementsByClassName("cells__input");
var length = cells__inputs.length;
for(var row = 1;row<that.focus["sheets_size"][1]+1;row++){
var i = ii+(row-1)*that.charcode.CharToDecimal(that.focus["sheets_size"][0])
console.log(i)
cells__inputs[i].style.backgroundColor = "#f3f2f1";
that.focus["cells"].push(that.getThisTargetIndex(cells__inputs[i]));
}
that.focus["x"] = -1;
that.focus["y"] = -1;
console.log(that.focus["cells"]);
return false;
}
行选择
/**
* @property {Function} rowclick 点击行标头
* @param {Object} ev
* @returns {Boolean} 返回点击结果
*/
rowclick(ev){
var that = this
that.emptyselectcells();
var target = ev.target || ev.srcElement;
console.log("选择"+target.getAttribute("id")+"行");
var cells__inputs = document.getElementsByClassName("cells__input");
var length = cells__inputs.length;
for(var i = 0;i<length;i++){
if(cells__inputs[i].getAttribute("data-y") == target.getAttribute("id")){
cells__inputs[i].style.backgroundColor = "#f3f2f1";
that.focus["cells"].push(cells__inputs[i].getAttribute("id"));
}
}
that.focus["x"] = -1;
that.focus["y"] = -1;
console.log(that.focus["cells"]);
return false;
}
列的右键菜单
colcontextmenu(ev){
var that = this
/*
弹出菜单
*/
var target = ev.target || ev.srcElement;
var contextmenulist = [];
contextmenulist.push({
"icon": "",
"name": "插入列",
"event": function () {
var mainid = target.getAttribute("id");
console.log(this.name, that.focus);
console.log(mainid);
var cells = document.getElementById("cells"); // 获取父节点
var index;
var Celement;
var tempCache = [];
that.focus["ColumnsSize"].push("200px");
that.makeColumnsSize(that.focus["ColumnsSize"]);
for(var i in that.focus["cells"]){
// 根据表的尺寸,计算出相应的坐标
index = that.charcode.countelementToindex(that.focus["sheets_size"][0],that.focus["sheets_size"][1],that.focus["cells"][i]);
// 将计算出的元素压入临时缓冲
tempCache.push(document.getElementById("cells").childNodes[index]);
}
that.emptyselectcells();
Celement = document.createElement('div');
Celement = that.creatElement({
"Tag" : "div",
"ID" : that.creatGlobalId(),
"ClassName" : "cells__alphabet",
"Data" : [
{ "k":"x", "v":"" },
{ "k":"y", "v":"" }
],
"Action":{
"click":that.colclick.bind(that),
"change":function(){},
"contextmenu":that.colcontextmenu.bind(that)
}
});
cells.insertBefore(Celement, document.getElementById(mainid)); // 在列标头前插入新元素
var cells__alphabets = document.getElementsByClassName("cells__alphabet");
var cells__alphabetcount = cells__alphabets.length;
console.log("列标头总数:"+cells__alphabetcount);
var step = "A";
for(var i = 0;i < cells__alphabetcount;i++){
cells__alphabets[i].setAttribute("data-x",step);
cells__alphabets[i].setAttribute("data-y","0");
cells__alphabets[i].innerHTML = step;
step = that.charcode.excel_Row_Increase(step,1);
}
that.focus["sheets_size"][0] = that.charcode.excel_Row_Increase(that.focus["sheets_size"][0],1);
for(var i in tempCache){
Celement = that.creatElement({
"Tag" : "div",
"ID" : that.creatGlobalId(),
"ClassName" : "cells__input",
"Data" : [
{ "k":"x", "v":"" },
{ "k":"y", "v":"" }
],
"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)
}
});
cells.insertBefore(Celement, tempCache[i]); // 在列元素前插入新元素
}
}
});
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.colclick(ev)
}
行的右键菜单
rowcontextmenu(ev){
var that = this
console.log("表格尺寸"+that.focus["sheets_size"]);
/*
弹出菜单
*/
console.log(this)
var target = ev.target || ev.srcElement;
var contextmenulist = [];
contextmenulist.push({
"icon": "",
"name": "插入行",
"event": function () {
var mainid = target.getAttribute("id");
console.log(this.name, that.focus);
console.log(mainid);
var cells = document.getElementById("cells"); // 获取父节点
var index;
var Celement;
var tempCache = [];
that.focus["RowsSize"].push("25px");
that.makeRowsSize(that.focus["RowsSize"]);
for(var i in that.focus["cells"]){
// 根据表的尺寸,计算出相应的坐标
index = that.charcode.countelementToindex(that.focus["sheets_size"][0],that.focus["sheets_size"][1],that.focus["cells"][i]);
// 将计算出的元素压入临时缓冲
tempCache.push(document.getElementById("cells").childNodes[index]);
}
// 根据表的尺寸,计算出相应的坐标
index = that.charcode.countelementToindex(that.focus["sheets_size"][0],that.focus["sheets_size"][1],that.focus["cells"][0]);
var icell = document.getElementById("cells").childNodes[index];
that.emptyselectcells();
Celement = document.createElement('div');
Celement = that.creatElement({
"Tag" : "div",
"ID" : that.creatGlobalId(),
"ClassName" : "cells__number",
"Data" : [
{ "k":"x", "v":"" },
{ "k":"y", "v":"" }
],
"Action":{
"click":that.rowclick.bind(that),
"change":function(){},
"contextmenu":that.rowcontextmenu.bind(that)
}
});
cells.insertBefore(Celement, document.getElementById(mainid)); // 在列标头前插入新元素
var cells__number = document.getElementsByClassName("cells__number");
var cells__numbercount = cells__number.length;
console.log("行标头总数:"+cells__numbercount);
for(var i = 0;i < cells__numbercount;i++){
cells__number[i].setAttribute("data-x","0");
cells__number[i].setAttribute("data-y",""+(i+1));
cells__number[i].innerHTML = ""+(i+1);
}
that.focus["sheets_size"][1] = that.focus["sheets_size"][1]+1;
var stop = that.charcode.excel_Row_Increase(that.focus["sheets_size"][0],1);
for(var i = "A"; i != stop; i = that.charcode.excel_Row_Increase(i,1)){
Celement = that.creatElement({
"Tag" : "div",
"ID" : that.creatGlobalId(),
"ClassName" : "cells__input",
"Data" : [
{ "k":"x", "v": i },
{ "k":"y", "v":"" }
],
"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)
}
});
cells.insertBefore(Celement, icell); // 在列元素前插入新元素
}
}
});
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.emptyselectcells();
var target = ev.target || ev.srcElement;
console.log("选择"+target.getAttribute("id")+"行");
var cells__inputs = document.getElementsByClassName("cells__input");
var length = cells__inputs.length;
for(var i = 0;i<length;i++){
if(cells__inputs[i].getAttribute("data-y") == target.getAttribute("id")){
cells__inputs[i].style.backgroundColor = "#f3f2f1";
that.focus["cells"].push(cells__inputs[i].getAttribute("id"));
}
}
that.focus["x"] = -1;
that.focus["y"] = -1;
console.log(that.focus["cells"]);
/*
整行标上底色
*/
that.rowclick(ev)
}