标签：
本文旨在讲述一个控件的开发流水账式的故事，下图是本文所要讲述的表格控件的运行截图：
今天（2015.3.16）是这个插件正式停止开发一周年纪念日，于是我决定写一篇文章悼念一下。
按照惯例，我把这回讲的程序放了在runjs上：http://runjs.cn/detail/gcdxdyct。
这个表格具有比较完整的编辑功能，包括生成下拉框、日期控件、像excel那样子通过鼠标拖动批量选择、批量编辑、通过拖表自动生成数据、与excel互相复制粘贴、导入导出xlsx等，但是已经没有使用的需求了，所以就停止了开发，封存了起来。
在做这个之前，我对WebApp是处于比较陌生的状态的，时至今日，回头看当初的代码，尽管不少地方都让今天的我觉得不妥，却总是能发现在渐渐熟悉WebApp开发之后所忘记的一些方法，因此，此文也是我的一个复习。
0.起源
在2013年的9月前后，我在一家游戏公司里担任服务端程序开发的工作，同时也兼任游戏后台管理系统的开发，这个管理系统基于PHP，主要用于管理游戏的配置、日志的监控、游戏的热更新等，现在，这个公司貌似不存在了，于是我可以比较放心地讲述一下在那期间我所做的一个小东西。
起源是上述的游戏配置系统。一个游戏里有数十上百个子功能，每一个功能都有着许多需要由策划来填写的配置项，譬如物品，物品的配置是一个二维表，策划们需要在物品表中配置成千上万个物品,如下图：
由于这个后台是数年前开发的，因此也没用到响应式技术，对于每一件物品，策划们需要点击“添加”，进入另一个页面后填写物品信息以完成添加操作，修改也是需要点击“修改”跳转到另一个页面去完成，上图只显示了几列属性，而事实上，要支撑一个游戏的运行，物品表有数十列属性，于是当游戏运营到后期，这种编辑变得十分艰难。
不止物品表，其实游戏中几乎所有配置都是这样子的二维表，需要批量编辑的时候，策划们在Excel中完成后，通过PHP程序导入到数据库。
后来，在我接手这个后台的后续开发工作之后，应策划们的要求，我先是把大量的编辑操作改为了ajax，也添加了大量DOM操作使得编辑更加简单，当这种优化修改持续了大概两个月后，一位策划提出了一个神奇的需求：
“能不能像excel那样子去操作？”
1.雏形
在经典的HTML应用里，表格就是table。
在后来出现的许多表格插件中，div成为了表格的躯干。
截至目前，有许许多多的表格插件，有的是面向编辑的，有的是面向显示的，有的是为了呈现更好的排版，有的是为了让人操作更加顺手。
而这位策划提出需求的时候，我花费了一整天之后也没找到有这样的表格插件可供使用。
那就自己写？
一开始的思路很简单，不就是要做一个数据编辑的控件嘛？那么，首先来解决把已有数据显示出来的问题？
在我的设想中，这个控件是这样初始化起来的：
1、PHP从数据库中获取整个数据表的数据，json_encode之后传到页面上来，假设这个数据存在变量data里；
2、页面加载完之后，调用new Table(‘#table-div‘, data);生成表格。
既然如此，那我再想象一下，这个data里边，需要有什么样的内容，以供生成一个表格？
必须的两部分是表头与表的数据，我把格式定为：
var data = {
col : [
{
name : ‘id‘,
display : ‘编号‘
},
{
name : ‘name‘,
display : ‘名字‘
},
{
name : ‘sex‘,
display : ‘性别‘
}
],
row : [
{
id : ‘1‘,
name : ‘张三‘,
sex : ‘男‘
},
{
id : ‘2‘,
name : ‘李四‘,
sex : ‘女‘
},
]
};
其中，col定义了表头，row中包含了数据。
下一步就是让表格显示出来，我设计Table函数在接收到上面的数据时生成如下结构的一段HTML：
<div class="hd"> <div class="col">编号</div> <div class="col">名字</div> <div class="col">性别</div> </div> <div class="row"> <div class="col">1</div> <div class="col">张三</div> <div class="col">男</div> </div> <div class="row"> <div class="col">2</div> <div class="col">李四</div> <div class="col">女</div> </div>
在定义了几个简单的样式之后，我开始思考如何安排一系列的鼠标事件处理函数。
1.统一处理事件
按照需求，毫无疑问，这个表格控件将会有非常多的交互操作，包括：
1、点击某个单元格时选中单元格、在某个地方显示出单元格里的完整内容，同时选中行列信息；
2、按下并拖动鼠标的时候，开启多选模式，在鼠标释放的时候把选中区域勾选出来；
3、某些区域被选中之后，按着ctrl继续选择更多的单元格；
4、某些区域被选中之后，点击单元格右下方的小点可以扩大单元格并自动填充；
5、在单元格上按下方向键的时候可移动光标，按下某些按键进入编辑；
……
因此，我抽离出了一个Mouse对象和Keyboard对象，用于存放一系列基本的EventListener。
Keyboard : {
// 键盘码
KEY_A : 65, KEY_B : 66, KEY_C : 67, KEY_D : 68, KEY_E : 69, KEY_F : 70, KEY_G : 71, KEY_H : 72,
KEY_I : 73, KEY_J : 74, KEY_K : 75, KEY_L : 76, KEY_M : 77, KEY_N : 78, KEY_O : 79, KEY_P : 80,
KEY_Q : 81, KEY_R : 82, KEY_S : 83, KEY_T : 84, KEY_U : 85, KEY_V : 86, KEY_W : 87, KEY_X : 88,
KEY_Y : 89, KEY_Z : 90, KEY_0 : 48, KEY_1 : 49, KEY_2 : 50, KEY_3 : 51, KEY_4 : 52, KEY_5 : 53,
KEY_6 : 54, KEY_7 : 55, KEY_8 : 56, KEY_9 : 57,
KEY_NUM_1 : 96, KEY_NUM_2 : 97, KEY_NUM_3 : 98, KEY_NUM_4 : 99, KEY_NUM_5 : 100,
KEY_NUM_6 : 101, KEY_NUM_7 : 102, KEY_NUM_8 : 103, KEY_NUM_9 : 104, KEY_NUM_0 : 105,
KEY_ESC : 27, KEY_ENTER : 13, KEY_SPACE : 32,
KEY_LEFT : 37, KEY_UP : 38, KEY_RIGHT : 39, KEY_DOWN : 40,
KEY_SHIFT : 16, KEY_CTRL : 17, KEY_ALT : 18,
// 右键菜单可见时对键盘的响应
menu_down : function(keyCode){
},
// 通常状态下对键盘的响应
down : function(e){
},
up : function(e){
}
},
// 鼠标事件
Mouse : {
table_down : function(e){
},
table_move_auto : function(e){
},
table_move : function(e){
},
table_up : function(e){
},
table_leave : function(e){
},
table_dblclick : function(e){
},
table_scroll : function(e, d, dx, dy){
}
}
然后，在Table的构造函数里，定义两个对象用于存储鼠标键盘的状态：
this.mouse = {
// override为true时大部分作用在表格本体上的鼠标事件不响应
override : false,
// 拖放起始点及结束点
dragStartX : null,
dragStartY : null,
dragOverX : null,
dragOverY : null,
// 点击坐标
clickX : null,
clickY : null,
// 滚动条鼠标响应
scrollV : false,
scrollH : false,
scroll_y : 0,
scroll_x : 0
}
this.keyboard = {
// override为true时大部分作用在表格本体上的键盘事件不响应
override : false,
ctrlKey : false,
shiftKey : false
}
表格当中有许多的元素，然而，我想要让所有鼠标点击事件都集中到一个元素中来处理，那么，最简单的实现方法就是用一个透明的遮罩去盖住整个表格，阻止所有元素的鼠标事件产生，接下来，一切操作都可以基于这个遮罩所接受到得鼠标事件进行处理了。
2.单元格的定位
当鼠标按下或者拖动、释放的时候，如何得知当前操作的单元格是哪个？
这个问题的解决思路很清晰：
1、MouseEvent.clientX、MouseEvent.clientY记录了事件发生的坐标；
2、单元格的行高是固定的，因此要知道事件发生在哪一行，只要用(clientY-表格当前屏的偏移) / 行高；
3、单元格每一列下面所有格子的宽度都是固定的，因此，只要记录下每一列的宽度及起始x值，就能通过遍历找到事件发生在哪一列，也因此，我给data.col的每一项添加了一个可选的配置参数“width”，用于控制每一列的初始宽度；
因为这个表格控件自定义了滚动条，而且这个自定义滚动条是通过操作整片单元格的left、top实现的，所以每次滚动条的事件发生的时候都要驱改变一些参数，譬如“表格当前屏的偏移”。
为了更好地处理像素坐标与行列坐标的关系，我定义了三个额外的类：
Pos类，用于描述某个像素点，在交互事件发生的时候，首先根据clientX与clientY产生一个Pos，后续操作基于Pos处理；
Grid类，用于从方位上描述一个单元格，包含单元格的像素坐标以及行列坐标；
Area类，寄存若干个Grid，用于多选、批量编辑。
基于这些，我给Table添加了两个原型方法：get_grid(x, y)和get_pos(row, col)来快速转换位置关系。
为了快速定位某个指定name的列或者某个指定display值的列，我给表格添加了一个map_col:
/**
* 重映射表格数据的列信息
*/
Grid.Table.prototype.remap_col = function(){
var i;
this.map_col = {
name : {},
display : {}
};
for(i in this.data.col){
this.map_col.name[this.data.col[i].name] = i;
this.map_col.display[this.data.col[i].display] = i;
}
return this;
}
3.双击编辑
在excel中，双击某个单元格或者在单元格上按下字母键时，是会弹出编辑框的，而根据被编辑列的不同属性，这个表格实现了几种类似的编辑交互：
文本形式
下拉选择形式
自定义编辑方式
上面说过，我用一个透明的遮罩把整个表格遮了起来，因此，双击某个单元格之后，实际上是产生了一个覆盖在遮罩上、尺寸位置与被编辑的单元格相同的编辑框或者下拉框，为了实现下拉选择与自定义编辑功能，我给data.col引入了两个可选的配置项：replace与select。
replace是一个可选的函数，当某一列配置有这个属性时，在将任一行该列的内容赋值给对应单元格的innerHTML之前，都将先将此内容的实际值传给replace，然后将replace的返回值用于显示，这个功能被广泛用在物品ID与物品名的替换显示等之上。
select可以是一个函数或者对象，用于生成可供选择的下拉框，一个典型的replace与select的应用如下：
{
name:‘type‘,
display:‘类型‘,
replace : function(raw){
raw = parseInt(raw);
if(raw > 10){
return raw;
}
var types = [‘无‘, ‘攻击‘, ‘气血‘, ‘防御‘, ‘坚韧‘, ‘闪避‘, ‘命中‘, ‘暴击‘, ‘冰抗‘, ‘毒抗‘, ‘火抗‘];
return types[raw];
},
select : [{value:1,display:‘攻击‘}, {value:2,display:‘气血‘}, {value:3,display:‘防御‘}, {value:4,display:‘坚韧‘}, {value:5,display:‘闪避‘}, {value:6,display:‘命中‘}, {value:7,display:‘暴击‘}, {value:8,display:‘冰抗‘}, {value:9,display:‘毒抗‘}, {value:10,display:‘火抗‘}]
}
写到这里，我才发现，OSC的博客正文原来有字数限制！(⊙o⊙)
那就先到这吧……
标签：
原文地址：http://my.oschina.net/u/1253039/blog/387719
