用JS自制表格软件玩数据6. 单元格的多选
Posted 妇男主任
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用JS自制表格软件玩数据6. 单元格的多选相关的知识，希望对你有一定的参考价值。
单元格的框选，列选择，行选择
当写完本系列后，我会把源代码分享出来给大家。本课程也会持续更新与矫正。欢迎留言指正！
框选
在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]用JS自制表格软件玩数据7. 设计常用的样式功能与单元格合并