![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ag-grid
文章平均质量分 58
前端菜鸟来报道
菜鸟一只,求大神带带我!
展开
-
关于ag-grid中过滤后再勾选checkbox后获取数据不正确的问题。
ag-grid 过滤,checkbox选择数据原创 2023-04-28 15:29:44 · 664 阅读 · 0 评论 -
ag-grid 表格数据更新
有时候我们会涉及到数据更新,但是又不想刷新整个页面,那么就可以单独对表格中的数据进行更新。以下有三种更新情况:表格整个数据的更新;更新一行数据;更新单元格数据。最初的表格数据如下图:一 更新整个表格的数据 使用setRowData方法。 function resetGrid() { //新的数据项 const Newdata = [ { id: "dd", name: '...原创 2021-10-27 17:37:57 · 5247 阅读 · 0 评论 -
ag-grid 自带css样式记录
本篇文章是打算自己用于记录ag-grid自身的css样式的记录和功能。 1..ag-header-group-cell-with-group 作用:多表头,前几层(最后一行表头除外)表头样式的设置。 .ag-header-group-cell-with-group { background-color: gold; color: red; } ...原创 2021-09-18 12:05:20 · 1562 阅读 · 5 评论 -
ag-grid 表头样式(颜色渲染)
一 整行表头渲染同一个样式: 这种比较简单,直接设置css 样式,现在还缺第二行背景颜色的设置。具体css样式如下: /* 第一行表头的样式 */ .ag-header-group-cell-with-group { background-color: gold; color: red; } /* 第二行表头的字体设置 */ .ag-hea...原创 2021-09-18 11:55:36 · 3514 阅读 · 0 评论 -
ag-grid 设置行高
ag-gird 表格原生行高实在太宽,现在需要将行高缩小一点.以下将对表格的两种情况进行设置:1.普通表格数据展示(无分组情况) 效果如图所示:设置步骤: (1) .rowHeight:设置数据行行高;headerHeight设置表格表头行高, rowHeight: 28, // 设置表格行高 headerHeight: 30, // 设置表格表头的行高 (2).在defaultColDef中设置cellStyle.的line-height....原创 2021-09-13 20:42:17 · 3282 阅读 · 0 评论 -
ag-grid 自适应大小
ag-grid 表格需要自适应浏览器窗口大小,以下为没有自适应的情况:以下为已经自适应的情况:如果需要自适应,统一调用api:sizeColumnsToFit()即可,只不过调用的触发事件不同。 分别有以下三种情况出现:情况1:表格初始化完毕后自适应浏览器大小。触发事件:ag-grid中的onGridReady事件:在表格ok后调用,适应浏览器大小。情况2:当浏览器页面大小没变,但是表格大小有变化时,也重绘至自适应浏览器大小。触发事件:ag-grid中的onGri...原创 2021-09-03 14:15:30 · 4654 阅读 · 0 评论 -
ag-grid 单元格编辑-下拉框
一、基本下拉框 效果如下:选中后的值直接就是界面显示的值(也是代码中定义的值)。效果如下:二、有id 的下拉框 这个下拉框跟平常用的select 框类似,设置id和value,在界面选择的时候显示的是value值,但是选中值后,后台获取到的被选中值是value对应的id值。具体效果如下:以上两个例子的代码如下:<!doctype html><html><head> <met...原创 2021-08-27 18:17:58 · 4253 阅读 · 5 评论 -
ag-grid 合并单元格(合并行)
最终效果如图:页面完整代码如下:<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>合并单元格行</title> <script .原创 2021-08-27 17:10:59 · 5991 阅读 · 7 评论 -
ag-grid 设置单元格以及行的颜色
在使用ag-grid的时候有通过单元格的值设置不同行颜色,然后百度了网上的方法,汇总了一下,具体效果图如下: 话不多说,直接上代码。<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink...原创 2020-06-11 15:14:28 · 7406 阅读 · 1 评论 -
ag-grid 列组和行组学习
首先,话不多说,直接上效果图。 代码如下:<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=...原创 2020-06-11 11:43:13 · 3494 阅读 · 0 评论 -
ag-grid 学习笔记五:ag-grid事件(onRowClicked行点击事件、onCellClicked单击单元格事件、onCellDoubleClicked双击单元格事件、全部事件列表)
一onRowClicked行点击事件 此事件发生在点击表格行的时候,事件写在gridOptions下。 onRowClicked: function (event) { //event.data 选中的行内数据,event.event 为鼠标事件,等其他。可以log自己看一下 console.log('a row was clicked', event); var itxst = JSON....原创 2020-06-10 20:42:15 · 7257 阅读 · 0 评论 -
ag-grid 学习笔记四:ag-grid方法(重设行数据、增删改、反选、新增列、插入新行、合计行接口、遍历行对象、获取置顶行数量、获取底部合计行对象、获取行对象、刷新、单元格焦点)
一 setRowData重新设置表格行数据 重新设置表格数据很简单,只需要调用 gridOptions.api.setRowData(数据集)接口传入数据即可。 以下函数为调用方式。function resetGrid() { //新的数据项 var Newdata = [ { name: '小明', sex: '男', age: '100', 'jg': '中国', 'sf': '浙江...原创 2020-06-10 20:06:43 · 12901 阅读 · 0 评论 -
ag-grid 学习笔记三:ag-grid设置(定义列、选择行、复选框、设置行高列宽、置顶合计行、底部合计行、行组、客户端排序)
目录一 定义列二 选择行三 设置复选框四 设置行高列宽五 置顶合计行六 底部合计行七 行组八 客户端排序一 定义列表格的列有如下常用属性。名称 说明 headerName 显示的列名称,和数据没有关系显示给用户看的 field 字段,headerName对于的数据字段,如上面代码“姓名”列对应的数据字段是name pinned 列固定(冻结列)的位置,,支持left right,把列固定在左边或者右边 valueFormat原创 2020-06-09 16:32:02 · 12909 阅读 · 1 评论 -
ag-grid 学习笔记二:常用功能(多表头、固定列、宽度设置和位置、数据筛选器、表格编辑)
目录一 多表头二 固定列三 拖动改变列的宽度和位置四 数据筛选器五 编辑表格六 所有代码一 多表头1.合并两层表头 合并表头,在第一层表头下加children子项即可。例如: //定义表格列 var columnDefs = [ { headerName: '分组A', children: [ { he...原创 2020-06-09 15:44:31 · 12284 阅读 · 0 评论 -
ag-grid 学习笔记一:使用ag-grid显示简单数据
我的第一个前端项目就用到了ag-grid。写这篇文章用来记录学习到的东西。一 导入ag-grid-enterprise.min.js文件的方式。导入方式有两种: 方式一:使用<script>标签添加。前提是已经将文件放到了此项目相关文件夹中。<script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script> 方式二 :通过链接添加,这个就不需要...原创 2020-06-09 11:42:52 · 3757 阅读 · 1 评论