ag-grid with web api

ag-grid

ag-grid的定位是一個企業級别的前端表格控件.

1. 支援的架構: 原生JavaScript, Angular, React,Vue.js.
2. 行模式: 有4中行模式, 不同的模式支援不同的功能

   1. Client-side(免費): 預設的模式, 網格将一次性将所有資料加載到網格中. 少于10K條記錄時推薦使用.

      網格可以在記憶體中執行過濾，排序，分組，旋轉和聚合。

   2. Infinite(免費):
      1. 不用一次性将所有資料加載到界面, 提供過濾, 排序等API, 可以将界面的條件傳到後端server中,進而分批次的加載資料.
      2. 預設提供的是下拉到最後一行, 觸發一次查詢, 通過增加額外分頁條件, 可以實作server端分頁, 下面項目的client page實作了服務端分頁.
      3. 缺陷是不能進行服務端分組功能.

   3. Server-side(收費): 伺服器端行模型建立在Infinite上, 最大的差別是可以進行服務端分組. 下面的項目使用的也是這種模式.

      當使用者向下滾動時，它也會延遲加載資料。此外，它允許通過伺服器端分組和聚合來延遲加載分組資料。進階使用者将使用伺服器端行模型通過伺服器端聚合執行臨時切片和資料切片

   4. Viewport(收費): 網格将告知伺服器它正在顯示的資料（第一行和最後一行），伺服器将僅為這些行提供資料。如果您希望伺服器确切知道用​​戶正在檢視的内容，請使用此選項，這對于非常大的實時資料流中的更新非常有用，其中伺服器僅向檢視受影響行的用戶端發送更新
3. 支援的功能: 不同的行模式具體提供的功能.

   

web api(asp.net web api)

web api: 可以簡單的視作沒有view層的MVC, 輕量級的WCF

1. 建構REST-ful service, 支援http協定: request, post, put, delete…
2. 可以建立完整的HTTP服務，隻需傳回資料, 像json, xml等,
3. 不維護複雜的網頁控件狀态
4. 完美的支援移動端通路
5. 可以嵌合到web app中使用, 但是需要獨立的api server及路由過濾

AgGrid-WebAPI Project

簡單使用 ag-grid和web api. 運作架構: .net core 2.2

• parameter(filterModels, sortModels…): Client(browser) => Server(.net core 2.2) => Oracle DB(procedure)

GitHub

項目源碼: webAPI-AgGrid

Function

1. Infinite Mode: Pagination, Filter, Sort
2. Server Mode: Pagination, Filter, Sort, Group by

Application Context

1. Front End: Ag-grid + JavaScript
2. Server: Web API + ADO.Net(No EF)
3. DataBase: Oracle: procedure
4. 顯示大資料量,考慮到控件自身的功能豐富度和support, 前端使用ag-grid控件
5. 容器化, 使用.net core 2.2架構
6. 相容移動端, 使用web api
7. 為了更好的利用已有的存儲過程, 未使用EF, 通過 ADO.Net擷取資料庫資料.

Project Intro

AgGridApi 網站程式項目

1. Config files
   • launchSettings.json: 預設的程式啟動配置檔案
   • dbsettings.json: 配置資料庫連接配接字元串
   • Startup.cs: 配置和注入服務

//add mvc serv		
	services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
	//inject costumed instance
	//  Scoped objects are the same within a request but different across requests. 
	services.AddScoped<IDemo, Demo>();
           

1. Controller: DI+RESTful

[Route("api/aggrid")]
    [ApiController]
    public class AgGridController : ControllerBase
    {
        private readonly IAGServer _aGServer;
        private readonly IRequestBuilder _requestBuilder;

        public AgGridController(IAGServer aGServer, IRequestBuilder requestBuilder)
        {
            _aGServer = aGServer;
            _requestBuilder = requestBuilder;
        }
	
        [HttpGet]
        [Route("GetDataColumns/{datasource}")]
        public Task<string> GetDataColumns(string datasource)
        {
            return Task.Run(() => _aGServer.GetDataColumns(datasource));
        }
        ...
     }
           

1. wwwroot: 前端檔案

AgGridApi.Services 服務項目

定義接口及其實作類

1. 在startup檔案中完成注入

   services.AddScoped<IAGServer, AGServer>();

   .
2. 在消費類的構造函數中添加接口類IDemo作為參數

   public AgGridController(IAGServer aGServer, IRequestBuilder requestBuilder)

   ,
3. .net core運作時作為一個容器, 在調用服務時自動注入AGServer執行個體
   1. IAGServer.cs 接口類
   2. AGServer.cs 結構實作類

AgGridApi.Models 實體項目

1. 映射表格參數filterModels, sortModels…

AgGridApi.Common 輔助方法項目

1. 生成表格列名
2. 輔助函數
3. 靜态常量

DataFactory 資料庫項目

1. 使用ADO.Net調用存儲過程, 擷取資料.

Procedure 存儲過程

1. 示例檔案: 參數及處理邏輯

Note

1. Not use Entity Framework, based on ADO.Net + procedure
2. ag-grid started
3. ag-grid row model support function comparisons
4. ag-grid grid features