ag-grid 使用记录

news/2024/10/31 0:33:42/
ag-grid介绍

ag-grid是一款功能和性能强大外观漂亮的表格插件,ag-grid几乎能满足你对数据表格所有需求。固定列、拖动列大小和位置、多表头、自定义排序等等各种常用又必不可少功能.目前项目使用的是企业版. 企业版与社区版的功能区别请参看功能比较 Vue Data Grid: Community and Enterprise (ag-grid.com)

ag-grid vue中基本用法

<ag-grid-vue style="width: 100%; height: 800px;border:1px solid #ccc" class="table ag-theme-material":rowData="tableData" ><ag-grid-columnfield="姓名" filter="agTextColumnFilter"></ag-grid-column><ag-grid-columnfield="年龄"sortable 可以以年龄进行排序></ag-grid-column><ag-grid-columnfield="性别"></ag-grid-column></ag-grid-vue>import { AgGridVue } from 'ag-grid-vue'
components: {AgGridVue,},data(){tableData: [{姓名:'张三',年龄: 20,性别:'男'},{姓名:'七七',年龄: 12,性别:'女'},{姓名:'胡桃',年龄: 22,性别:'女'},],}

生成最基本的表格:

在这里插入图片描述

ag-grid-vue 属性
属性名称说明类型默认值
rowData表格需要的数据Array
enableRangeSelection是否范围选择Booleanfalse
sideBar右侧sideBar是否显示Booleanfasle
context提供上下文对象,用于通过您的应用程序将其他信息传递给回调。建议传this
rowSelection行选择的类型 单选,多选[‘single’,‘multiple’]Stringsingle
suppressRowClickSelection点击行是否选中行 false为必须点击复选框才选中(开启列复选框见 ag-grid-column 属性表)Booleantrue
localeText本地化配置,(默认语言是英语,需要设置对应的关键字中文翻译实现汉化)Object
defaultColDef列默认配置(见下表)Object
frameworkComponents表格使用的各种组件Object
icons自定义表格上的图标可以是html标签如:{filter: ‘’} 这是将过滤器图标替换成了自定义的图标 具体参考: Vue Data Grid: Custom Icons (ag-grid.com)string
getRowNodeId给定表格每一行唯一的id(标识),如不设置则表格将会从0开始自动生成 参数为回调函数 (data) => data.IDfunction
defaultColDef 属性
属性名称说明类型默认值
resizable是否可以调整列大小(拖动列边框改变列大小)Booleantrue
filter开启筛选(会被ag-grid-column filter 属性覆盖)Booleanfalse
headerCheckboxSelection头部全选框(开启方式见示例)Function
ag-grid-vue 事件
参数说明回调参数
gridReady表格准备完毕事件params.api(表格api调用) params.columnApi(列api调用)
rowDoubleClicked表格某一行双击事件{rowIndex,data} 行号, 该行的数据
rowClicked表格某一行单击事件
cellDoubleClicked单元格双击事件
gridSizeChanged表格大小改变触发事件
cellClicked单元格单击事件

更多事件查看: Vue Data Grid: Grid Events (ag-grid.com)

ag-grid 表格常用api(表格api调用需要在表格onGridReady事件中获取gridApi)
    //ag-grid创建完成后执行的事件onGridReady(params) {// console.log(params)this.gridApi = params.api // 获取gridApi 保存在data中通过gridApi调用ag-grid的方法this.columnApi = params.columnApi // 这个是列的api,其中包含列的操作方法,这里不列举了// 通过gridApi调用ag-grid的自动调整表格到合适的大小的方法this.gridApi.sizeColumnsToFit()},
方法名说明参数
selectAll全选表格所有行
deselectAll全不选
sizeColumnsToFit自动调整表格到合适的大小的方法
getSelectedRows获取当前选择的所有行
getRowNode获取给定的ID的行对象 如果未设置表格getRowNodeId属性则返回表格生成的id,获取到的行对象可以继续调用setSelected 进行行选择例:this.gridApi.getRowNode(0).setSelected(true,true)(行id)
ensureIndexVisible滚动选定的行(使选定的行在可视范围内)(行id,top|bottom|meddle)

更多表格api 参考Vue Data Grid: Grid API (ag-grid.com)

