最近在一個(gè) SCADA 項(xiàng)目中遇到了在 Web 頁面中展示設(shè)備報(bào)表的需求。一個(gè)完整的報(bào)表，一般包含了篩選操作區(qū)、表格、Chart、展板等多種元素，而其中的數(shù)據(jù)表格是最常用的控件。在以往的工業(yè)項(xiàng)目中，所有的表格看起來千篇一律，就是通過數(shù)字和簡單的背景顏色變化來展示相關(guān)信息。但是現(xiàn)在通過各種移動(dòng) App 和 Web 應(yīng)用的熏陶，人們的審美和要求都在不斷提高，尤其是在 Web 項(xiàng)目中，還采用老式的數(shù)字表格確實(shí)也有點(diǎn)落伍了。
如何選擇一個(gè)合適的 HTML 前端表格控件？此處可以省略一萬字。哈哈。jQuery、Angular、React 等陣營中的控件庫中都有不少成熟案例，但是這些基于 DOM 的控件也有不足，一個(gè)是效率問題：如果在數(shù)據(jù)量很大表格的中采用自定義的單元格控件，對瀏覽器的負(fù)擔(dān)實(shí)在太重，尤其是移動(dòng)端。另一個(gè)問題是開發(fā)效率，上述的控件庫中各自的封裝程度、接口形式都有所不同，但整體上還是要求開發(fā)者對 CSS、JS 都有較深的了解。還有控件的復(fù)用、嵌入、發(fā)布、移植，也都是問題。
基于上面的考慮，最后采用了基于 Canvas 的 HT。通過 HT 表格控件的自定義渲染接口，以及 Web Worker 的多線程數(shù)據(jù)模擬，實(shí)現(xiàn)的表格控件效果如下：
http://www.hightopo.com/demo/pagetable/index.html
開始
首先我們要做的就是結(jié)合業(yè)務(wù)邏輯，對表格中不同列的數(shù)據(jù)，進(jìn)行不同的渲染。例如設(shè)備歷史信息中的運(yùn)行時(shí)間、停機(jī)時(shí)間等，比較適合用餅圖來匯總展示，用戶就可以很直觀的從列表上對比出設(shè)備的歷史狀況。 我們來看看這一步是怎樣實(shí)現(xiàn)的。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式