怎样实现handsontable双击修改列头（how to modify colheaders）

最近使用handsontable进行表格的编辑和展示，不得不说，该控件真心好用，界面友好且功能强大，在使用过程中，有这样一个问题：如何双击实现列头的编辑?

首先，我们查看handsontable的官方文档不难发现，创建表格的时候，支持传colheaders的参数，但是这样创建好表格之后，我们如何双击实现列头的编辑呢？以及，如果我要在列头添加除文字外，例如图标该怎么办？

不得不说，小弟的英文水平真的有限，看handsontable的官方文档看的是两眼泪汪汪啊，google了半天也只找到一些类似于将列头修改为可输入框的文章，虽然列头是可以编辑了，但是顶着一个个的输入框，不得不说，这个表格好丑啊。但是还好，在这些文章中还是有点启发的，既然可以用html来代替列头的文字，那么图标问题就很好解决了，而且我们是不是可以考虑在列头双击的时候，用同样大小的输入框，绝对定位，覆盖列头，然后取输入框的内容来代替列头，隐藏输入框

说干就干，首先是表格的创建，如何用html来代替纯文字的表头，这在官方文档也有介绍，小弟就不多啰嗦了，直接贴代码，有兴趣的同学可以查看一下官方文档：custom renderers

表格的创建代码如下：

var settings = {
	columns : columns,
	width : "100%",
	height : this.$dom.height() - 24,
	colWidths : this.getColWidths(),
	rowHeights : 30,
	rowHeaders : true,
	colHeaders : function(index) {
		var column = columns[index];
		var html = "<span id='column_type' class='" + self.getColumnIcon(column.coltype) + "' style='font-family:szfont'></span>";
		html += "  ";
		html += "<span id='column_name'>" + column.name + "</span>";
		html += "  ";
		html += "<span id='column_filter' class='icon-ltrip-small' style='font-family:szfont'></span>";
		return html;
	},
	afterGetColHeader : function(col, TH) {
		if (col == -1) {
			return;
		}
		var pdom = $(TH);
		var columntype = pdom.findById("column_type");
		self.bindColumnTypeEvent(columntype);
		var columnname = pdom.findById("column_name");
		self.bindColumnNameEvent(columnname);
		var columnfilter = pdom.findById("column_filter");
		self.bindColumnFilterEvent(columnfilter);
	},
	manualColumnResize : true,
	wordWrap : false,
	autoWrapRow : true,
	data : rows,
	outsideClickDeselects : false
};

不难发现，colheaders的参数可以是一个function，有兴趣的朋友也可以跟进源码里面查看，根据以上配置，基本实现了列头前后图标以及中间显示文字的格式。

接下来我们仔细看上面afterGetColHeader中的内容，在这里，我绑定了前后图标，以及中间文字的点击事件，然后按照文章开头所说的，我们尝试用输入框来遮盖的方式实现双击的编辑，代码如下：

<span style="white-space:pre">	</span>var self = this;
<span style="white-space:pre">	</span>dom && dom.on("dblclick", function(e) {
	<span style="white-space:pre">	</span>var session;
		var htable = self.htable;
		var a = htable.getSelected();
		var headers = htable.getColHeader();
		var top = dom.position().top;
		var left = dom.position().left;
		var width = dom.width();
		var height = dom.height();
		var html = "<input class='column_name_edit' type='text' style='position:absolute;top:2px;bottom:2px;left:" + left + "px;width:" + width
			+ "px;' value='" + dom.text() + "'/>";
		$(html).appendTo(dom.parent());
		var editinput = dom.parent().find(".column_name_edit");
		editinput.focus();
		editinput.select();
		editinput.on("blur", function() {
			this.remove();
			var newname = this.value;
			var oldname = dom.text();
			if (newname != oldname) {
				dom.text(this.value);
			}
		});
		editinput.on("keydown", function(e) {
			if (event.keyCode == 13) {// 回车确认修改
				this.blur();
			}
		});
	});

通过这种方式，我们可以成功的模拟出双击修改表列头的功能。

目前，小弟在使用handsontable的过程中还遇到以下几个问题尚未解决，如有朋友知道，还请不吝赐教：

1，选中整行整列的时候，怎么样能使列头和行编号同时选中？

2，修改列头后，点击选中标题，输入框焦点没有失去，怎么解决？

3，选中列，按键盘delete键，整列数据清除，如何禁止？