【ag-grid-vue】列定义(Updating Column Definitions)

列定义一节解释了如何配置列。可以在初始设置列之后更改列的配置。本节介绍如何更新列定义。

添加和删除列

可以通过更新提供给网格的列定义列表来添加和删除列。当设置新列时,网格将与当前列进行比较,并计算出哪些列是旧的(要删除)、哪些列是新的(创建的新列)或保留的。下面的示例演示从网格中添加和删除列。

注意事项如下:

  • 选择按钮以在包括或排除奖章列之间切换 

 示例

<template><div><div class="operate"><button @click="onBtExcludeMedalColumns">onBtExcludeMedalColumns</button><button @click="onBtIncludeMedalColumns">onBtIncludeMedalColumns</button></div><ag-grid-vuestyle="height: 500px; width: 100%"class="ag-theme-alpine":columnDefs="columnDefs":defaultColDef="defaultColDef":rowData="rowData"@grid-ready="onGridReady"></ag-grid-vue></div>
</template><script>
import { AgGridVue } from "ag-grid-vue";
const colDefsMedalsIncluded = [{ field: "athlete" },{ field: "gold" },{ field: "silver" },{ field: "bronze" },{ field: "total" },{ field: "age" },{ field: "country" },{ field: "sport" },{ field: "year" },{ field: "date" },
];
const colDefsMedalsExcluded = [{ field: "athlete" },{ field: "age" },{ field: "country" },{ field: "sport" },{ field: "year" },{ field: "date" },
];
export default {name: "UpdatingColumn",components: {AgGridVue,},data() {return {columnDefs: colDefsMedalsIncluded,gridApi: null,columnApi: null,defaultColDef: {initialWidth: 100,sortable: true,resizable: true,},rowData: null,};},methods: {onBtExcludeMedalColumns() {this.gridApi.setColumnDefs(colDefsMedalsExcluded);},onBtIncludeMedalColumns() {this.gridApi.setColumnDefs(colDefsMedalsIncluded);},onGridReady(params) {this.gridApi = params.api;this.gridColumnApi = params.columnApi;const updateData = (data) => {this.onBtIncludeMedalColumns();this.rowData = data;};fetch("https://www.ag-grid.com/example-assets/olympic-winners.json").then((resp) => resp.json()).then((data) => updateData(data));},},
};
</script><style lang="less" scoped></style>

初始状态

点击按钮 onBtExcludeMedalColumns

 

更新列定义

可以更新列定义的所有属性。例如,如果要更改列的Header Name,则更新列定义上的headerName,然后再次将列定义列表设置到网格中。

不可能单独更新一个列的列定义。只能应用一组新的列定义。

下面的示例演示更新列定义以更改列的配置方式。注意事项如下:

  • 所有列都只提供列定义上设置的字段属性。
  • “Set Header Names”和“Remove Header Names”设置并随后删除所有列的headerName属性。
  • “Set Value Formatter”和“Remove Value Formatter”设置并随后删除所有列上的valueFormatter属性。
  • 请注意,在更新列定义之间,列的任何调整大小、排序等都保持不变。

示例

现有列的列名是这样的

columnDefs= [
{ field: 'athlete' },{ field: 'age' },{ field: 'country' },
{ field: 'sport' },{ field: 'year' },{ field: 'date' },
{ field: 'gold' },{ field: 'silver' },{ field: 'bronze' },
{ field: 'total' }
]

 我们希望触发某个操作后列名变成这样的

 思路

在每个列定义中这样一个属性 headerName 设置了这个属性后列名的展示以它为主,

不设置该属性则以field为主(此时field即作为列的映射又做为列展示的名称)

 this.gridApi.setColumnDefs(this.columnDefs);
setHeaderNames() {this.columnDefs.forEach(function (colDef, index) {colDef.headerName = 'C' + index;});this.gridApi.setColumnDefs(this.columnDefs);
}

线上示例地址参考 https://plnkr.co/edit/?open=main.js&preview

 更改列状态

列定义的部分表示列状态。Column State是有状态信息,表示网格的变化值。

列定义的所有状态属性如下:

 

Stateful AttributeInitial AttributeDescription
widthinitialWidth列的宽度
flexinitialFlex用于设置此列宽度的伸缩值
hideinitialHide是否应该隐藏这一列
pinnedinitialPinned这列是否应该固定
sortinitialSort列的排序
sortIndexinitialSortIndex按顺序应用排序,如果是多列排序
rowGroupinitialRowGroup该列是否应该是行组
rowGroupIndexinitialRowGroupIndex该列是否应该是行组,以及以什么顺序。
pivotinitialPivot如果这一列是主列
pivotIndexinitialPivotIndex这一列是否应该是主列,以什么顺序
aggFuncinitialAggFunc通过行分组或透视聚合此列的函数。

 未完待续。。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/87476.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

