ag-grid 设置行高

ag-gird 表格原生行高实在太宽,现在需要将行高缩小一点.以下将对表格的两种情况进行设置:

1.普通表格数据展示(无分组情况)

   效果如图所示:

设置步骤:

        (1) .rowHeight:设置数据行行高;headerHeight设置表格表头行高,

 rowHeight: 28, // 设置表格行高 headerHeight: 30, // 设置表格表头的行高

        (2).在defaultColDef中设置cellStyle.的line-height.

 defaultColDef: { sortable: true, resizable: true, cellStyle: { 'line-height': '28px', // 行高设置同步：跟rowHeight属性设置值一致 }, }, 

      注意: rowHeight的值要与ine-height一致.

       如果不设置line-height值的话,表格中的数据会错位显示.如图所示:

 以下为整个页面代码:

2.列有分组情况:

方法一:

首先,看效果(分组列左边没有计数数据)

 如果有分组列,完全依据以上的无分组情况来写的话,表格数据是有些错位的.

错位效果如下:

所以单靠第一种方法是有问题的,所以自己进行了一下其他设置,暂时能解决这个问题,但是也有一个弊端,弊端在最后会描述.

(1) 首先,rowHeight,line-height这三个属性还是需要设置的,现在展示的就是以上分组数据错位的情况.

(2)重新设置分组列左边的图标( < ,^)样式和位置.

        使用icons属性中的groupExpanded和groupContracted,分别是列展开和折叠的动作.并且在groupExpanded和groupContracted中的img标签中对图片的位置进行设置,以此来调整分组中图标的位置.

icons: { groupExpanded: '', // 展开后的图片 groupContracted: '',// 折叠后的图片 } 

上面代码中的src就是需要放置的图片,在ag-grid中,展开和折叠这两个图片是有地方可以下载的.名字分别是tree-open和tree-closed.

icon下载页面https://www.ag-grid.com/react-data-grid/custom-icons/#provided-theme-iconshttps://www.ag-grid.com/react-data-grid/custom-icons/#provided-theme-icons

        下载下来的图片都是svg格式,需要转化为png格式或者其他格式的图片才能识别并且展示出来.

现在继续看效果,可以看待分组列旁边的计数还是展示错位::

(3) 本人现在暂时未找到方法将计数的格式调整规范,因为只能先隐藏,所以需要启用autoGroupColumnDef属性,就是对分组列进行一些属性设置的方法.并且在里面的cellRendererParams中继续设置suppressCount=true,以此来不显示分组列右边的个数统计..

autoGroupColumnDef: { headerName: '班级（分组后的名称）', // 设置分组之后列的显示名称，如果不设置，则默认显示为“Group”。 minWidth: 100, // 设置分组列的最小宽度，其他属性也可以设置，例如：width；maxWidth sort: 'asc', // 对分组进行排序，asc是升序，desc是降序 pinned: 'left', // 将分组列固定在左边 cellRendererParams: { suppressCount: true, // 不显示分组列右边的计数个数 } }, 

最后,再看一次效果图:

 备注:

        这一部分还用到分组后对分组列的名字显示:即在autoGroupColumnDef属性中设置headerName.

以下为效果源码:

方法二:

即在上述方法基础上不设置 icons,suppressCount, 并且将line-height替换为  ‘margin-top’,将  ‘margin-top’值设置为负数(具体数值需要根据表格调试).但是这样的方法会导致鼠标点击时也有错位的情况.效果如下:

以下是上面效果的所有代码:

方法三:      

        时隔一天，又找到一种方式。现在不仅可以简单设置行高，就连右边的计数也可以显示出来，并且也不用单独替换图标。

        同样先来看效果：

         要实现这样的效果，这里需要设置三个地方：

                （1） 设置rowHeight属性。

 rowHeight: 28, // 设置表格行高 headerHeight: 30, // 设置表格表头的行高 

                （2） 设置cellStyle属性

 cellStyle: (params) => { // 判断是不是分组列，如果是的话就不需要设置line-height属性，如果不是的话就需要设置line-height（因为.ag-cell-expandable只对分组列有作用） if (params.column.colId === "ag-Grid-AutoColumn") { return {}; } return { "line-height": "28px" }; } 

                （3）引入ag-grid的css style中的 .ag-cell-expandable

        注意的是，ag-grid的版本需要是高版本，这个页面用的是 V26的企业版，我之前使用V23的时候，使用 .ag-cell-expandable无效果。不能实现相应功能。

        以下为上图的完整代码：

以上便是本篇文章的所有内容，如果有哪位兄台有更完美的解决方法,请不吝赐教！！！！！