[置顶] 扩展HT for Web之HTML5表格组件的Renderer和Editor

在HT for Web提供了一下几种常用的Editor，分别是：

• slider：拉条
• color picker：颜色选择器
• enum：枚举类型
• boolean：真假编辑器
• string：普通的文本编辑器

除了这几种常用编辑器之外，用户还可以通过继承ht.widget.BaseItemEditor类来实现自定义编辑器。

而渲染器，在HT for Web提供常用的Renderer有：

• enum：枚举类型
• color：颜色类型
• boolean：真假渲染器
• text：文本渲染器

和编辑器一样也可以自定义渲染器，但是方式不太一样，渲染器是通过定义column中drawCell()方法来自定义单元格展现效果。

今天我们就来实现一把自定义HTML5表格组件的Renderer和Editor，为了更直观地演示编辑效果，我们正好利用HT for Web强大的HTML5拓扑图组件

首先来瞧瞧效果：

 

 

效果图中，左边表格的第二列，是定义了一个编辑器，用一个圆盘来表示当前文本的旋转角度，可以通过拖拉来实现角度变换；表格的第三列，是通过drawCell()方法来绘制单元格内容，中间线标识旋转角度为零，向左表示文本逆时针旋转指定角度，向右表示文本顺时针旋转指定角度。

HT for Web的拓扑图网络节点的文字，简单修改label.rotation属性即可实现文字旋转功能，为了更直观我特意加上label.background使得网络拓扑图节点文字具有背景效果。

接下来我们就来看看具体的实现，先来了解下渲染器的实现：

 

 

{
    name : 'label.rotation',
    accessType : 'style',
    drawCell : function(g, data, selected, column, x, y, w, h, tableView) {
        var degree = Math.round(data.s('label.rotation') / Math.PI * 180),
                width = Math.abs(w / 360 * degree),
                begin = w / 2,
                rectColor = '#29BB9C',
                fontColor = '#000',
                background = '#F8F0E5';

        if (selected) {
            rectColor = '#F7F283';
            background = '#29BB9C';
        }
        g.beginPath();
        g.fillStyle = background;
        g.fillRect(x, y, w, h);
        g.beginPath();
        if (degree < 0) begin -= width;
        g.fillStyle = rectColor;
        g.fillRect(x + begin, y, width, h);
        g.beginPath();
        g.font = '12px arial, sans-serif';
        g.fillStyle = fontColor;
        g.textAlign = 'center';
        g.textBaseline = 'middle';
        g.fillText(degree, x + w / 2, y + h / 2);
    }
}

 

 

上面的代码就是定义表格