當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ag-grid 设置行高

發布時間：2023/12/14 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 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: '<img src="../image/tree-open.png"style="width: 20px;height:20px;margin-bottom: 10px"/>', // 展開后的圖片groupContracted: '<img src="../image/tree-closed.png"style="width: 20px;height:20px;margin-bottom: 10px"/>',// 折疊后的圖片}

上面代碼中的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；maxWidthsort: 'asc', // 對分組進行排序，asc是升序，desc是降序pinned: 'left', // 將分組列固定在左邊cellRendererParams: {suppressCount: true, // 不顯示分組列右邊的計數個數}},

最后,再看一次效果圖:

?備注:

? ? ? ? 這一部分還用到分組后對分組列的名字顯示:即在autoGroupColumnDef屬性中設置headerName.

以下為效果源碼:

<!doctype html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>ag-grid入門示例</title><script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script></head><body><div id="myGrid" style="width: 100%;height: 1000px;" class="ag-theme-alpine"></div><script>//定義表格列var columnDefs = [{headerName: '班級',field: 'class',rowGroup: true, // 進行分組顯示hide: true // 隱藏本列（會重新顯示一列分組后的數據）},{headerName: '姓名',field: 'name'},{headerName: '性別',field: 'sex'},{headerName: '年齡',field: 'age'},{headerName: '省份',field: 'sf'},];var data = [{ class: '一班', name: '張三', sex: '男', age: '100', 'sf': '浙江' },{ class: '一班', name: '李四', sex: '女', age: '5', 'sf': '四川' },{ class: '一班', name: '王五', sex: '女', age: '20', 'sf': '河南' },{ class: '一班', name: '小李', sex: '女', age: '26', 'sf': '江蘇' },{ class: '二班', name: '小麗', sex: '男', age: '35', 'sf': '湖南' },{ class: '二班', name: '張云', sex: '男', age: '100', 'sf': '吉林' },{ class: '二班', name: '吳強', sex: '女', age: '5', 'sf': '浙江' },{ class: '二班', name: '陳麗', sex: '女', age: '20', 'sf': '內蒙古' },{ class: '二班', name: '譚笑', sex: '女', age: '26', 'sf': '江蘇' },{ class: '二班', name: '歐陽', sex: '男', age: '35', 'sf': '福建' },{ class: '二班', name: '李冠', sex: '男', age: '100', 'sf': '寧夏' },{ class: '二班', name: '張物', sex: '女', age: '5', 'sf': '新疆' },{ class: '三班', name: '郭翰', sex: '女', age: '20', 'sf': '西藏' },{ class: '三班', name: '何樹', sex: '女', age: '26', 'sf': '廣西' },{ class: '三班', name: '田武', sex: '男', age: '35', 'sf': '海南' },{ class: '三班', name: '孔紫', sex: '男', age: '35', 'sf': '山東' }];//將列和數據賦給gridOptions var gridOptions = {columnDefs: columnDefs,rowData: data,defaultColDef: {sortable: true,resizable: true,cellStyle: {'line-height': '28px', // 行高設置同步：跟rowHeight屬性設置值一致},},// 是否展開分組groupDefaultExpanded: 1,// 默認情況下打開組的級別：-1：展開所有組；0：不展開組；1：只展開第一層組別；2：之展開前兩層組別，（我的理解是，數字是幾就展開前幾層組別，暫時沒有進行多個組別的測試）// 對組別的設置autoGroupColumnDef: {headerName: '班級（分組后的名稱）', // 設置分組之后列的顯示名稱，如果不設置，則默認顯示為“Group”。minWidth: 100, // 設置分組列的最小寬度，其他屬性也可以設置，例如：width；maxWidthsort: 'asc', // 對分組進行排序，asc是升序，desc是降序pinned: 'left', // 將分組列固定在左邊cellRendererParams: {suppressCount: true, // 不顯示分組列右邊的計數個數}},rowHeight: 28, // 設置表格行高headerHeight: 30, // 設置表格表頭的行高// 設置分組列左邊的圖標icons: {groupExpanded: '<img src="../image/tree-open.png"style="width: 20px;height:20px;margin-bottom: 10px"/>', // 展開后的圖片groupContracted: '<img src="../image/tree-closed.png"style="width: 20px;height:20px;margin-bottom: 10px"/>',// 折疊后的圖片}};//在dom加載完成后初始化agGrid完成document.addEventListener("DOMContentLoaded", function () {var eGridDiv = document.querySelector('#myGrid');new agGrid.Grid(eGridDiv, gridOptions);});</script> </body></html>

