[發明專利]一種基于AngularJS框架實現的大數據樹形表格組件方法

在審

• 申請號: 202110584479.8
• 申請日: 2021-05-27
• 公開（公告）號: CN113326036A
• 公開（公告）日: 2021-08-31
• 發明（設計）人: 吳龍;許琳
• 申請（專利權）人: 深圳證券通信有限公司
• 主分類號: G06F8/30
• 分類號: G06F8/30;G06F8/34;G06F8/71
• 代理公司: 深圳市凱博企服專利代理事務所(特殊普通合伙) 44482
• 代理人: 李紹飛

本發明公開了一種基于AngularJS框架實現的大數據樹形表格組件方法，定義樹表格的前后端傳輸的數據格式；定義樹表格的HTML展示模板即DOM結構；原生js遞歸處理樹形數據，暴露基本參數配置和自定義接口；采用AngularJS框架進行組件封裝成指令并進行顯示。本發明：1、基于AngularJS的框架實現的樹形表格能同時獲得框架本身的優勢。2.是一個比較完善的前端MV*框架，包含數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等所有功能；3.自定義指令，比jQuery插件還靈活；4.ng模塊化比較大膽的引入了Java的一些東西(依賴注入)，能夠很容易的寫出可復用的代碼，對于敏捷開發的團隊來說非常有幫助。5.簡潔方便。6.支持滾動加載數據，用于大數據表格展示，體驗、性能更好。

技術領域

本發明涉及一種基于AngularJS框架實現的大數據樹形表格組件方法，屬于AngularJS框架開發技術領域。

背景技術

在基于AngularJS框架開發的應用里，進行分層級大數據展示的頁面中，前端需要一個能夠以樹形方式呈現的表格組件，而且該組件能根據數據量的大小進行快速渲染以及滾動加載，以提高頁面的性能。同時還支持表格內的自定義事件的添加，以及對表格進行動態編輯。本發明提供了一種基于AngularJS框架的大數據樹形表格組件技術，能夠簡單便捷的實現該場景。

在需要展示層級大數據的頁面中，為便于受眾接受、理解和操作，交互上通常是以樹形表格的方式展示。常規的實現方法需要進行樹形組件開發和表格繪制，開發復雜，需要花費大量的時間和精力，而且基本上頁面是一次性加載，數據量很大的時候會造成頁面卡頓。即使后期組件成型以后，調用也不算便捷，代碼量也不能說很精簡。因此，迫切需要一種基于AngularJS框架實現的大數據樹形表格組件方法，以解決現有技術中存在的這一問題。

為了解決上述技術問題，特提出一種新的技術方案。

發明內容

本發明的目的在于提供一種基于AngularJS框架實現的大數據樹形表格組件方法，以解決上述背景技術中提出的問題。

為實現上述目的，本發明提供如下技術方案：一種基于AngularJS框架實現的大數據樹形表格組件方法，所述方法包含下述步驟：

步驟一，定義樹表格的前后端傳輸的數據格式；

步驟二，定義樹表格的HTML展示模板即DOM結構；

步驟三，原生js遞歸處理樹形數據，暴露基本參數配置和自定義接口；

步驟四，采用AngularJS框架進行組件封裝成指令；

步驟五，頁面上通過對指令的引用實現最終顯示效果。

與現有技術相比，本發明的有益效果是：

1、基于AngularJS的框架實現的樹形表格能同時獲得框架本身的優勢。如1.模板功能強大豐富，并且是聲明式的，自帶了豐富的Angular指令；

2.是一個比較完善的前端MV*框架，包含數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等所有功能；

3.自定義指令，比jQuery插件還靈活；

4.ng模塊化比較大膽的引入了Java的一些東西(依賴注入)，能夠很容易的寫出可復用的代碼，對于敏捷開發的團隊來說非常有幫助。

5.指令封裝完成后，代碼調用簡潔方便，一行代碼便可代替原生JavaScript幾十上百行的代碼。

6.支持滾動加載數據，用于大數據表格展示，體驗、性能更好。

附圖說明

圖1為本發明的流程框圖。

具體實施方式