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

在審

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

1.一種基于React的數據表格渲染方法，其特征在于，包括以下步驟：

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

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

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

2.根據權利要求1所述的基于React的數據表格渲染方法，其特征在于，所述組件渲染步驟具體包括以下步驟：

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

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

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

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

3.根據權利要求1所述的基于React的數據表格渲染方法，其特征在于，所述配置參數用于控制所述表格的每行數據是否可選、是否僅顯示副標字段、默認選中哪些行以及是否默認全選。

4.根據權利要求2所述的基于React的數據表格渲染方法，其特征在于，所述數據渲染步驟之后還包括調整步驟，包括以下步驟：

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

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

5.根據權利要求4所述的基于React的數據表格渲染方法，其特征在于，所述UI重繪步驟具體包括以下步驟：

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

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

橫向滾動判斷步驟，根據所述表格容器、所述表頭和所述頁碼的高度，獲得所述表格內可滾動區域的高度值，將所述表格容器的寬度與所有列及其間距的和進行比較，判斷是否添加橫向滾動。

6.根據權利要求3所述的基于React的數據表格渲染方法，其特征在于，當瀏覽器的所述視窗的尺寸發生變化時，對所述表格的所述整體UI進行重繪。

7.一種基于React的數據表格組件，應用于上述權利要求1-6任意一項所述的數據表格渲染方法，其特征在于，包括：

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

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

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

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

8.根據權利要求7所述的基于React的數據表格組件，其特征在于，還包括調整模塊，包括：

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

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