出于效率和保持js库最小化的考虑，TWaver HTML5的Tree组件默认的交互方式比较单调，目前只有选中改变文字背景；但是这不代表TWaver功能不够强大，相反，TWaver预留了很多可以重载的方法方便我们扩展，本文中我们就利用这些方法实现鼠标滑过改变背景色的效果。
先来张gif图片看看效果：
实现方式再简单不过，只有短短几十行代码，先列一下我们用到的方法：
- onDataRendered(div, data, row, selected)
- adjustRowSize()
- getSelectColor()
除了上面三个方法，还有两个事件监听器，稍后我们就会讲解，先来看下这三个方法的原理：
- onDataRendered 从字面上很好理解，每当Tree要渲染行数据的时候就会调用此方法
- div 行数据的显示容器，每行都有一个div容器，我们可以通过改变div背景色来实现变色效果
- data 行数据，我们监听鼠标move事件，记录鼠标所在行的数据，然后在onDataRendered里判断当前行是否在鼠标下，如果在就改变div的背景色
- row 行数
- selected 当前行是否被选中，如果被选中将div设置为深色背景
看一下这个方法的实现：
1 this.onDataRendered = function (div, data, row, selected) {
2 DemoTree.superClass.onDataRendered(div, data, row, selected);
3 if (selected) {
4 //如果当前行被选中，设置div为深色背景和边框
5 div.style.background = "#d8e9fc";
6 div.style.border = "1px solid #7da2ce";
7 }
8 else if (data == self.newdata) {
9 //如果当前行是鼠标所在的行，设置div为浅色背景和边框
10 div.style.background = "#f6f9fd";
11 div.style.border = "1px solid rgb(184, 214, 251)";
12 }else{
13 //设置其它行的padding
14 div.style.padding="1px";
15 }
16 }
- adjustRowSize 这个方法紧接着onDataRendered执行，用来设置行宽和行高。我们在onDataRendered为div设置了边框或padding，会造成Tree上出现横向滚动条，所以需要重写这个方法：
1 this.adjustRowSize = function () {
2 var id, div;
3 var hpx = self.getRowHeight() - self.getRowLineWidth() + 'px';
4 //每行div的宽度都减去2像素，避免出现横向滚动条
5 var wpx = Math.floor((self.getView().scrollLeft + self.getView().clientWidth) / self.getZoom()-2) + 'px';
6 for (id in self._renderMap) {
7 div = self._renderMap[id];
8 div.style.height = hpx;
9 div.style.width = wpx;
10 }
11 };
- getSelectColor 这个方法用来返回Tree上被选中行的文字的背景色，因为我们已经通过div给整行设置了背景色，文字背景就显得多余了，所以我们重写这个方法返回一个透明色：
1 this.getSelectColor = function () {
2 return "rgba(0,0,0,0)";
3 };
除了这三个方法，还有两个监听器
首先，鼠标移动的时候需要保存鼠标下的data
1 var self=this;
2 this._view.addEventListener("mouseover", function (e) {
3 self.newdata = self.getDataAt(e);
4 if (self.olddata != self.newdata) {
5 if (self.olddata) {
6 //调用invalidateData通知Tree数据发生了变化，TWaver稍后会调用onDataRendered
7 self.invalidateData(self.olddata);
8 }
9 if (self.newdata) {
10 self.invalidateData(self.newdata);
11 }
12 self.olddata = self.newdata;
13 }
14 });
其次：当鼠标移除Tree时，清空滑过时设置的背景色：
1 this._view.addEventListener("mouseout", function (e) {
2 if (self.newdata) {
3 self.invalidateData(self.newdata);
4 self.newdata = null;
5 }
6 });
最后附上完整的代码：
1 var DemoTree = function (dataBox) {
2 DemoTree.superClass.constructor.apply(this, arguments);
3 var self = this;
4
5
6 this.newdata = null;
7 var olddata = null;
8 this._view.addEventListener("mouseover", function (e) {
9 self.newdata = self.getDataAt(e);
10 if (self.olddata != self.newdata) {
11 if (self.olddata) {
12 self.invalidateData(self.olddata);
13 }
14 if (self.newdata) {
15 self.invalidateData(self.newdata);
16 }
17 self.olddata = self.newdata;
18 }
19 });
20
21 this.onDataRendered = function (div, data, row, selected) {
22 DemoTree.superClass.onDataRendered(div, data, row, selected);
23 if (selected) {
24 div.style.background = "#d8e9fc";
25 div.style.border = "1px solid #7da2ce";
26 }
27 else if (data == self.newdata) {
28 div.style.background = "#f6f9fd";
29 div.style.border = "1px solid rgb(184, 214, 251)";
30 }else{
31 div.style.padding="1px";
32 }
33 }
34
35 this.adjustRowSize = function () {
36 var id, div;
37 var hpx = self.getRowHeight() - self.getRowLineWidth() + 'px';
38 var wpx = Math.floor((self.getView().scrollLeft + self.getView().clientWidth) / self.getZoom()-2) + 'px';
39 for (id in self._renderMap) {
40 div = self._renderMap[id];
41 div.style.height = hpx;
42 div.style.width = wpx;
43 }
44 };
45
46 this.getSelectColor = function () {
47 return "rgba(0,0,0,0)";
48 };
49 this._view.addEventListener("mouseout", function (e) {
50 if (self.newdata) {
51 self.invalidateData(self.newdata);
52 self.newdata = null;
53 }
54 });
55 };
56 twaver.Util.ext(DemoTree, twaver.controls.Tree, {});