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

前面已经设计了一个底层渲染类，现在准备在这个底层类的基础上，构建一个渲染单元格的模块。

列计数器

通常在 Excel 表格中，我们会看到横向的标尺使用了：A,B,C,D之类的字母作为标记。

原理

字母的显示，一般都是使用了ASCII码进行表示的，所以，大写字母的 A-Z 是从 65 开始的，到 90 结束。

这个就要做一个表格坐标计数器来做统计。

步进器

首先设计一个步进器：

/**
* @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){
		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"];

	}
}