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/