ag-grid

 

使用：

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; else
          this.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/