网站菜单导航制作,个人工作室网页设计模板,哪里能找到网站,网站建设网站制作网页一、前言
最近在做一个线上订货平台的项目#xff0c;用户之前都是使用传统的Excel表格完成工作数据的提交和汇总#xff0c;工作效率非常低。
希望我们能将历年的各项数据导入系统#xff0c;之后可以参照历年数据格式#xff0c;能直接在系统上创建新的工作#xff0c…一、前言
最近在做一个线上订货平台的项目用户之前都是使用传统的Excel表格完成工作数据的提交和汇总工作效率非常低。
希望我们能将历年的各项数据导入系统之后可以参照历年数据格式能直接在系统上创建新的工作并进行管理。
在项目中我们需要尽可能的将数据以表格的形式呈现从而最大程度还原用户熟悉的工作操作。
重新开发一套表格组件所使用的时间和精力相对来说是非常大的为了能尽快将成果完美的呈现给用户我们选择了AG-Grid这个号称最强的表格组件。
接下来简单记录下AG-Grid的使用经验方便大家参考。
二、介绍
AG-Grid是一个高级数据网格适用于JavaScript / TypeScript应用程序。AG-Grid没有其他依赖项不需要提前加载 Vue 或 React 或 Angular甚至不使用 JQuery、Undercore 或 LoDash。没有依赖性意味着AG-Grid可以与任何框架一起工作。
它是一种功能强大、灵活且具有高度可定制性的表格解决方案提供了丰富的特性如排序、过滤、分组、编辑、无限滚动、行拖动、分组等甚至可以和桌面Excel文件之间进行复制粘贴多选数据后即时生成图表等强大功能。
且开源免费
三、获取
Github 地址https://github.com/ag-grid/ag-grid官方文档地址https://www.ag-grid.com/中文文档地址https://www.itxst.com/ag-grid/tutorial.html
1. Vue环境
使用 npm 安装 ag-grid-vue3npm install ag-grid-vue3引入并注册到组件template/templatescript
import { ref } from vue;
import ag-grid-community/styles/ag-grid.css;
import ag-grid-community/styles/ag-theme-quartz.css;
import { AgGridVue } from ag-grid-vue3;export default {name: App,components: {AgGridVue,},setup() {},
};
/script定义行列数据setup() {// 行数据要显示的数据const rowData ref([{ make: Tesla, model: Model Y, price: 64950, electric: true },{ make: Ford, model: F-Series, price: 33850, electric: false },{ make: Toyota, model: Corolla, price: 29600, electric: false },]);// 列定义定义要显示的列const colDefs ref([{ field: make },{ field: model },{ field: price },{ field: electric }]);return {rowData,colDefs,};
},使用 Grid 组件配置 rowData 和 columnDefs 属性为表格提供数据templateag-grid-vue:rowDatarowData:columnDefscolDefsstyleheight: 500pxclassag-theme-quartz/ag-grid-vue
/template2. JavaScript环境
提供容器 引入AG-Grid库文件并创建一个空白div html langenheadscript srchttps://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js/script/headbodydiv idmyGrid/div/body
/html创建实例 创建实例并将空白div传入 const gridOptions {};const myGridElement document.querySelector(#myGrid);
// 创建实例传入容器 和 Grid 配置对象
agGrid.createGrid(myGridElement, gridOptions);定义行和列// Grid 配置对象
const gridOptions {// 行数据要显示的数据rowData: [{ make: Tesla, model: Model Y, price: 64950, electric: true },{ make: Ford, model: F-Series, price: 33850, electric: false },{ make: Toyota, model: Corolla, price: 29600, electric: false },],// 列定义定义要显示的列columnDefs: [{ field: make },{ field: model },{ field: price },{ field: electric }]
};添加样式 通过class设置表格主题ag-theme-quartz div idmyGrid classag-theme-quartz styleheight: 500px/div3. 其他方式
Reacthttps://ag-grid.com/react-data-grid/getting-started/Angularhttps://ag-grid.com/angular-data-grid/getting-started/
四、最后
AG-Grid真的是一个功能强大的数据表格借用官网上的一句话作为结束
The Best JavaScript Grid in the World