ag-grid-column 属性
属性名称说明可选值类型默认值
headerName显示的标题string
field对应列内容的字段名string
sortable该列启用排序
pinned固定该列left|rightstring
valueFormatter值为一个回调函数,功能与vue的filter类似,可以对当前的数据加工后显示function(data){
return data+1
}
Function
width对应列的宽度number
filter过滤器的类型agNumberColumnFilter(数字过滤器) agTextColumnFilter(文字过滤器) agDateColumnFilter(日期过滤器) agMultiColumnFilter(启动多个过滤器) agSetColumnFilter(在当前列找出可能的值选择过滤 企业版拥有)String
suppressMenu不显示头部菜单true显示,false不显示Booleanfalse
cellRendererFramework当前列使用组件(表格中放入操作按钮或者其他自定义内容)vue组件
menuTabs显示菜单 需要将suppressMenu设为false‘filterMenuTab’ |‘generalMenuTab’ |‘columnsMenuTab’ 后两个企业版拥有Array
filterParams过滤器属性 可以选择进行自定义过滤器 过滤器下方的按钮显示与隐藏 参考https://www.ag-grid.com/vue-data-grid/filter-provided/例:{comparator:comparator, buttons: [‘reset’,‘cancel’,‘apply’]}第一个参数是过滤器自定义的规则,为回调函数,第二个参数为显示过滤器下方的重置,取消,确定按钮 删除就不显示Object
headerComponentParams在使用头部组件时可以使用,相当于给头部组件的参数Object
列组件使用示例 部分代码
// tableBtn.vue
<template><div><el-button size="mini" @click="buttonClicked" type="primary">修改</el-button><el-button size="mini" type="danger">删除</el-button></div>
</template><script>
export default {data() {return {cellValue: null}},beforeMount() {//this.params包含单元格和行信息,在创建时可供此组件使用this.cellValue = this.getValueToDisplay(this.params)},methods: {buttonClicked() {// context为ag-grid-vue属性这里提供的是this表格所在vue组件的实例所以可以调用到父组件中的methodFromParent 函数this.params.context.methodFromParent()},getValueToDisplay(params) {return params.valueFormatted ? params.valueFormatted : params.data}}
}
</script>// index.vue<ag-grid-vue style="width: 100%; height: 800px;border:1px solid #ccc" class="table ag-theme-material":rowData="tableData" :context="this" // 将当前实例传递给组件:localeText="agGridCHSLocalText"><ag-grid-columnfield="操作" :width="150"cellRendererFramework="TableBtn"></ag-grid-column></ag-grid-vue>
<script>
//引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue'
import TableBtn from './TableBtn'
export default {//注册TableBtn组件components: {AgGridVue,TableBtn},
</script>

这里仅仅只是展示了一些常用的属性事件等用法,更多的用法以及功能,请仔细认真阅读官方文档!!!

放两张成品图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FduCAJFU-1632454549700)(./images/Snipaste_2021-09-24_10-58-24.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WqmzRYqr-1632454549702)(./images/Snipaste_2021-09-24_10-59-13.png)]

第二张为自定义过滤器

其他的排序图表生成导出等功能就不一一展示了.

这里仅仅只是展示了一些常用的属性事件等用法,更多的用法以及功能,请仔细认真阅读官方文档!!!

放两张成品图

在这里插入图片描述

在这里插入图片描述

第二张为自定义过滤器

其他的排序图表生成导出等功能就不一一展示了.


http://www.ppmy.cn/news/516807.html

相关文章

Ag-Grid整理

Ag-Grid整理 API文档地址组件用法属性含义API常用方法表格列定义中常用方法Ag-Grid导出代码参照 底部 API文档地址 英文API文档:https://www.ag-grid.com/ 中文API文档:https://www.itxst.com/ag-grid/tutorial.html 组件用法 <!-- 数据列表 --> <ag-grid-vue ref&…

JavaScript下搭建ag-grid

下载ag-grld.js https://github.com/ceolter/ag-grid/ 可以从github中下载&#xff0c;ag-grid.js 在dist目录中&#xff0c;将其取出&#xff0c;放到自己的项目中 导入项目&#xff0c;构建基础骨架 demo.jsp //将 ag-grid.js 导入项目&#xff0c;新建一个单独的文件example…

agGrid不允许对指定行做checkbox选择

官方文档如下描述&#xff1a; https://www.ag-grid.com/javascript-grid-selection/#specify-selectable-rows 界面&#xff1a; 方法一&#xff1a;&#xff08;只控制点击checkbox时不能选择&#xff0c;但是出了一个bug,如有遇到的伙伴望能够交流一下解决方案。 设置某些…

ag-grid表格基本使用方法-React版本

AG表格基本用法及Api 在要使用的项目中&#xff0c;首次使用需要引入相关组件包(注&#xff1a;项目中所有组件都是封装之后的)。引入方式如下:import {Table} from pkg/common/table 引入完成后&#xff0c;在view层需要用到表格的地方直接放入标签。如&#xff1a;<Table…

AgGrid框架的使用感受及前景分析

免责声明&#xff1a;文章源于本人闲情雅致&#xff0c;没有任何广告意图 我向来是不屑于使用前端框架的&#xff0c;最多用一些ui组件&#xff0c;但是ag-grid这个框架太TM好用了。这篇文章介绍下aggrid的一些哲学思想和我的使用感受&#xff0c;顺带记录一些往事。 Competenc…

AG6200 (HDMI转VGA)

AG6200 转换形式&#xff1a;HDMI 1.4b to VGA &#xff1b; 支持分辨率&#xff1a;1920x120060Hz &#xff1b; 支持热插拔检测 &#xff1b; 适应电压&#xff1a;5V To 1.2V&#xff1b; 支持2通道I2S音频接口&#xff1b; 支持1080P分辨率&#xff1b; 封装尺寸&#xff1…

ag-grid在Vue项目中的基本使用

ag-grid官网 1、安装 npm install ag-grid-community ag-grid-vue --save-dev 2、在main.js中引入ag-grid的样式文件 // 引入ag-grid的样式文件 import ../node_modules/ag-grid-community/dist/styles/ag-grid.css; import ../node_modules/ag-grid-community/dist/styles…

ag-grid总结

文档地址 英文API文档:https://www.ag-grid.com/ 中文API文档:https://www.itxst.com/ag-grid/tutorial.html 组件用法 <!-- 数据列表 --> <ag-grid-vue ref"multipleTable" class"table ag-theme-balham" :columnDefs"columnDefs" :…