最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求。一个完整的报表，一般包含了筛选操作区、表格、Chart、展板等多种元素，而其中的数据表格是最常用的控件。在以往的工业项目中，所有的表格看起来千篇一律，就是通过数字和简单的背景颜色变化来展示相关信息。但是现在通过各种移动 App 和 Web 应用的熏陶，人们的审美和要求都在不断提高，尤其是在 Web 项目中，还采用老式的数字表格确实也有点落伍了。
如何选择一个合适的 HTML 前端表格控件？此处可以省略一万字。哈哈。jQuery、Angular、React 等阵营中的控件库中都有不少成熟案例，但是这些基于 DOM 的控件也有不足，一个是效率问题：如果在数据量很大表格的中采用自定义的单元格控件，对浏览器的负担实在太重，尤其是移动端。另一个问题是开发效率，上述的控件库中各自的封装程度、接口形式都有所不同，但整体上还是要求开发者对 CSS、JS 都有较深的了解。还有控件的复用、嵌入、发布、移植，也都是问题。
基于上面的考虑，最后采用了基于 Canvas 的 HT。通过 HT 表格控件的自定义渲染接口，以及 Web Worker 的多线程数据模拟，实现的表格控件效果如下：
http://www.hightopo.com/demo/pagetable/index.html
开始
首先我们要做的就是结合业务逻辑，对表格中不同列的数据，进行不同的渲染。例如设备历史信息中的运行时间、停机时间等，比较适合用饼图来汇总展示，用户就可以很直观的从列表上对比出设备的历史状况。 我们来看看这一步是怎样实现的。
延伸阅读
- ssh框架 2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
- 从栈不平衡问题 理解 calling convention 2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
- 集合结合数据结构来看看(二) 2017-07-26
学习是年轻人改变自己的最好方式