【基本认知】
ag-Grid 是一个功能强大、灵活且高性能的用于构建数据表格（Data Grid）的 JavaScript 库。它提供了丰富的功能和选项，使开发人员能够轻松地创建复杂的数据表格，并支持大量数据的展示和操作。
【主要特点】
提供功能如下：① 数据列表展示；② 数据编辑；③ 默认全字段可排序；④ 设置默认列属性；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ag-Grid Simple Example</title> <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css"> <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css"> <!-- Includes all JS & CSS for the JavaScript Data Grid --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script> <!-- <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script> --> <!-- <script src="https://unpkg.com/ag-grid-enterprise"></script> --></head><body> <div id="myGrid" class="ag-theme-alpine" style="height: 200px; width: 600px;"></div> <script > document.addEventListener('DOMContentLoaded', function() { var gridOptions = { columnDefs: [ { headerName: "Make", field: "make", editable: true }, { headerName: "Model", field: "model", editable: true }, { headerName: "Price", field: "price", editable: true } ], rowData: [ { make: "Toyota", model: "Celica", price: 35000 }, { make: "Ford", model: "Mondeo", price: 32000 }, { make: "Porsche", model: "Boxster", price: 72000 } ], defaultColDef: { flex: 1, minWidth: 100, editable: true } }; var gridDiv = document.querySelector('#myGrid'); new agGrid.Grid(gridDiv, gridOptions); }); </script></body></html>
此案例演示主要功能如下：【基本内容参照：JavaScript Grid: Quick Start | AG Grid示例实现】
完整代码演示如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ag-Grid Simple Example</title> <!-- Includes all JS & CSS for the JavaScript Data Grid --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script> <!-- 学习内容： 1.表格是否可以编辑；✅ 2.默认指定排序；✅ 默认按照Make字段降序排列 3.单元格列样式 & 行样式；✅ 4.文本格式化；✅(见价格列) 5.初始咧宽度；✅(见价格列) 6.组合两列数据；✅(Make&Model) 7.每列增加操作按钮；✅Button列 8.全局列属性定义；✅defaultColDef 配置 9.分页属性设置；✅ 10.多选框；✅ --> <style type="text/css"> .rag-green { background-color: #33cc3344; } .rag-red { background-color: #cc222244; } </style></head><body> <div id="myGrid" class="ag-theme-alpine" style="height: 225px; width: 1000px;"></div> <script > let gridApi; class CustomButtonComponent { eGui; eButton; eventListener; init() { this.eGui = document.createElement("div"); let eButton = document.createElement("button"); eButton.className = "btn-simple"; eButton.textContent = "点击弹窗!"; this.eventListener = () => alert("clicked"); eButton.addEventListener("click", this.eventListener); this.eGui.appendChild(eButton); } getGui() { return this.eGui; } refresh() { return true; } destroy() { if (this.eButton) { this.eButton.removeEventListener("click", this.eventListener); } } } // 自定义排序函数 function dateComparator(date1, date2) { const date1Number = monthToComparableNumber(date1); const date2Number = monthToComparableNumber(date2); if (date1Number === null && date2Number === null) { return 0; } if (date1Number === null) { return -1; } if (date2Number === null) { return 1; } return date1Number - date2Number; } // eg 29/08/2004 gets converted to 20040829 function monthToComparableNumber(date) { if (date === undefined || date === null || date.length !== 10) { return null; } const yearNumber = Number.parseInt(date.substring(6, 10)); const monthNumber = Number.parseInt(date.substring(3, 5)); const dayNumber = Number.parseInt(date.substring(0, 2)); return yearNumber * 10000 + monthNumber * 100 + dayNumber; } // 【核心功能】 document.addEventListener('DOMContentLoaded', function() { var gridOptions = { // 分页start pagination: true, paginationPageSize: 3, paginationPageSizeSelector: [3, 6, 10], // 分页end // 行样式 start rowClassRules: { // apply red to Ford cars 'rag-red': params => params.data.make === 'Ford', }, // 行样式 end // 多选 start rowSelection: 'multiple', // 多选 end(记住每列需要配置 多选属性) columnDefs: [ { headerName: "Make", field: "make", editable: true , sort:"desc", checkboxSelection: true, flex:2}, { headerName: "Model", field: "model", editable: true, cellClassRules: { // apply green to electric cars 'rag-green': params => params.value === "Celica", } }, { headerName: "默认值列", valueGetter: p=> "默认值", flex: 2 /*相对宽度*/}, { headerName: "Make & Model", valueGetter: p=> p.data.make + " " + p.data.model, flex: 2 /*相对宽度*/}, { headerName: "Price", field: "price", editable: true, valueFormatter: p => '$ ' + p.value.toLocaleString() ,flex:2 }, { headerName: "Electric", field: "electric", editable: false }, { field: "year", width: 120, unSortIcon: true }, { field: "date", comparator: dateComparator }, { headerName: "操作按钮",field: "button", cellRenderer: CustomButtonComponent, flex: 1 }, ], rowData: [ { make: "Toyota", model: "Celica", price: 358000 , electric: true, year: 2021, date: "1/10/2021"}, { make: "Ford", model: "Mondeo", price: 32000 , electric: false, year: 2021, date: "10/10/2021"}, { make: "Porsche", model: "Boxster", price: 72000 , electric: true, year: 2021, date: "1/11/2021"}, { make: "Porsche", model: "Boxster", price: 72000 , electric: true, year: 2019, date: "1/10/2019"}, { make: "Toyota", model: "Celica", price: 358000 , electric: true, year: 2021, date: "1/10/2021"}, { make: "Ford", model: "Mondeo", price: 32000 , electric: false, year: 2023, date: "1/10/2023"}, { make: "Toyota", model: "Celica", price: 358000 , electric: true, year: 2021, date: "15/10/2021"}, { make: "Ford", model: "Mondeo", price: 32000 , electric: false, year: 2001, date: "1/10/2001"}, ], defaultColDef: { flex: 1, minWidth: 100, editable: true } }; var gridDiv = document.querySelector('#myGrid'); // gridApi = new agGrid.Grid(gridDiv, gridOptions); gridApi = agGrid.createGrid(gridDiv, gridOptions); }); </script></body></html>实现效果代码展示：
动态演示图如下：
官方示例：JavaScript Example - Csv Export - Csv Export
完整代码展示：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ag-Grid Simple Example</title> <!-- Includes all JS & CSS for the JavaScript Data Grid --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script> <style> button { display: inline-block; font-weight: bold; } </style></head><body> <div id="myGrid" class="ag-theme-alpine" style="height: 200px; width: 600px;"></div> <div style="display: flex; flex-direction: column; height: 100%"> <div style="margin: 10px 0"> <button onclick="onBtnUpdate()">Show CSV export content text</button> <button onclick="onBtnExport()">Download CSV export file</button> </div> <div style="flex: 1 1 0; position: relative; display: flex; flex-direction: row; gap: 20px"> <div id="gridContainer" style="flex: 1"> <div id="myGrid" style="height: 100%; display: block; flex: 1" class="ag-theme-quartz"></div> </div> </div> <div> <textarea rows="8" cols="85" id="csvResult" style="flex: 1" placeholder="Click the Show CSV export content button to view exported CSV here" ></textarea> </div> </div> <script > let gridApi; const gridOptions = { defaultColDef: { editable: true, minWidth: 100, flex: 1, }, suppressExcelExport: true, popupParent: document.body, columnDefs: [{ field: "make" }, { field: "model" }, { field: "price" }], rowData: [ { make: "Toyota", model: "Celica", price: 35000 }, { make: "Ford", model: "Mondeo", price: 32000 }, { make: "Porsche", model: "Boxster", price: 72000 }, ], }; function onBtnExport() { gridApi.exportDataAsCsv(); } function onBtnUpdate() { document.querySelector("#csvResult").value = gridApi.getDataAsCsv(); } // setup the grid after the page has finished loading document.addEventListener("DOMContentLoaded", function () { var gridDiv = document.querySelector("#myGrid"); gridApi = agGrid.createGrid(gridDiv, gridOptions); }); </script></body></html>页面效果展示：
见 官网案例 【JavaScript Grid: Excel Import | AG Grid】。
相关推荐
阅读此文前，诚邀您点击一下“关注”，方便您随时查阅一系列优质文章，同时便于进行讨论与分享，感谢您的支持！在现代社会，随着科技的飞速发展，我们常常习惯性地认为，只要有足够的设备和资金，任何工程都能轻松完...
外媒：中国悄悄做实验了，真的是瞒过了所有人啦，不公布，根本就没有人知道啊！的确，这个实验也是我国航天中心在公布之后才知道，并且还是利用实践十九号卫星做的实验，这都多久了？才公布出来？所以，不公布真不知...
2003年10月15日，杨利伟搭乘神舟五号航天飞船，叩问苍穹，揭开了中国载人航天的序幕。“神五”的升空，在菏泽曹县一位13岁少年心中，种下了“飞天梦”。宋令东跟同学们说：“以后长大了，我也要当宇航员，...
前言硅谷是科技的圣地，同时也是一群科技大佬们，角逐的角斗场，就是这么一个充满竞争的地方，一位华人女性，却硬生生撕开了一道口子，用实力和韧性，成为芯片行业的“女王”。她就是苏姿丰，AMD的掌舵人，一个能...
在阅读此文前，为了方便您进行讨论和分享，麻烦您点击一下“关注”，可以给您带来不一样的参与感，感谢您的支持。#头条创作游园会#本文章内容均有可靠的信息来源，相关信源加在文章结尾【前言】2012年6月，神...
由自然资源部组织的中国第41次南极考察队在本月初从广州正式出征，分别搭乘“雪龙”和“雪龙2”号科考船奔赴南极，目前仍在航渡进行中。近日，先遣队34人提前抵达我国第五座南极考察站秦岭站，进行设备启动、恢...
好消息！T3航站楼要来啦！浦东机场四期扩建航站区主体工程已正式开工，作为此次扩建的核心工程，T3航站楼位于T1、T2航站楼及卫星厅南侧，设计容量5000万人次。详见↓浦东机场四期工程进入全面建设的新阶...
“白帝”空天战斗机震撼亮相！“南天门计划”探索科幻未来。在珠海航展的璀璨舞台上，一系列令人瞩目的新型装备和概念设计犹如一颗颗璀璨的星辰，照亮了航空与航天领域的未来之路。其中，“白帝”空天战斗机的惊艳登...
评论列表 （0条）