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();

2. 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 GetDataColumns(string datasource)
        {
            return Task.Run(() => _aGServer.GetDataColumns(datasource));
        }
        ...
     }

3. wwwroot: 前端文件

AgGridApi.Services 服务项目

定义接口及其实现类

1. 在startup文件中完成注入services.AddScoped();.
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