【ag-grid-vue】column

网格中的每一列都使用列定义(ColDef)来定义。列根据在网格选项中指定的列定义的顺序在网格中定位。

列定义

 下面的例子展示了一个定义了3列的简单网格:

<template><ag-grid-vuestyle="height: 300px; width: 1000px"class="ag-theme-balham":columnDefs="columnDefs":rowData="rowData"@grid-ready="onGridReady"></ag-grid-vue>
</template><script>
import { AgGridVue } from "ag-grid-vue";
export default {name: "AgTable",components: {AgGridVue,},data() {return {gridApi: null,columnDefs: [{ field: "athlete" }, { field: "sport" }, { field: "age" }],rowData: [{ athlete: "athlete-01", sport: "sport-01", age: "age-01" },{ athlete: "athlete-02", sport: "sport-02", age: "age-02" },],};},methods: {onGridReady(params) {this.gridApi = params.api;this.gridApi.sizeColumnsToFit();},},
};
</script>

列头分组

如果你想对列进行分组,你可以像这样将它们作为子列包含: 

 columnDefs: [{headerName: "Group A",children: [{ field: "athlete" },{ field: "sport" },{ field: "age" },]}]

效果 

 访问行数据值

colDef。字段属性用于访问行数据对象中的值。在大多数情况下,字段将是来自行数据对象的属性名。但是,如果行数据包含嵌套对象,则可以使用点表示法引用深层属性值。

例如,如果行数据有一个对象属性奖牌,其中包含个人奖牌数,那么要显示获得的金牌,请使用字段值'medal .gold'。

使用规则 

<ag-grid-vue:rowData="rowData":columnDefs="columnDefs"
</ag-grid-vue>this.rowData = [{athlete: 'Michael Phelps',medals: {gold: 8, silver: 1, bronze: 0}}
];
this.columnDefs = [{ field: 'athlete' },// Using dot notation to access nested property{ field: 'medals.gold', headerName: 'Gold' },
];

 示例

<template><ag-grid-vuestyle="height: 200px; width: 1000px"class="ag-theme-balham":columnDefs="columnDefs":rowData="rowData"@grid-ready="onGridReady"></ag-grid-vue>
</template><script>
import { AgGridVue } from "ag-grid-vue";
export default {name: "AgTable",components: {AgGridVue,},data() {return {gridApi: null,columnDefs: [{ field: "name" },{ field: "medals.gold", headerName: "Gold" },{ field: "person.age" },],rowData: [{name: "Michael Phelps",person: {age: 23,country: "United States",},medals: {gold: 8,silver: 0,bronze: 0,},},{name: "Michael Phelps",person: {age: 19,country: "United States",},medals: {gold: 6,silver: 0,bronze: 2,},},{name: "Michael Phelps",person: {age: 27,country: "United States",},medals: {gold: 4,silver: 2,bronze: 0,},},],};},methods: {onGridReady(params) {this.gridApi = params.api;this.gridApi.sizeColumnsToFit();},},
};
</script>

 效果

自定义列类型

除了上述特性之外,网格还提供了其他方法来帮助简化和避免重复的列定义。这是通过以下方式完成的:

  • defaultColDef:包含所有列将继承的属性。
  • defaultColGroupDef:包含所有列组将继承的属性。
  • columnTypes:包含列定义可以继承的属性的特定列类型。

默认列和列类型可以指定列上可用的任何列属性。

 注意:列类型被设计为仅对列工作,即它们不会应用于列组。

 下面的代码片段演示了这三个属性:

