为TWaver HTML5的Tree组件增加鼠标滑过效果

出于效率和保持js库最小化的考虑,TWaver HTML5的Tree组件默认的交互方式比较单调,目前只有选中改变文字背景;但是这不代表TWaver功能不够强大,相反,TWaver预留了很多可以重载的方法方便我们扩展,本文中我们就利用这些方法实现鼠标滑过改变背景色的效果。

先来张gif图片看看效果:


 

为TWaver HTML5的Tree组件增加鼠标滑过效果

实现方式再简单不过,只有短短几十行代码,先列一下我们用到的方法:

  • onDataRendered(div, data, row, selected)
  • adjustRowSize()
  • getSelectColor()

除了上面三个方法,还有两个事件监听器,稍后我们就会讲解,先来看下这三个方法的原理:

  • onDataRendered 从字面上很好理解,每当Tree要渲染行数据的时候就会调用此方法
    1. div 行数据的显示容器,每行都有一个div容器,我们可以通过改变div背景色来实现变色效果
    2. data 行数据,我们监听鼠标move事件,记录鼠标所在行的数据,然后在onDataRendered里判断当前行是否在鼠标下,如果在就改变div的背景色
    3. row 行数
    4. selected 当前行是否被选中,如果被选中将div设置为深色背景

看一下这个方法的实现:

this.onDataRendered = function (div, data, row, selected) {

       DemoTree.superClass.onDataRendered(div, data, row, selected);

        if (selected) {

             //如果当前行被选中,设置div为深色背景和边框

              div.style.background = "rgb(216,233,252)";

               div.style.border = "1px solid rgb(125,162,206)";

        }

        else if (data == self.newdata) {

             //如果当前行是鼠标所在的行,设置div为浅色背景和边框

             div.style.background = "rgb(246,249,253)";

             div.style.border = "1px solid rgb(184, 214, 251)";

        }else{

            //设置其它行的padding

             div.style.padding="1px";

        }

}
  • adjustRowSize 这个方法紧接着onDataRendered执行,用来设置行宽和行高。我们在onDataRendered为div设置了边框或padding,会造成Tree上出现横向滚动条,所以需要重写这个方法:
this.adjustRowSize = function () {

	var id, div;

        var hpx = self.getRowHeight() - self.getRowLineWidth() + 'px';

//每行div的宽度都减去2像素,避免出现横向滚动条

        var wpx = Math.floor((self.getView().scrollLeft + self.getView().clientWidth) / self.getZoom()-2) + 'px';

        for (id in self._renderMap) {

                div = self._renderMap[id];

                div.style.height = hpx;

                div.style.width = wpx;

        }

};
  • getSelectColor 这个方法用来返回Tree上被选中行的文字的背景色,因为我们已经通过div给整行设置了背景色,文字背景就显得多余了,所以我们重写这个方法返回一个透明色:
this.getSelectColor = function () {

    return "rgba(0,0,0,0)";

};

 除了这三个方法,还有两个监听器

首先,鼠标移动的时候需要保存鼠标下的data

var self=this;

this._view.addEventListener("mouseover", function (e) {

                self.newdata = self.getDataAt(e);

                if (self.olddata != self.newdata) {

                    if (self.olddata) {

                        //调用invalidateData通知Tree数据发生了变化,TWaver稍后会调用onDataRendered

                        self.invalidateData(self.olddata);

                    }

                    if (self.newdata) {

                        self.invalidateData(self.newdata);

                    }

                    self.olddata = self.newdata;

                }

            });

其次:当鼠标移除Tree时,清空滑过时设置的背景色:

this._view.addEventListener("mouseout", function (e) {

                if (self.newdata) {

                    self.invalidateData(self.newdata);

                    self.newdata = null;

                }

            });

最后附上完整的代码:

var DemoTree = function (dataBox) {

			DemoTree.superClass.constructor.apply(this, arguments);

            var self = this;





            this.newdata = null;

            var olddata = null;

            this._view.addEventListener("mouseover", function (e) {

                self.newdata = self.getDataAt(e);

                if (self.olddata != self.newdata) {

                    if (self.olddata) {

                        self.invalidateData(self.olddata);

                    }

                    if (self.newdata) {

                        self.invalidateData(self.newdata);

                    }

                    self.olddata = self.newdata;

                }

            });



            this.onDataRendered = function (div, data, row, selected) {

                DemoTree.superClass.onDataRendered(div, data, row, selected);

                if (selected) {

                    div.style.background = "rgb(216,233,252)";

                    div.style.border = "1px solid rgb(125,162,206)";

                }

                else if (data == self.newdata) {

                    div.style.background = "rgb(246,249,253)";

                    div.style.border = "1px solid rgb(184, 214, 251)";

                }else{

					div.style.padding="1px";

				}

            }



            this.adjustRowSize = function () {

				var id, div;

                var hpx = self.getRowHeight() - self.getRowLineWidth() + 'px';

                var wpx = Math.floor((self.getView().scrollLeft + self.getView().clientWidth) / self.getZoom()-2) + 'px';

                for (id in self._renderMap) {

                    div = self._renderMap[id];

                    div.style.height = hpx;

                    div.style.width = wpx;

                }

            };



            this.getSelectColor = function () {

                return "rgba(0,0,0,0)";

            };

            this._view.addEventListener("mouseout", function (e) {

                if (self.newdata) {

                    self.invalidateData(self.newdata);

                    self.newdata = null;

                }

            });

        };

twaver.Util.ext(DemoTree, twaver.controls.Tree, {});

  

你可能感兴趣的:(TWaver)