用JS自制表格软件玩数据4. 行列计数器的实现
Posted 妇男主任
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用JS自制表格软件玩数据4. 行列计数器的实现相关的知识,希望对你有一定的参考价值。
渲染单元格
当写完本系列后,我会把源代码分享出来给大家。本课程也会持续更新与矫正。欢迎留言指正!
前面已经设计了一个底层渲染类,现在准备在这个底层类的基础上,构建一个渲染单元格的模块。
列计数器
通常在 Excel 表格中,我们会看到横向的标尺使用了:A,B,C,D之类的字母作为标记。
原理
字母的显示,一般都是使用了ASCII码进行表示的,所以,大写字母的 A-Z 是从 65 开始的,到 90 结束。
二进制 | 十进制 | 十六进制 | 缩写/字符 | 解释 |
00000000 | 0 | 00 | NUL(null) | 空字符 |
00000001 | 1 | 01 | SOH(start of headling) | 标题开始 |
00000010 | 2 | 02 | STX (start of text) | 正文开始 |
00000011 | 3 | 03 | ETX (end of text) | 正文结束 |
00000100 | 4 | 04 | EOT (end of transmission) | 传输结束 |
00000101 | 5 | 05 | ENQ (enquiry) | 请求 |
00000110 | 6 | 06 | ACK (acknowledge) | 收到通知 |
00000111 | 7 | 07 | BEL (bell) | 响铃 |
00001000 | 8 | 08 | BS (backspace) | 退格 |
00001001 | 9 | 09 | HT (horizontal tab) | 水平制表符 |
00001010 | 10 | 0A | LF (NL line feed, new line) | 换行键 |
00001011 | 11 | 0B | VT (vertical tab) | 垂直制表符 |
00001100 | 12 | 0C | FF (NP form feed, new page) | 换页键 |
00001101 | 13 | 0D | CR (carriage return) | 回车键 |
00001110 | 14 | 0E | SO (shift out) | 不用切换 |
00001111 | 15 | 0F | SI (shift in) | 启用切换 |
00010000 | 16 | 10 | DLE (data link escape) | 数据链路转义 |
00010001 | 17 | 11 | DC1 (device control 1) | 设备控制1 |
00010010 | 18 | 12 | DC2 (device control 2) | 设备控制2 |
00010011 | 19 | 13 | DC3 (device control 3) | 设备控制3 |
00010100 | 20 | 14 | DC4 (device control 4) | 设备控制4 |
00010101 | 21 | 15 | NAK (negative acknowledge) | 拒绝接收 |
00010110 | 22 | 16 | SYN (synchronous idle) | 同步空闲 |
00010111 | 23 | 17 | ETB (end of trans. block) | 传输块结束 |
00011000 | 24 | 18 | CAN (cancel) | 取消 |
00011001 | 25 | 19 | EM (end of medium) | 介质中断 |
00011010 | 26 | 1A | SUB (substitute) | 替补 |
00011011 | 27 | 1B | ESC (escape) | 溢出 |
00011100 | 28 | 1C | FS (file separator) | 文件分割符 |
00011101 | 29 | 1D | GS (group separator) | 分组符 |
00011110 | 30 | 1E | RS (record separator) | 记录分离符 |
00011111 | 31 | 1F | US (unit separator) | 单元分隔符 |
00100000 | 32 | 20 | (space) | 空格 |
00100001 | 33 | 21 | ! | |
00100010 | 34 | 22 | " | |
00100011 | 35 | 23 | # | |
00100100 | 36 | 24 | $ | |
00100101 | 37 | 25 | % | |
00100110 | 38 | 26 | & | |
00100111 | 39 | 27 | ' | |
00101000 | 40 | 28 | ( | |
00101001 | 41 | 29 | ) | |
00101010 | 42 | 2A | * | |
00101011 | 43 | 2B | + | |
00101100 | 44 | 2C | , | |
00101101 | 45 | 2D | - | |
00101110 | 46 | 2E | . | |
00101111 | 47 | 2F | / | |
00110000 | 48 | 30 | 0 | |
00110001 | 49 | 31 | 1 | |
00110010 | 50 | 32 | 2 | |
00110011 | 51 | 33 | 3 | |
00110100 | 52 | 34 | 4 | |
00110101 | 53 | 35 | 5 | |
00110110 | 54 | 36 | 6 | |
00110111 | 55 | 37 | 7 | |
00111000 | 56 | 38 | 8 | |
00111001 | 57 | 39 | 9 | |
00111010 | 58 | 3A | : | |
00111011 | 59 | 3B | ; | |
00111100 | 60 | 3C | < | |
00111101 | 61 | 3D | = | |
00111110 | 62 | 3E | > | |
00111111 | 63 | 3F | ? | |
01000000 | 64 | 40 | @ | |
01000001 | 65 | 41 | A | |
01000010 | 66 | 42 | B | |
01000011 | 67 | 43 | C | |
01000100 | 68 | 44 | D | |
01000101 | 69 | 45 | E | |
01000110 | 70 | 46 | F | |
01000111 | 71 | 47 | G | |
01001000 | 72 | 48 | H | |
01001001 | 73 | 49 | I | |
01001010 | 74 | 4A | J | |
01001011 | 75 | 4B | K | |
01001100 | 76 | 4C | L | |
01001101 | 77 | 4D | M | |
01001110 | 78 | 4E | N | |
01001111 | 79 | 4F | O | |
01010000 | 80 | 50 | P | |
01010001 | 81 | 51 | Q | |
01010010 | 82 | 52 | R | |
01010011 | 83 | 53 | S | |
01010100 | 84 | 54 | T | |
01010101 | 85 | 55 | U | |
01010110 | 86 | 56 | V | |
01010111 | 87 | 57 | W | |
01011000 | 88 | 58 | X | |
01011001 | 89 | 59 | Y | |
01011010 | 90 | 5A | Z | |
01011011 | 91 | 5B | [ | |
01011100 | 92 | 5C | \\ | |
01011101 | 93 | 5D | ] | |
01011110 | 94 | 5E | ^ | |
01011111 | 95 | 5F | _ | |
01100000 | 96 | 60 | ` | |
01100001 | 97 | 61 | a | |
01100010 | 98 | 62 | b | |
01100011 | 99 | 63 | c | |
01100100 | 100 | 64 | d | |
01100101 | 101 | 65 | e | |
01100110 | 102 | 66 | f | |
01100111 | 103 | 67 | g | |
01101000 | 104 | 68 | h | |
01101001 | 105 | 69 | i | |
01101010 | 106 | 6A | j | |
01101011 | 107 | 6B | k | |
01101100 | 108 | 6C | l | |
01101101 | 109 | 6D | m | |
01101110 | 110 | 6E | n | |
01101111 | 111 | 6F | o | |
01110000 | 112 | 70 | p | |
01110001 | 113 | 71 | q | |
01110010 | 114 | 72 | r | |
01110011 | 115 | 73 | s | |
01110100 | 116 | 74 | t | |
01110101 | 117 | 75 | u | |
01110110 | 118 | 76 | v | |
01110111 | 119 | 77 | w | |
01111000 | 120 | 78 | x | |
01111001 | 121 | 79 | y | |
01111010 | 122 | 7A | z | |
01111011 | 123 | 7B | ||
01111100 | 124 | 7C | | | |
01111101 | 125 | 7D | ||
01111110 | 126 | 7E | ~ | |
01111111 | 127 | 7F | DEL (delete) | 删除 |
这个就要做一个表格坐标计数器来做统计。
步进器
首先设计一个步进器:
/**
* @property Function excel_Row_Increase 行移动定位
* @param String chr 例如:A1
* @param String num 例如:步进
* @returns Array 返回字符串数组,["A","1"]
*/
excel_Row_Increase(chr,num)
this.caculate = function(chr,num)
var carry = num; // 进位标志
let temp = chr.split("");
var count = temp.length-1;
while(!(count < 0))
let code = this.charmap[temp[count]] + carry;
carry = 0;
if (code > 64 && code < 91)
temp[count] = String.fromCharCode(code);
while(code < 65)
carry--;
code = code + 26;
if(code > 64)
temp[count] = String.fromCharCode(code);
break;
while(code > 90)
carry++;
code = code - 26;
if(code < 91)
temp[count] = String.fromCharCode(code);
break;
count--;
var chr = temp.join("");
if(chr == "A" && carry < 0)
return
"carry":0,
"char": chr
else
return
"carry":carry,
"char":chr
var result = this.caculate(chr,num);
var ttt;
while(result["carry"]!=0)
ttt = this.caculate("A",--result["carry"]);
result["char"] = ttt["char"]+result["char"];
result["carry"] = ttt["carry"];
return result["char"];
字符的运算表
接着,使用步进器创建了一个字符的运算表,这样它就可以快速运算了。
/**
* @property Function setcaculatemap 创建字母运算表
* @returns NaN 无返回
*/
setcaculatemap()
var begin = "A";
var mapsize = this.mapsize;
this.caculatemap = [""];
while(mapsize)
this.caculatemap.push(begin);
var begin = this.excel_Row_Increase(begin,1)
mapsize--;
源码
直接上全部代码:
/**
* 字符转编码
*/
class charcode
/**
* 创建字符映射集
*/
constructor()
this.charmap = ;
var ord = 65;
var ordmax = ord+26;
while(ord < ordmax)
this.charmap[String.fromCharCode(ord)] = ord;
ord++;
ord = 65+32;
ordmax = ord+26;
while(ord < ordmax)
this.charmap[String.fromCharCode(ord)] = ord-32;
ord++;
this.caculatemap = [];
this.mapsize = 20;
this.setcaculatemap();
// console.log(this.caculatemap);
this.RowColcountMap = ;
/**
* @property Function setcaculatemap 创建字母运算表
* @returns NaN 无返回
*/
setcaculatemap()
var begin = "A";
var mapsize = this.mapsize;
this.caculatemap = [""];
while(mapsize)
this.caculatemap.push(begin);
var begin = this.excel_Row_Increase(begin,1)
mapsize--;
/**
* @property Function countelementToindex 计算坐标在单元格的位置
* @param String x 输入编码,表格的横向尺寸
* @param Number y 输入编码,表格的纵向尺寸
* @param String elementIndex 输入编码
* @returns Number 返回数字坐标
*/
countelementToindex(x,y,elementIndex)
var count = this.CharToDecimal(x); // 字符转坐标
var titlecount = count+y+1; // 标头长度
// var max = count*(y); // 表格总尺寸
var ttt = this.getRowCol(elementIndex); // 分离行列
var currentX = this.caculatemap.indexOf(ttt[0]) // 获取行的坐标
return count*(ttt[1]-1)+currentX+titlecount-1;
/**
* @property Function countindexToelement 将当前位置转化为坐标
* @param String x 输入编码,表格的横向尺寸
* @param Number y 输入编码,表格的纵向尺寸
* @param Number index 输入位置
* @returns Number 返回坐标
*/
countindexToelement(x,y,index)
var count = this.CharToDecimal(x); // 字符转坐标,获得横向的宽度
var titlecount = count+y+1; // 标头总数量
var max = count*(y); // 表格总尺寸
var A = titlecount; // 获取A的位置
var ttt = index-A+1; // 获取输入框的总个数
if(ttt >= count)
var mod = ttt%count;
if(mod != 0)
return this.caculatemap[mod]+(parseInt(ttt/count)+1)
else
return this.caculatemap[count]+(parseInt(ttt/count))
else
return this.caculatemap[ttt]+1
/**
* @property Function CHR 编码转字符
* @param Number ord 输入编码
* @returns String 返回字符编码
*/
CHR(ord)
return String.fromCharCode(ord);
/**
* @property Function ORD 字符转编码
* @param String chr 输入字符串
* @returns Number 返回字符编码
*/
ORD(chr)
return chr.charCodeAt(0);
/**
* @property Function CharToDecimal 进制字符转十进制
* @param String chr 输入字符串
* @returns Number 返回十进制编码
*/
CharToDecimal(Char)
var Decimal = this.caculatemap.indexOf(Char);
while(Decimal < 0)
this.mapsize = this.mapsize*10;
this.setcaculatemap();
Decimal = this.caculatemap.indexOf(Char);
return Decimal;
/**
* @property Function DecimalToChar 十进制转字符进制
* @param Number Decimal 输入十进制
* @returns String 返回字符进制
*/
DecimalToChar(Decimal)
var length = this.caculatemap.length-1;
var balance = Decimal - length;
if(balance > 0)
this.mapsize = this.mapsize+balance+1;
this.setcaculatemap();
return this.caculatemap[Decimal];
/**
* @property Function CharAdd 字母相加
* @param String CharA 输入字符
* @param String CharB 输入字符
* @returns Number 返回十进制编码
*/
CharAdd(CharA,CharB) // 字母相加
return this.CharToDecimal(CharA)+this.CharToDecimal(CharB)
/**
* @property Function CharMinus 字母相减
* @param String CharA 输入字符
* @param String CharB 输入字符
* @returns Number 返回十进制编码
*/
CharMinus(CharA,CharB) // 字母相减
return this.CharToDecimal(CharA)-this.CharToDecimal(CharB)
/**
* @property Function getRowCol 从行列串中分离出行与列
* @param String RC 行列串,例如:A1
* @returns Array 返回字符串数组,["A","1"]
*/
getRowCol(RC)
var Row = [];
var Col = [];
for(var i in RC)
this.charmap.hasOwnProperty(RC[i])?Col.push(RC[i]):Row.push(RC[i]);
return [Col.join(""),Row.join("")]
/**
* @property Function setRectanglecorner 设置四个坐标角落
* @param String a 坐标,例如:A1
* @param String b 坐标,例如:B2
* @returns Array 返回字符串数组,["A","1"]
*/
setRectanglecorner(a,b)
var RSort = [];
var CSort = [];
var aRC = this.getRowCol(a);
var bRC = this.getRowCol(b);
var Rdistance = this.CharMinus(bRC[0],aRC[0]);
if(Rdistance < 0)
RSort = [bRC[0],aRC[0]];
else
RSort = [aRC[0],bRC[0]];
if(bRC[1]-aRC[1]<0)
CSort = [bRC[1],aRC[1]];
else
CSort = [aRC[1],bRC[1]];
return [[RSort[0],CSort[0]],[RSort[1],CSort[1]]]
/**
* @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 excel_Row_Increase 行移动定位
* @param String chr 例如:A1
* @param String num 例如:步进
* @returns Array 返回字符串数组,["A","1"]
*/
excel_Row_Increase(chr,num以上是关于用JS自制表格软件玩数据4. 行列计数器的实现的主要内容,如果未能解决你的问题,请参考以下文章
用JS自制表格软件玩数据7. 设计常用的样式功能与单元格合并