<ag-grid-vue:columnDefs="columnDefs":defaultColDef="defaultColDef":defaultColGroupDef="defaultColGroupDef":columnTypes="columnTypes"/* other grid options ... */>
</ag-grid-vue>this.columnDefs = [// uses the default column properties{ headerName: 'Col A', field: 'a'},// overrides the default with a number filter{ headerName: 'Col B', field: 'b', filter: 'agNumberColumnFilter' },// overrides the default using a column type{ headerName: 'Col C', field: 'c', type: 'nonEditableColumn' },// overrides the default using a multiple column types{ headerName: 'Col D', field: 'd', type: ['dateColumn', 'nonEditableColumn'] }
];// a default column definition with properties that get applied to every column
this.defaultColDef = {// set every column widthwidth: 100,// make every column editableeditable: true,// make every column use 'text' filter by defaultfilter: 'agTextColumnFilter',
};// a default column group definition with properties that get applied to every column group 
this.defaultColGroupDef = {marryChildren: true,
};// define a column type (you can define as many as you like)
this.columnTypes = {nonEditableColumn: { editable: false },dateColumn: {filter: 'agDateColumnFilter',filterParams: { comparator: myDateComparator },suppressMenu: true}
};

当网格创建列时,它从默认列定义开始,然后添加在启用Cell Data Type上定义的属性,然后添加通过列类型定义的属性,最后添加来自特定列定义的属性。

在每个阶段,如果已经存在列属性,则后者将覆盖现有值。例如,如果defaultColDef设置为edit: true,但columnType设置为edit: false,则该列将不可编辑。 

例如,下面是创建上面所示的“Col C”时使用的步骤大纲:

// Step 1: the grid starts with an empty definition
{}// Step 2: default column properties are merged in
{ width: 100, editable: true, filter: 'agTextColumnFilter' }// Step 3: column type properties are merged in (using the 'type' property), overriding where necessary
{ width: 100, editable: false, filter: 'agTextColumnFilter' }// Step 4: finally column definition properties are merged in, overriding where necessary
{ headerName: 'Col C', field: 'c', width: 100, editable: false, filter: 'agTextColumnFilter' }

 下面的示例演示了不同的配置属性

1. 普通设置(不设置默认值)

