?

使用：

import { AgGridVue } from "ag-grid-vue"; <ag-grid-vue style="width:100%;height:100%;" class="ag-theme-fresh" :gridOptions="agGrid.gridOptions" :columnDefs="agGrid.columnDefs" :rowData="data"> </ag-grid-vue> class：主題
gridOption:表格配置
columnDefs:表格列設置
rowData:表格數據

?

rowDoubleClicked:雙擊事件

<ag-grid-vue class="ag-theme-fresh" style="width:100%;height:100%;":gridOptions="gridOptions":columnDefs="columnDefs":rowData="dataList":rowDoubleClicked="viewRow"></ag-grid-vue> viewRow(row) {this.$router.push({ path: this.$utils.getPath("/osap/abnormal/view/" + event.data.rowID) });} treeData樹形結構: <ag-grid-vue class="ag-theme-fresh" style="width:100%;height:100%;":gridOptions="gridOptions":columnDefs="columnDefs":rowData="dataList":treeData="true":groupDefaultExpanded="-1":getDataPath="getDataPath":autoGroupColumnDef="autoGroupColumnDef":rowDataChange="autoSizeColumns"></ag-grid-vue> gridOptions:{rowSelection:"single",enableColResize:true,suppressMovableColumns:true,animateRows:true},columnDefs:[{headerName: "崗位名稱",field: "posName"},{headerName: "備注",field: "remark"}],autoGroupColumnDef:{headerName:"部門編碼",cellRendererParams:{suppressCount:true,innerRenderer:this.initGroupColumn()}},initGroupColumn() {function SimpleCellRenderer() {}SimpleCellRenderer.prototype.init = function(params) {if(params.data)this.eGui = params.data.posCode;elsethis.eGui = 'null'};SimpleCellRenderer.prototype.getGui = function() {return this.eGui;};return SimpleCellRenderer;},getDataPath(data) {var id = "";if (this.$utils.isNULL(data.parentFullID)) id = data.rowID;else id = data.parentFullID.substring(1) + "/" + data.rowID;id= id.replace('//','/')// console.log(id)return id.split("/");},autoSizeCloumns() {var allColumnIds = [];this.gridOptions.columnApi.getAllColumns().forEach(function(column) {allColumnIds.push(column.colId);});this.gridOptions.columnApi.autoSizeColumns(allColumnIds);this.$nextTick(() => {this.gridOptions.columnApi.autoSizeColumns(allColumnIds);});}, agGrid獲得選中一行getSelect： doGetSelect() {var selectedRows = this.gridOptions.api.getSelectedRows();var v = selectedRows[0];if (!v) {this.showWarning("沒有選擇數據");return null;}return v;},

選中一行整行獲得焦點：gridOption中配置rowSelection:single,

'single' or 'multiple'，單選和多選

?多選顯示選擇框

?

?

?

enableFilter：啟用檢索

?

自動寬度：

me.agGrid.gridOptions.api.sizeColumnsToFit(); 允許改變列寬: gridOption.enableColResize:true

?

column設置：

columnDefs: [ { headerName: "類型",　　//列名稱 field: "typeDescription",　　//字段名 width:85　　　　　　　　//寬度 rowDrag:true　　//啟用拖拽改變行位置 }, 禁止拖拽move column：gridOptions.suppressMovableColumns:true

拖拽改變行位置：

columnDefs中第一列 添加rowDrag:true//啟用行拖拽

gridOptions.rowDragManaged:true //啟用行拖拽托管 gridOptions.animateRows:true? //使用動畫 顯示行序號，添加一個索引列： columnDefs:[{headerName:"序號",width:50,valueGetter:params=>params.node.rowIndex+1},{headerName: "模塊",field: "moduleName"}], 顯示序號，valueGetter:params=>params.node.rowIndex+1，存在bug，假如有檢索的話，

在隱藏的情況下，先顯示后面的，前面的序號就會重復，正確的做法是：

?

?

? 允許排序： gridOptions:{rowSelection:"single",enableColResize:true,enableSorting:true,animateRows:true}, 拖動行位置后事件： <ag-grid-vue style="width:100%;height:100%;" class="ag-theme-fresh":gridOptions="agGrid.gridOptions":columnDefs="agGrid.columnDefs":rowData="data":rowDragEnd="onRowDragEnd"></ag-grid-vue> 遍歷ag-grid的行 多語言(國際化)：https://www.ag-grid.com/javascript-grid-internationalisation/

轉載于:https://www.cnblogs.com/GarsonZhang/p/8488626.html

總結

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

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