ag-grid with web api

ag-grid

ag-grid的定位是一个企业级别的前端表格控件.

支持的框架: 原生JavaScript, Angular, React,Vue.js.
行模式: 有4中行模式, 不同的模式支持不同的功能
1. Client-side(免费): 默认的模式, 网格将一次性将所有数据加载到网格中. 少于10K条记录时推荐使用.
  网格可以在内存中执行过滤，排序，分组，旋转和聚合。
2. Infinite(免费):
  1. 不用一次性将所有数据加载到界面, 提供过滤, 排序等API, 可以将界面的条件传到后端server中,从而分批次的加载数据.
  2. 默认提供的是下拉到最后一行, 触发一次查询, 通过增加额外分页条件, 可以实现server端分页, 下面项目的client page实现了服务端分页.
  3. 缺陷是不能进行服务端分组功能.
3. Server-side(收费): 服务器端行模型建立在Infinite上, 最大的区别是可以进行服务端分组. 下面的项目使用的也是这种模式.
  当用户向下滚动时，它也会延迟加载数据。此外，它允许通过服务器端分组和聚合来延迟加载分组数据。高级用户将使用服务器端行模型通过服务器端聚合执行临时切片和数据切片
4. Viewport(收费): 网格将告知服务器它正在显示的数据（第一行和最后一行），服务器将仅为这些行提供数据。如果您希望服务器确切知道用户正在查看的内容，请使用此选项，这对于非常大的实时数据流中的更新非常有用，其中服务器仅向查看受影响行的客户端发送更新
支持的功能: 不同的行模式具体提供的功能.

web api(asp.net web api)

web api: 可以简单的视作没有view层的MVC, 轻量级的WCF

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

Infinite Mode: Pagination, Filter, Sort
Server Mode: Pagination, Filter, Sort, Group by

Application Context

Front End: Ag-grid + JavaScript
Server: Web API + ADO.Net(No EF)
DataBase: Oracle: procedure
显示大数据量,考虑到控件自身的功能丰富度和support, 前端使用ag-grid控件
容器化, 使用.net core 2.2框架
兼容移动端, 使用web api
为了更好的利用已有的存储过程, 未使用EF, 通过 ADO.Net获取数据库数据.

Project Intro

AgGridApi 网站程序项目

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

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));}...}

wwwroot: 前端文件

AgGridApi.Services 服务项目

定义接口及其实现类

在startup文件中完成注入services.AddScoped<IAGServer, AGServer>();.
在消费类的构造函数中添加接口类IDemo作为参数public AgGridController(IAGServer aGServer, IRequestBuilder requestBuilder),
.net core运行时作为一个容器, 在调用服务时自动注入AGServer实例
1. IAGServer.cs 接口类
2. AGServer.cs 结构实现类

AgGridApi.Models 实体项目

映射表格参数filterModels, sortModels…

AgGridApi.Common 辅助方法项目

生成表格列名
辅助函数
静态常量

DataFactory 数据库项目

使用ADO.Net调用存储过程, 获取数据.

Procedure 存储过程

示例文件: 参数及处理逻辑

Note

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

ag-grid with web api相关推荐

【ASP.NET Web API教程】3.3 通过WPF应用程序调用Web API(C#)
注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容. 3.3 Calling a Web API From a WPF Application ...
YbSoftwareFactory 代码生成插件【八】：基于JQuery EasyUI、Web Api的 ASP.NET MVC 代码生成插件...
"YbRapidSolution for MVC"是 YbSoftwareFactory 最新的代码生成插件,可一键生成基于ASP.NET MVC的解决方案源代码.其生成的 Dem ...
python处理era5_以ERA-5为例，从零开始手把手教你使用ECMWF Web API（python）
登录后查看更多精彩内容~ 您需要登录才可以下载或查看,没有帐号?立即注册 x 本帖最后由 Masterpiece 于 2017-11-10 21:54 编辑欧洲爸爸的interim网页由于某种原 ...
Web Api学习一
接触WebApi读的第一篇文章: ASP.NET Web API(一):使用初探,GET和POST数据实践过程中,用的Fiddler模拟Post请求时收到的对象总是为空null 解决:将文章中的内容 ...
python 图表_Python入门学习系列——使用Python调用Web API实现图表统计
使用Python调用Web API实现图表统计 Web API:Web应用编程接口,用于URL请求特定信息的程序交互,请求的数据大多以非常易于处理的格式返回,比如JSON或CSV等. 本文将使用Pyt ...
（四）Asp.net web api中的坑-【api的返回值】
(四)Asp.net web api中的坑-[api的返回值] 原文:(四)Asp.net web api中的坑-[api的返回值] void无返回值 IHttpActionResult HttpRe ...
WCF 和 ASP.NET Web API
地址:https://docs.microsoft.com/zh-cn/dotnet/framework/wcf/wcf-and-aspnet-web-api WCF 是 Microsoft 为生成面 ...
【Web API系列教程】1.2 — Web API 2中的Action Results
前言本节的主题是ASP.NET Web API怎样将控制器动作的返回值转换成HTTP的响应消息. Web API控制器动作能够返回下列的不论什么值: 1. void 2. HttpResponseM ...
Dynamics CRM2016 Web API之创建记录
前篇介绍了通过primary key来查询记录,那query的知识点里面还有很多需要学习的,这个有待后面挖掘,本篇来简单介绍下用web api的创建记录. 直接上代码,这里的entity的属性我列了几 ...

ag-grid with web api

ag-grid

web api(asp.net web api)

AgGrid-WebAPI Project

GitHub

Function

Application Context

Project Intro

AgGridApi 网站程序项目

AgGridApi.Services 服务项目

AgGridApi.Models 实体项目

AgGridApi.Common 辅助方法项目

DataFactory 数据库项目

Procedure 存储过程

Note

ag-grid with web api相关推荐

最新文章

热门文章