出于效率和保持js庫最小化的考慮，TWaver HTML5的Tree組件默認(rèn)的交互方式比較單調(diào)，目前只有選中改變文字背景；但是這不代表TWaver功能不夠強(qiáng)大，相反，TWaver預(yù)留了很多可以重載的方法方便我們擴(kuò)展，本文中我們就利用這些方法實(shí)現(xiàn)鼠標(biāo)滑過改變背景色的效果。
先來張gif圖片看看效果：
實(shí)現(xiàn)方式再簡(jiǎn)單不過，只有短短幾十行代碼，先列一下我們用到的方法：
- onDataRendered(div, data, row, selected)
- adjustRowSize()
- getSelectColor()
除了上面三個(gè)方法，還有兩個(gè)事件監(jiān)聽器，稍后我們就會(huì)講解，先來看下這三個(gè)方法的原理：
- onDataRendered 從字面上很好理解，每當(dāng)Tree要渲染行數(shù)據(jù)的時(shí)候就會(huì)調(diào)用此方法
- div 行數(shù)據(jù)的顯示容器，每行都有一個(gè)div容器，我們可以通過改變div背景色來實(shí)現(xiàn)變色效果
- data 行數(shù)據(jù)，我們監(jiān)聽鼠標(biāo)move事件，記錄鼠標(biāo)所在行的數(shù)據(jù)，然后在onDataRendered里判斷當(dāng)前行是否在鼠標(biāo)下，如果在就改變div的背景色
- row 行數(shù)
- selected 當(dāng)前行是否被選中，如果被選中將div設(shè)置為深色背景
看一下這個(gè)方法的實(shí)現(xiàn)：
1 this.onDataRendered = function (div, data, row, selected) {
2 DemoTree.superClass.onDataRendered(div, data, row, selected);
3 if (selected) {
4 //如果當(dāng)前行被選中，設(shè)置div為深色背景和邊框
5 div.style.background = "#d8e9fc";
6 div.style.border = "1px solid #7da2ce";
7 }
8 else if (data == self.newdata) {
9 //如果當(dāng)前行是鼠標(biāo)所在的行，設(shè)置div為淺色背景和邊框
10 div.style.background = "#f6f9fd";
11 div.style.border = "1px solid rgb(184, 214, 251)";
12 }else{
13 //設(shè)置其它行的padding
14 div.style.padding="1px";
15 }
16 }
- adjustRowSize 這個(gè)方法緊接著onDataRendered執(zhí)行，用來設(shè)置行寬和行高。我們?cè)趏nDataRendered為div設(shè)置了邊框或padding，會(huì)造成Tree上出現(xiàn)橫向滾動(dòng)條，所以需要重寫這個(gè)方法：
1 this.adjustRowSize = function () {
2 var id, div;
3 var hpx = self.getRowHeight() - self.getRowLineWidth() + 'px';
4 //每行div的寬度都減去2像素，避免出現(xiàn)橫向滾動(dòng)條
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 這個(gè)方法用來返回Tree上被選中行的文字的背景色，因?yàn)槲覀円呀?jīng)通過div給整行設(shè)置了背景色，文字背景就顯得多余了，所以我們重寫這個(gè)方法返回一個(gè)透明色：
1 this.getSelectColor = function () {
2 return "rgba(0,0,0,0)";
3 };
除了這三個(gè)方法，還有兩個(gè)監(jiān)聽器
首先，鼠標(biāo)移動(dòng)的時(shí)候需要保存鼠標(biāo)下的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 //調(diào)用invalidateData通知Tree數(shù)據(jù)發(fā)生了變化，TWaver稍后會(huì)調(diào)用onDataRendered
7 self.invalidateData(self.olddata);
8 }
9 if (self.newdata) {
10 self.invalidateData(self.newdata);
11 }
12 self.olddata = self.newdata;
13 }
14 });
其次：當(dāng)鼠標(biāo)移除Tree時(shí)，清空滑過時(shí)設(shè)置的背景色：
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, {});