方法二:

即在上述方法基礎上不設置?icons,suppressCount, 并且將line-height替換為??'margin-top',將??'margin-top'值設置為負數(具體數值需要根據表格調試).但是這樣的方法會導致鼠標點擊時也有錯位的情況.效果如下:

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

<!doctype html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>ag-grid入門示例</title><script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script></head><body><div id="myGrid" style="width: 100%;height: 1000px;" class="ag-theme-alpine"></div><script>//定義表格列var columnDefs = [{headerName: '班級',field: 'class',rowGroup: true, // 進行分組顯示hide: true // 隱藏本列（會重新顯示一列分組后的數據）},{headerName: '姓名',field: 'name'},{headerName: '性別',field: 'sex'},{headerName: '年齡',field: 'age'},{headerName: '省份',field: 'sf'},];var data = [{ class: '一班', name: '張三', sex: '男', age: '100', 'sf': '浙江' },{ class: '一班', name: '李四', sex: '女', age: '5', 'sf': '四川' },{ class: '一班', name: '王五', sex: '女', age: '20', 'sf': '河南' },{ class: '一班', name: '小李', sex: '女', age: '26', 'sf': '江蘇' },{ class: '二班', name: '小麗', sex: '男', age: '35', 'sf': '湖南' },{ class: '二班', name: '張云', sex: '男', age: '100', 'sf': '吉林' },{ class: '二班', name: '吳強', sex: '女', age: '5', 'sf': '浙江' },{ class: '二班', name: '陳麗', sex: '女', age: '20', 'sf': '內蒙古' },{ class: '二班', name: '譚笑', sex: '女', age: '26', 'sf': '江蘇' },{ class: '二班', name: '歐陽', sex: '男', age: '35', 'sf': '福建' },{ class: '二班', name: '李冠', sex: '男', age: '100', 'sf': '寧夏' },{ class: '二班', name: '張物', sex: '女', age: '5', 'sf': '新疆' },{ class: '三班', name: '郭翰', sex: '女', age: '20', 'sf': '西藏' },{ class: '三班', name: '何樹', sex: '女', age: '26', 'sf': '廣西' },{ class: '三班', name: '田武', sex: '男', age: '35', 'sf': '海南' },{ class: '三班', name: '孔紫', sex: '男', age: '35', 'sf': '山東' }];//將列和數據賦給gridOptions var gridOptions = {columnDefs: columnDefs,rowData: data,defaultColDef: {sortable: true,resizable: true,cellStyle: {'margin-top':"-5px"},},// 是否展開分組groupDefaultExpanded: 1,// 默認情況下打開組的級別：-1：展開所有組；0：不展開組；1：只展開第一層組別；2：之展開前兩層組別，（我的理解是，數字是幾就展開前幾層組別，暫時沒有進行多個組別的測試）// 對組別的設置autoGroupColumnDef: {headerName: '班級（分組后的名稱）', // 設置分組之后列的顯示名稱，如果不設置，則默認顯示為“Group”。minWidth: 100, // 設置分組列的最小寬度，其他屬性也可以設置，例如：width；maxWidthsort: 'asc', // 對分組進行排序，asc是升序，desc是降序pinned: 'left', // 將分組列固定在左邊},rowHeight: 30, // 設置表格行高headerHeight: 30, // 設置表格表頭的行高};//在dom加載完成后初始化agGrid完成document.addEventListener("DOMContentLoaded", function () {var eGridDiv = document.querySelector('#myGrid');new agGrid.Grid(eGridDiv, gridOptions);});</script> </body></html>

方法三:??????

? ? ? ? 時隔一天，又找到一種方式。現在不僅可以簡單設置行高，就連右邊的計數也可以顯示出來，并且也不用單獨替換圖標。

? ? ? ? 同樣先來看效果：

? ? ? ? ?要實現這樣的效果，這里需要設置三個地方：

? ? ? ? ? ? ? ? （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無效果。不能實現相應功能。

