在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); } }
上面的代码就是定义表格第三列的代码&#