6、css学习6(表格)

1、指定CSS表格边框&#xff0c;使用border属性。 2、表格双边框是因为th/td有各自独立的边框。 3、boder-collapse设置表格边框是否被折叠成一个单一的边框。 4、width和height属性定义表格的宽度和高度。 5、text-align属性设置水平对齐方式。 6、vertic-align属性设置垂…

网络服务第二次作业

[rootlocalhost ~]# vim /etc/httpd/conf.d/vhosts.conf <Virtualhost 192.168.101.200:80> #虚拟主机IP及端口 DocumentRoot /www/openlab #网页文件存放目录 ServerName www.openlab.com #服务器域名 </VirtualHost> …

Flutter 逆向安全

前言&#xff1a; 前几天在 "学习" 一个项目&#xff0c; 发现是用 Flutter 开发的。之前研究过 flutter 的逆向&#xff0c;早期 Flutter 有工具可以通过快照进行反编译&#xff1a;《对照表如下》 新的版本开发者没有维护了。 目前没有很好的工具 可以对 Flutter 进…

2023高教社杯数学建模思路 - 案例:FPTree-频繁模式树算法

文章目录 算法介绍FP树表示法构建FP树实现代码 建模资料 ## 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法&#xff0c;就是频繁模式树算法&#xff0c…

JavaIO流

JavaIO流 一、概念二、File类三、File类的使用1、File文件/文件夹类的创建2、File类的获取操作3、File类判断操作 - boolean4、File类对文件/文件夹的增删改5、File类的获取子文件夹以及子文件的方法 四、Java中IO流多种维度的维度1、按照流向 - Java程序2、按照流的大小分类3、…

【UE5】用法简介-使用MAWI高精度树林资产的地形材质与添加风雪效果

首先我们新建一个basic工程 然后点击floor按del键&#xff0c;把floor给删除。 只留下空白场景 点击“地形” 在这个范例里&#xff0c;我只创建一个500X500大小的地形&#xff0c;只为了告诉大家用法&#xff0c;点击创建 创建好之后有一大片空白的地形出现 让我们点左上角…

Unity创建一个可移动的2D角色

文章目录 创建角色与场景创建地面 角色控制脚本检测地面 运行结果 创建角色与场景 我们首先创建一个角色&#xff0c;这里我新建了一个胶囊体用来当Player&#xff0c;一个Square用来当地面。 接下来&#xff0c;为角色增加碰撞体和刚体&#xff0c;为地面增加碰撞体。然后我…

Matlab图像处理-除法运算

除法运算 除法运算可用于去除数字化器灵敏度随空间变化造成的影响。图像的除法运算给出的是两幅图像相应像素值的变化比率&#xff0c;而不是每个像素的绝对差异&#xff0c;因而图像除法也称为比率变换&#xff0c;常用于校正成像设备的非线性影响。 在 MATLAB图像处理工具箱…

Nginx-报错no live upstreams while connecting to upstream

1、问题描述 生产环境Nginx间歇性502的事故分析过程 客户端请求后端服务时一直报错 502 bad gateway&#xff0c;查看后端的服务是正常启动的。后来又查看Nginx的错误日志&#xff0c;发现请求后端接口时Nginx报错no live upstreams while connecting to upstream&#xff0c…

dolphinschedule配置企微告警服务(WeChat群组)

一、前置说明 ds配置好工作流后&#xff0c;比较重要的一个就是上线后的监控报警服务&#xff0c;如果你是基于企微作为协同办公的&#xff0c;WeChat群组预警必须是要安排上的&#xff0c;文章基于自建应用配合群组方式构建预警群&#xff0c;接入后&#xff0c;任务成功或者…

CSS中如何实现背景图片的平铺和定位?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 平铺背景图片⭐ 背景图片定位⭐ 同时设置平铺和定位⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是…

记一次因函数入参没有带类型所引发的问题

工作中&#xff0c;sit测试中&#xff0c;测试突然发现页面异常。经排查&#xff0c;是函数参数没有定义类型所以&#xff0c;dart默认是dynamic类型&#xff0c;而dynamic编译阶段不检查类型&#xff0c;正是由于编译阶段不检查类型&#xff0c;很明显的错误也只能运行的时候才…