最近在一個(gè) SCADA 項(xiàng)目中遇到了在 Web 頁(yè)面中展示設(shè)備報(bào)表的需求。一個(gè)完整的報(bào)表，一般包含了篩選操作區(qū)、表格、Chart、展板等多種元素，而其中的數(shù)據(jù)表格是最常用的控件。在以往的工業(yè)項(xiàng)目中，所有的表格看起來(lái)千篇一律，就是通過(guò)數(shù)字和簡(jiǎn)單的背景顏色變化來(lái)展示相關(guān)信息。但是現(xiàn)在通過(guò)各種移動(dòng) App 和 Web 應(yīng)用的熏陶，人們的審美和要求都在不斷提高，尤其是在 Web 項(xiàng)目中，還采用老式的數(shù)字表格確實(shí)也有點(diǎn)落伍了。
如何選擇一個(gè)合適的 HTML 前端表格控件？此處可以省略一萬(wàn)字。哈哈。jQuery、Angular、React 等陣營(yíng)中的控件庫(kù)中都有不少成熟案例，但是這些基于 DOM 的控件也有不足，一個(gè)是效率問(wèn)題：如果在數(shù)據(jù)量很大表格的中采用自定義的單元格控件，對(duì)瀏覽器的負(fù)擔(dān)實(shí)在太重，尤其是移動(dòng)端。另一個(gè)問(wèn)題是開(kāi)發(fā)效率，上述的控件庫(kù)中各自的封裝程度、接口形式都有所不同，但整體上還是要求開(kāi)發(fā)者對(duì) CSS、JS 都有較深的了解。還有控件的復(fù)用、嵌入、發(fā)布、移植，也都是問(wèn)題。
基于上面的考慮，最后采用了基于 Canvas 的 HT。通過(guò) HT 表格控件的自定義渲染接口，以及 Web Worker 的多線程數(shù)據(jù)模擬，實(shí)現(xiàn)的表格控件效果如下：
http://www.hightopo.com/demo/pagetable/index.html
開(kāi)始
首先我們要做的就是結(jié)合業(yè)務(wù)邏輯，對(duì)表格中不同列的數(shù)據(jù)，進(jìn)行不同的渲染。例如設(shè)備歷史信息中的運(yùn)行時(shí)間、停機(jī)時(shí)間等，比較適合用餅圖來(lái)匯總展示，用戶(hù)就可以很直觀的從列表上對(duì)比出設(shè)備的歷史狀況。 我們來(lái)看看這一步是怎樣實(shí)現(xiàn)的。
