?

使用：

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:表格列設(shè)置
rowData:表格數(shù)據(jù)

?

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樹(shù)形結(jié)構(gòu): <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: "崗位名稱(chēng)",field: "posName"},{headerName: "備注",field: "remark"}],autoGroupColumnDef:{headerName:"部門(mén)編碼",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獲得選中一行g(shù)etSelect： doGetSelect() {var selectedRows = this.gridOptions.api.getSelectedRows();var v = selectedRows[0];if (!v) {this.showWarning("沒(méi)有選擇數(shù)據(jù)");return null;}return v;},

選中一行整行獲得焦點(diǎn)：gridOption中配置rowSelection:single,

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

?多選顯示選擇框

?

?

?

enableFilter：啟用檢索

?

自動(dòng)寬度：

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

?

column設(shè)置：

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

拖拽改變行位置：

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

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

在隱藏的情況下，先顯示后面的，前面的序號(hào)就會(huì)重復(fù)，正確的做法是：

?

?

? 允許排序： gridOptions:{rowSelection:"single",enableColResize:true,enableSorting:true,animateRows:true}, 拖動(dòng)行位置后事件： <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的行 多語(yǔ)言(國(guó)際化)：https://www.ag-grid.com/javascript-grid-internationalisation/

轉(zhuǎn)載于:https://www.cnblogs.com/GarsonZhang/p/8488626.html

總結(jié)

以上是生活随笔為你收集整理的ag-grid的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。