????????以下為上圖的完整代碼：

<!doctype html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>ag-grid入門示例</title><script src="https://unpkg.com/@ag-grid-enterprise/all-modules@26.0.0/dist/ag-grid-enterprise.min.js"></script><style>/* 對表格分組樣式的渲染 */.ag-cell-expandable {font-weight: bold;color: blue;margin-top: -6px; /* 根據表格的實際情況來調整距離 */}</style> </head><body><div id="myGrid" style="width: 100%;height: 1000px;" class="ag-theme-alpine"></div><script>//定義表格列var columnDefs = [{headerName: '班級',field: 'class',rowGroup: true, // 進行分組顯示hide: true // 隱藏本列（會重新顯示一列分組后的數據）},{headerName: '姓名',field: 'name'},{headerName: '性別',field: 'sex'},{headerName: '年齡',field: 'age'},{headerName: '省份',field: 'sf'},];var data = [{ class: '一班', name: '張三', sex: '男', age: '100', 'sf': '浙江' },{ class: '一班', name: '李四', sex: '女', age: '5', 'sf': '四川' },{ class: '一班', name: '王五', sex: '女', age: '20', 'sf': '河南' },{ class: '一班', name: '小李', sex: '女', age: '26', 'sf': '江蘇' },{ class: '二班', name: '小麗', sex: '男', age: '35', 'sf': '湖南' },{ class: '二班', name: '張云', sex: '男', age: '100', 'sf': '吉林' },{ class: '二班', name: '吳強', sex: '女', age: '5', 'sf': '浙江' },{ class: '二班', name: '陳麗', sex: '女', age: '20', 'sf': '內蒙古' },{ class: '二班', name: '譚笑', sex: '女', age: '26', 'sf': '江蘇' },{ class: '二班', name: '歐陽', sex: '男', age: '35', 'sf': '福建' },{ class: '二班', name: '李冠', sex: '男', age: '100', 'sf': '寧夏' },{ class: '二班', name: '張物', sex: '女', age: '5', 'sf': '新疆' },{ class: '三班', name: '郭翰', sex: '女', age: '20', 'sf': '西藏' },{ class: '三班', name: '何樹', sex: '女', age: '26', 'sf': '廣西' },{ class: '三班', name: '田武', sex: '男', age: '35', 'sf': '海南' },{ class: '三班', name: '孔紫', sex: '男', age: '35', 'sf': '山東' }];//將列和數據賦給gridOptions var gridOptions = {columnDefs: columnDefs,rowData: data,defaultColDef: {sortable: true,resizable: true,cellStyle: (params) => {// 判斷是不是分組列，如果是的話就不需要設置line-height屬性，如果不是的話就需要設置line-height（因為.ag-cell-expandable只對分組列有作用）if (params.column.colId === "ag-Grid-AutoColumn") {return {};}return { "line-height": "28px" };}},// 是否展開分組:默認情況下打開組的級別：-1：展開所有組；0：不展開組；1：只展開第一層組別；2：之展開前兩層組別，（我的理解是，數字是幾就展開前幾層組別，暫時沒有進行多個組別的測試）groupDefaultExpanded: 1,// 對組別的設置autoGroupColumnDef: {headerName: '班級（分組后的名稱）', // 設置分組之后列的顯示名稱，如果不設置，則默認顯示為“Group”。minWidth: 100, // 設置分組列的最小寬度，其他屬性也可以設置，例如：width；maxWidthsort: 'asc', // 對分組進行排序，asc是升序，desc是降序pinned: 'left', // 將分組列固定在左邊},rowHeight: 28, // 設置表格行高headerHeight: 30, // 設置表格表頭的行高};//在dom加載完成后初始化agGrid完成document.addEventListener("DOMContentLoaded", function () {var eGridDiv = document.querySelector('#myGrid');new agGrid.Grid(eGridDiv, gridOptions);});</script> </body></html>

以上便是本篇文章的所有內容，如果有哪位兄臺有更完美的解決方法,請不吝賜教！！！！！

總結

以上是生活随笔為你收集整理的ag-grid 设置行高的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

grid
ag

上一篇： Android 监听键盘事件
下一篇：五分钟为你的小程序增加公告功能(最新公告