[發明專利]基于React的數據表格渲染方法和數據表格組件

在審

• 申請號: 202110019590.2
• 申請日: 2021-01-07
• 公開（公告）號: CN112699653A
• 公開（公告）日: 2021-04-23
• 發明（設計）人: 楊春霞
• 申請（專利權）人: 北京明略軟件系統有限公司
• 主分類號: G06F40/18
• 分類號: G06F40/18;G06F40/183
• 代理公司: 青島清泰聯信知識產權代理有限公司 37256
• 代理人: 趙燕

本申請涉及一種基于React的數據表格渲染方法和數據表格組件，該方法包括以下步驟：數據初處理步驟，組織待渲染數據使其成為規律性的表格數據；表格數據配置步驟，配置一表格的行內容和列內容，并將表格的key字段與表格數據的key字段對應配置；組件渲染步驟，調用一數據表格組件，將數據和表格配置入數據表格組件，并完成渲染。通過調用數據表格組件規范化數據，實現一種更好的交互體驗、UI效果展示。

技術領域

本申請涉及計算機技術領域，特別是涉及基于React的數據表格渲染方法和數據表格組件。

背景技術

由于在開發過程中，表格是最常用到的，為了能快速進行表格的制作以及數據的綁定，進而加快表格的生成速度，經常采用渲染的方式，使代碼量大大減少，表格的生成更加方便和精確。

目前業內有進行表格渲染組件依然使用的是過時的table標簽來進行布局，然而table標簽對移動端性能支持較差，因其子元素自適應的特性，移動端的展示會出現很多樣式問題，甚至直接崩潰，使渲染效率較低且用戶體驗差。

本發明提出一種基于React的數據表格渲染方法和數據表格組件，能規范化數據，以提供更好的交互體驗、UI效果展示。

發明內容

本申請實施例提供了一種基于React的數據表格渲染方法和數據表格組件，以至少提供更好的交互體驗和UI效果展示。

第一方面，本申請實施例提供了一種基于React的數據表格渲染方法，包括以下步驟：

數據初處理步驟，組織待渲染數據使其成為規律性的表格數據；

表格數據配置步驟，配置一表格的行內容和列內容，并將所述表格的key字段與所述表格數據的key字段對應配置；

組件渲染步驟，調用一數據表格組件，將所述表格數據和所述表格配置入所述數據表格組件，并完成渲染。

在其中一些實施例中，所述組件渲染步驟具體包括以下步驟：

數據接收步驟，所述數據表格組件接收外部傳入的所述待渲染數據，并將其存儲在內部的state中；

數據重新組裝步驟，所述數據表格組件接收部分配置參數，調用格式化數據方法，將所述表格數據依據層級和所述配置參數進行重新組裝；

單元格渲染步驟，通過一header對應所述表格的表頭和列數據，將一body中的每一條數據對應所述表格中的每一行數據，所述body為所述表格數據的具體數據，根據所述header中的每列的key字段，獲取所述body中每行的具體數據并渲染為一個單元格；

數據渲染步驟，在render中，調用初處理后的所述表格數據，結合渲染層html，對所述表格數據進行渲染，并將渲染后的所述表格數據存入一頁面容器。

在其中一些實施例中，所述配置參數用于控制所述表格的每行數據是否可選、是否僅顯示副標字段、默認選中哪些行以及是否默認全選。

在其中一些實施例中，所述數據渲染步驟之后還包括調整步驟，包括以下步驟：

UI重繪步驟，對所述表格的整體UI進行一次重繪，計算各個模塊的位置，設置所述數據表格組件的滾動效果和單元格的樣式；

滾動查看步驟，所述表格顯示在視窗內，并通過滾動對所述表格數據進行查看。

在其中一些實施例中，所述UI重繪步驟具體包括以下步驟：

數據獲取步驟，首先獲取表格容器的寬高數據和渲染后所述表頭的高度，其次，通過所述表頭的子節點寬度，計算整個所述表頭的寬度；最后，計算行首縮進、行尾的縮進和每行中每個所述單元格的間距；

顯示判斷步驟，判斷是否顯示頁碼，并獲取所述頁碼的高度；