<template><ag-grid-vuestyle="width: 100%; height: 100%"class="ag-theme-alpine":columnDefs="columnDefs"@grid-ready="onGridReady":rowData="rowData"></ag-grid-vue>
</template><script>
import { AgGridVue } from "ag-grid-vue";export default {name: "AgTable",components: {AgGridVue,},data() {return {gridApi: null,columnDefs: [{ field: "athlete" },{ field: "sport" },{ field: "age", type: "numberColumn" },{ field: "year", type: "numberColumn" },{field: "date",type: ["dateColumn", "nonEditableColumn"],width: 220,},{headerName: "Medals",groupId: "medalsGroup",children: [{ headerName: "Gold", field: "gold", type: "medalColumn" },{ headerName: "Silver", field: "silver", type: "medalColumn" },{ headerName: "Bronze", field: "bronze", type: "medalColumn" },{headerName: "Total",field: "total",type: "medalColumn",// 该列是可折叠的columnGroupShow: "closed",},],},],gridApi: null,columnApi: null,defaultColDef: {// 设置默认列宽度width: 150,// 使每个列都可编辑editable: true,// 让每个列默认使用'text'过滤器filter: "agTextColumnFilter",// 默认情况下启用浮动过滤器floatingFilter: true,// 调整列的大小resizable: true,// 禁用单元格数据类型cellDataType: false,},defaultColGroupDef: null,columnTypes: null,rowData: null,};},methods: {onGridReady(params) {this.gridApi = params.api;// this.gridApi.sizeColumnsToFit();this.gridColumnApi = params.columnApi;const updateData = (data) => params.api.setRowData(data);fetch("https://www.ag-grid.com/example-assets/olympic-winners.json").then((resp) => resp.json()).then((data) => updateData(data));},},created() {this.defaultColGroupDef = {marryChildren: true,};this.columnTypes = {numberColumn: { width: 130, filter: "agNumberColumnFilter" },medalColumn: { width: 100, columnGroupShow: "open", filter: false },nonEditableColumn: { editable: false },dateColumn: {// specify we want to use the date filterfilter: "agDateColumnFilter",// add extra parameters for the date filterfilterParams: {// provide comparator functioncomparator: (filterLocalDateAtMidnight, cellValue) => {// In the example application, dates are stored as dd/mm/yyyy// We create a Date object for comparison against the filter dateconst dateParts = cellValue.split("/");const day = Number(dateParts[0]);const month = Number(dateParts[1]) - 1;const year = Number(dateParts[2]);const cellDate = new Date(year, month, day);// Now that both parameters are Date objects, we can compareif (cellDate < filterLocalDateAtMidnight) {return -1;} else if (cellDate > filterLocalDateAtMidnight) {return 1;} else {return 0;}},},},};},
};
</script>

 效果

2. 添加默认设置 defaultColDef 

<template><ag-grid-vuestyle="width: 100%; height: 100%"class="ag-theme-alpine":columnDefs="columnDefs"@grid-ready="onGridReady":defaultColDef="defaultColDef":rowData="rowData"></ag-grid-vue>
</template>
defaultColDef: {// 设置默认列宽度width: 150,// 使每个列都可编辑editable: true,// 让每个列默认使用'text'过滤器filter: "agTextColumnFilter",// 默认情况下启用浮动过滤器floatingFilter: true,// 调整列的大小resizable: true,// 禁用单元格数据类型cellDataType: false,},

 效果

3.  defaultColGroupDef

 Marry Children

有时您希望组的列始终粘在一起。要实现这一点,请设置列组属性marryChildren=true。下面的例子演示了以下内容:

'Medals'有marryChildren=true。
如果在这些组中移动列,则无法将列移出组。例如,如果你拖拽'Gold',就不可能把它拖出'Medals'组。
如果移动非组列,例如Silver,则不可能将其放置在组的中间,因此不可能将组分开。

 举例:

1. 没有设置defaultColGroupDef

 初始状态

 拖动列“Silver”后

 2. 设置defaultColGroupDef

<template><ag-grid-vuestyle="width: 100%; height: 100%"class="ag-theme-alpine":columnDefs="columnDefs"@grid-ready="onGridReady":defaultColDef="defaultColDef":defaultColGroupDef="defaultColGroupDef":rowData="rowData"></ag-grid-vue>
</template>created() {this.defaultColGroupDef = {marryChildren: true,};
}

 初始状态

  拖动列“Silver”后

 

4. columnTypes 

<template><ag-grid-vuestyle="width: 100%; height: 100%"class="ag-theme-alpine":columnDefs="columnDefs"@grid-ready="onGridReady":defaultColDef="defaultColDef":defaultColGroupDef="defaultColGroupDef":columnTypes="columnTypes":rowData="rowData"></ag-grid-vue>
</template>created() {this.columnTypes = {numberColumn: { width: 130, filter: "agNumberColumnFilter" },medalColumn: { width: 100, columnGroupShow: "open", filter: false },nonEditableColumn: { editable: false },dateColumn: {// specify we want to use the date filterfilter: "agDateColumnFilter",// add extra parameters for the date filterfilterParams: {// provide comparator functioncomparator: (filterLocalDateAtMidnight, cellValue) => {// In the example application, dates are stored as dd/mm/yyyy// We create a Date object for comparison against the filter dateconst dateParts = cellValue.split("/");const day = Number(dateParts[0]);const month = Number(dateParts[1]) - 1;const year = Number(dateParts[2]);const cellDate = new Date(year, month, day);// Now that both parameters are Date objects, we can compareif (cellDate < filterLocalDateAtMidnight) {return -1;} else if (cellDate > filterLocalDateAtMidnight) {return 1;} else {return 0;}},},},};},

 示例

右对齐和数字列

网格为向右对齐列提供了方便的快捷方式。将列定义类型设置为rightalaligned将列标头和内容向右对齐,这使得用户更容易扫描数据。 

注意:

因为右对齐用于数字,所以我们还提供了一个别名numericColumn,可用于将标题和单元格文本向右对齐。 

使用规则 

<ag-grid-vue:columnDefs="columnDefs"
</ag-grid-vue>this.columnDefs = [{ headerName: 'Column A', field: 'a' },{ headerName: 'Column B', field: 'b', type: 'rightAligned' },{ headerName: 'Column C', field: 'c', type: 'numericColumn' },
];

 右对齐列类型通过设置标题和单元格类属性来工作,如下所示。如果您手动设置headerClass或cellClass,那么您可能需要自己包含右对齐的CSS类,因为列类型属性被显式定义的列属性覆盖。

rightAligned: {headerClass: 'ag-right-aligned-header',cellClass: 'ag-right-aligned-cell'
}

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

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

相关文章

自动化的驱动力,工控机助您实现智能生产!

“智能工厂建设如火如荼&#xff0c;部分成果已经落地&#xff0c;在大规模资金投入的市场催化下&#xff0c;海尔、海信等制造企业通过智能工厂手段推进生产效率成倍增长的新闻层出不穷。在工业4.0时代&#xff0c;“中国制造2025”战略中&#xff0c;智能工厂构建都是其中不可…

【KMP算法-代码随想录】

目录 1.什么是KMP2.什么是next数组3.什么是前缀表&#xff08;1&#xff09;前后缀含义&#xff08;2&#xff09;最长公共前后缀&#xff08;3&#xff09;前缀表的必要性 4.计算前缀表5.前缀表与next数组&#xff08;1&#xff09;使用next数组来匹配 6.构造next数组&#xf…

1.linux的常用命令

目录 一、Linux入门 二、Linux文件系统目录 三、Linux的vi和vim的使用 四、Linux的关机、重启、注销 四、Linux的用户管理 五、Linux的运行级别 六、Linux的文件目录指令 七、Linux的时间日期指令 八、Linux的压缩和解压类指令 九、Linux的搜索查找指令 ​​​​​​…

windows可视化界面管理服务器上的env文件

需求&#xff1a;在 Windows 环境中通过可视化界面编辑位于 Linux 主机上的 env 文件的情况&#xff0c;我现在环境是windows环境&#xff0c;我的env文件在linux的192.168.20.124上&#xff0c;用户是op&#xff0c;密码是op&#xff0c;文件绝对路径是/home/op/compose/env …

无涯教程-PHP - 性能优化

根据Zend小组的说明,以下插图显示了PHP 7与PHP 5.6和基于流行的基于PHP的应用程序上的HHVM 3.7。 Magento 1.9 与执行Magento事务的PHP 5.6相比&#xff0c;PHP 7的运行速度证明是其两倍。 Drupal 7 在执行Drupal事务时&#xff0c;与PHP 5.6相比&#xff0c;PHP 7的运行速度…

SQL 大小敏感问题

在SQL中&#xff0c;关键字和函数名 是不区分 大小写的 比如&#xff08;select、where、order by 、group by update 等关键字&#xff09;&#xff0c;以及函数(ABS、MOD、round、min等) window系统默认是大小写不敏感 &#xff08;ZEN文件和zen 文件 不能同时存在&#xff…

【vue3+ts项目】配置husky+配置commitlint

上一篇文章中配置了eslint校验代码工具 【vue3ts项目】配置eslint校验代码工具&#xff0c;eslintprettierstylelint 1、配置husky 每次手动执行命令才能格式化代码&#xff0c;如果有人没有格式化就提交到远程仓库&#xff0c;这个规范就起不到作用了&#xff0c;所有需要强…

Arcgis colorRmap

arcgis中colorRmap对应的名称&#xff1a; 信息来源&#xff1a;https://developers.arcgis.com/documentation/common-data-types/raster-function-objects.htm 在arcpy中使用方法&#xff1a; import arcpy cr arcpy.mp.ColorRamp("Yellow to Red")python中 ma…

wqs二分

前提&#xff1a;答案满足凸性 题目类似为 n n n 个里面选 m m m 个求某种代价&#xff0c;暴力二维dp复杂度大&#xff0c;但容易计算不限制选的次数。 由于不限制选的次数&#xff0c;所以给选一个东西给一个代价 v v v&#xff0c;然后判断最后选了多少个&#xff0c;再…

Docker(md版)

Docker 一、Docker二、更换apt源三、docker搭建四、停启管理五、配置加速器5.1、方法一5.2、方法二 六、使用docker运行漏洞靶场1、拉取tomcat8镜像2、拉取成功3、开启服务4、查看kali的IP地址5、访问靶场6、关闭漏洞靶场 七、vulapps靶场搭建 一、Docker Docker是一个开源的应…

2023国赛数学建模思路 - 案例:随机森林

文章目录 1 什么是随机森林&#xff1f;2 随机深林构造流程3 随机森林的优缺点3.1 优点3.2 缺点 4 随机深林算法实现 建模资料 ## 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 什么是随机森林&#xff…

python网络编程

文章目录 socket套接字客户端/服务模型linux文件描述符fdLinux网络IO模型详解网络服务器Apache VS Nginx生产者消费者-生成器版客户端/服务端-多线程版IO多路复用TCPServer模型异步IO多路复用TCPServer模型 socket套接字 套接字&#xff08;socket&#xff09;是抽象概念,表示T…

c++ qt--事件(第六部分)

c qt–事件&#xff08;第六部分&#xff09; 一.编辑伙伴&#xff0c;编辑顺序&#xff08;按TAB进行切换&#xff09; 1.编辑伙伴 此功能在设计界面如下的位置 1.设置伙伴关系 鼠标左键长按一个Label组件然后把鼠标移到另一个组件上 2.伙伴关系的作用 伙伴关系的作用就是…

HoudiniVex笔记_P26_RecursionBasics递归基础

原视频&#xff1a;https://www.youtube.com/playlist?listPLzRzqTjuGIDhiXsP0hN3qBxAZ6lkVfGDI Bili&#xff1a;Houdini最强VEX算法教程 - VEX for Algorithmic Design_哔哩哔哩_bilibili Houdini版本&#xff1a;19.5 1、概述 递归是一种直接或者间接地调用自身的算法&a…

猜数游戏-Rust版

cargo new guessing_game 创建项目 输入任意内容&#xff0c;并打印出来 main.rs: use std::io; // 像String这些类型都在预先导入的prelude里&#xff0c;如果要使用的不在prelude里&#xff0c;则需要显式导入fn main() { println!("猜数"); println!("…

37、springboot 为 spring mvc 提供的自动配置及对自动配置的一些自定义定制(大体思路)

springboot 为 spring mvc 提供的自动配置及对自动配置的一些自定义定制&#xff08;大体思路&#xff09; ★ Spring Boot主流支持两个MVC框架&#xff1a; Spring MVC&#xff08;基于Servlet&#xff09; Spring WebFlux&#xff08;基于Reactive&#xff0c;属于响应式AP…

vcomp140.dll丢失的修复方法分享,电脑提示vcomp140.dll丢失修复方法

今天&#xff0c;我的电脑出现了一个奇怪的问题&#xff0c;打开某些程序时总是提示“找不到vcomp140.dll文件”。这个问题让我非常头疼&#xff0c;因为我无法正常使用电脑上的一些重要软件。为了解决这个问题&#xff0c;我在网上查找了很多资料&#xff0c;并尝试了多种方法…

使用Aircrack-ng进行无线网络破解

Aircrack-ng是一款流行的无线网络渗透测试工具&#xff0c;主要用于密码破解和网络分析。但是&#xff0c;请注意&#xff0c;仅在有合法授权的情况下使用这些工具。 以下是一个使用Aircrack-ng进行无线网络破解的示例&#xff0c;以及一些步骤和注意事项&#xff1a; 步骤&a…

2023年最新版Windows环境下|Java8(jdk1.8)安装教程

个人主页&#xff1a;平行线也会相交 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【JavaSE_primary】 jdk1.8的下载和使用总共分为3个步骤&#xff1a; jdk1.8的下载、jdk1.8的安装、配置环境变量。 目录 一、jdk1.8下载…

IDEA常用配置之类Tab页多行显示

文章目录 IDEA常用配置之类Tab页多行显示 IDEA常用配置之类Tab页多行显示 默认在Idea中打开类过多&#xff0c;后面会隐藏显示&#xff0c;这里修改配置&#xff0c;将类设置为多行显示&#xff0c;方便查找已经打开的类 修改后显示样式