ag-grid配置

子組件代碼

<template>
  <section style="width: 100%;height: 100%">
    <div>
      <!-- <input type="text" placeholder="請輸入要搜索的內容" v-model="searchText"> -->
    </div>
    <ag-grid-vue
      :bodyScroll="bodyScroll"
      :cellMouseOver="cellMouseOver"
      :rowDataChanged="rowDataChanged"
      :editType="gridParameter.editType || 'fullRow'"
      :suppressClickEdit="gridParameter.suppressClickEdit"
      :suppressRowClickSelection="gridParameter.suppressRowClickSelection"
      :suppressCellSelection="gridParameter.suppressCellSelection"
      :class="gridParameter.themeName || 'ag-theme-balham'"
      :headerHeight="gridParameter.headerHeight"
      :floatingFilter="gridParameter.floatingFilter"
      :style="gridParameter.style"
      :columnDefs="gridParameter.columnDefs"
      :rowData="gridParameter.rowData"
      :rowHeight="gridParameter.rowHeight"
      :rowSelection="gridParameter.rowSelection"
      :defaultColDef="gridParameter.defaultColDef"
      :gridOptions="gridOptions"
      :cellClicked="onCellClicked"
      :cellValueChanged="cellValueChanged"
      :cellEditingStarted="cellEditingStarted"
      :cellEditingStopped="cellEditingStopped"
      :rowDoubleClicked="rowDoubleClicked"
      :rowClicked="rowClicked"
      :onGridReady="onGridReady"
      :columnMoved="columnMoved"
      :rowSelected="rowSelected"
      :rowValueChanged="rowValueChanged"
      :components="gridParameter.components"
      @editClick="editClick"
      :isRowSelectable="gridParameter.isRowSelectable"
      :frameworkComponents="frameworkComponents"
    ></ag-grid-vue>
    <pg v-if="showPaged"></pg>
    <!-- <button @click="edit">edit</button>
    <button @click="stopEdit">top edit</button>-->
  </section>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-enterprise";
import { mapGetters } from "vuex";
import pg from "./Pagina/index";
import { getCookies } from "@/utils/auth";
// import demo from "./demo/index";
export default {
  props: [
    "gridParameter",
    "searchText",
    "getRowNodes",
    "showPaged",
    "roleGrid",
    "peopleGrid",
    "userRowClick",
    "frameworkComponents",
    "cellMouseOver1",
  ],
  name: "App",
  components: {
    AgGridVue,
    pg,
    // GridEditButtons: demo,
  },
  computed: {
    ...mapGetters(["columnSaveState", "now_page"]),
  },
  data() {
    return {
      gridStyleKey: "",
      gridApi: "",
      columnApi: "",
      selectdNodes: [],
      gridOptions: {
        // defaultColDef: {
        //   // allow every column to be aggregated
        //   enableValue: true,
        //   // allow every column to be grouped
        //   enableRowGroup: true,
        //   // allow every column to be pivoted
        //   enablePivot: true,
        //   editable: true // 開啟網格編輯功能
        // },
        // editable: false, // 開啟網格編輯功能
        // rowSelection: 'multiple',
        // treeData: true, // 樹數據結構
        // editType: 'fullRow', // 開啟整行編輯
        enableSorting: true, // 開啟排序功能
        enableFilter: true, // 開啟過濾功能
        enableColResize: true, // 開啟調整列寬
        showToolPanel: false, // 展開功能面板
        contractColumnSelection: true, // 默認不展開tree
        toolPanelSuppressRowGroups: true,
        toolPanelSuppressSideButtons: true, // 禁止選項面板功能
        // toolPanelSuppressValues: false,
        // toolPanelSuppressPivots: false,
        toolPanelSuppressPivotMode: true,
        // suppressClickEdit: true, // 禁用雙擊網格編輯
        // toolPanelSuppressColumnFilter: true,
        // toolPanelSuppressColumnSelectAll: true,
        // toolPanelSuppressColumnExpandAll: true,
        // pagination: true, // 開啟分頁器
        // rowGroupPanelShow: 'always', // 表格頂部欄
        // enableRowGroup: true,
        // enablePivot: true,
        // enableStatusBar: true, // 開啟狀態欄
        // paginationPageSize: 500, // 分頁器每頁顯示的條數
        // enableRangeSelection: true,// 開啟拖動選擇網格
        // groupHeaders: true, // 使用組標題
        rowDragManaged: true, // 設置行拖動    需要在表格其中一個列    設置rowDrag:true
        animateRows: true, // 拖動動畫效果
        // rowMultiSelectWithClick: true,
        stopEditingWhenGridLosesFocus: true, // 在網格失去焦點時停止單元格編輯
        // singleClickEdit: true,
        localeText: {
          // 國際化
          // for filter panel
          page: "當前頁",
          more: "更多",
          to: "至",
          of: "總數",
          next: "下一頁",
          last: "上一頁",
          first: "首頁",
          previous: "上一頁",
          loadingOoo: "加載中...",
          // for set filter
          selectAll: "全選",
          searchOoo: "請輸入關鍵字...",
          blanks: "空白",
          // for number filter and text filter
          filterOoo: "過濾...",
          applyFilter: "daApplyFilter...",
          // for number filter
          equals: "相等",
          notEqual: "不相等",
          lessThan: "小於",
          greaterThan: "大於",
          lessThanOrEqual: "小於等於",
          greaterThanOrEqual: "大於等於",
          inRange: "范圍",
          contains: "包含",
          notContains: "不包含",
          startsWith: "開始於",
          endsWith: "結束於",
          // the header of the default group column
          group: "組",
          // tool panel
          columns: "列選項",
          rowGroupColumns: "laPivot Cols",
          rowGroupColumnsEmptyMessage: "拖拽組到這里",
          valueColumns: "laValue Cols",
          pivotMode: "樞軸模式",
          groups: "laGroups",
          values: "laValues",
          pivots: "laPivots",
          valueColumnsEmptyMessage: "la drag cols to aggregate",
          pivotColumnsEmptyMessage: "la drag here to pivot",
          // other
          noRowsToShow: "無數據",
          // enterprise menu
          pinColumn: "固定列",
          valueAggregation: "laValue Agg",
          autosizeThiscolumn: "自動調整當前網格寬度",
          autosizeAllColumns: "自動調整當前頁所有網格寬度",
          groupBy: "排序",
          ungroupBy: "不排序",
          resetColumns: "恢復網格樣式",
          expandAll: "展開全部",
          collapseAll: "關閉",
          toolPanel: "顯示/隱藏控制表盤",
          export: "導出到...",
          csvExport: "導出CSV",
          excelExport: "導出Excel",
          // enterprise menu pinning
          pinLeft: "<<鎖定至表格左側",
          pinRight: ">>鎖定至表格右側",
          noPin: "<>取消鎖定",
          // enterprise menu aggregation and status panel
          sum: "總數",
          min: "最小值",
          max: "最大值",
          none: "無",
          count: "總",
          average: "平均",
          // standard menu
          copy: "復制",
          copyWithHeaders: "復制內容及標題",
          ctrlC: "ctrl + C",
          paste: "粘貼",
          ctrlV: "ctrl + V",
        },
      },
    };
  },
  watch: {
    searchText(val) {
      this.onFilterTextBoxChanged();
    },
  },
  mounted() {
    const corpCode = getCookies("corpCode");
    const loginCode = getCookies("loginCode");
    const now_page = this.now_page;

    this.gridStyleKey = `${corpCode}_${loginCode}_${now_page}`;
  },
  methods: {
    onGridReady(event) {
      // 表格加載完成事件
      this.gridApi = event.api;
      this.columnApi = event.columnApi;
      // event.api.sizeColumnsToFit()
      // event.columnApi.autoSizeColumns()
      if (!event.api.getModel()) {
        // 所有列展示在當前表格頁面
        const allColumnIds = event.columnApi.getAllColumns();
        // event.api.sizeColumnsToFit()
        this.$emit("onGridReady", event);
        // this.gridApi.sizeColumnsToFit();
        event.columnApi.autoSizeColumns(allColumnIds);
      }
    },
    rowDataChanged(event) {
      // event.api.sizeColumnsToFit()// 所有列展示在當前表格頁面
      // const allColumnIds = event.columnApi.getAllColumns()
      // var b =
      // .forEach(function(column) {
      //   allColumnIds.push(column.colId)
      // })
      // event.columnApi.autoSizeColumns(allColumnIds)// 自動調整所有列寬
    },
    onCellClicked(event) {
      // 每個格子的點擊事件
      this.$store.dispatch("onCellClicked", event.value);
      this.$store.commit("GET_CELL_EVENT", event);
      this.$emit("cellClick", event);
      this.$emit("onCellClicked", event);
      if (sessionStorage.getItem("orderStatus") === "ddfcwc") {
        this.gridOptions.suppressClickEdit = true;
      } else {
        this.gridOptions.suppressClickEdit = false;
      }
    },
    cellValueChanged(event) {
      // 網格內容更改事件
      // this.$store.commit('GET_CELL_EVENT', event)
      this.$emit("changedValue", event);
      this.$emit("cellValueChanged", event);
    },
    rowDoubleClicked(event) {
      this.$emit("rowDoubleClicked", event);
      // 雙擊行  事件
      //
      this.$store.commit("SAVE_GRID_DIRECTING", this.$attrs.id);
      this.$store.commit("GET_DOUBLE_CLICKED_EVENT", event);
    },
    rowClicked(event) {
      // 單擊行  事件
      this.$emit("rowClicked", event);
      this.$store.commit("SAVE_GRID_DIRECTING", this.$attrs.id);
      if (this.roleGrid) {
        this.$store.commit("GRID_CLICK_ROW", event.data);
        this.$emit("gridClick");
      } else if (this.peopleGrid) {
        return;
      } else {
        this.$store.commit("GRID_CLICK_ROW", event.data);
        this.$emit("gridClick");
      }
    },
    columnMoved(event) {
      // 列移動事件
      this.$emit("columnMoved", event);
    },
    saveState(value) {
      if (value) {
        // 保存表格樣式
        const columnSendState = {
          colState: this.gridOptions.columnApi.getColumnState(),
          groupState: this.gridOptions.columnApi.getColumnGroupState(),
          sortState: this.gridOptions.api.getSortModel(),
          filterState: this.gridOptions.api.getFilterModel(),
        };
        // this.$store.dispatch('saveGridColumnState', columnSendState)
        localStorage.setItem(
          `${this.gridStyleKey}_${value}`,
          JSON.stringify(columnSendState)
        );
        const saveGridStyle = {
          url: "/tableStyle/save",
          method: "post",
          params: {
            key: `${this.gridStyleKey}_${value}`,
            value: JSON.stringify(columnSendState),
          },
        };
        this.$store.dispatch("get_to_do_tasks", saveGridStyle).then((res) => {
          // 待辦項目
          //
          if (res.success) {
            this.$message({
              type: "success",
              message: "表格樣式保存成功",
            });
          }
        });
      }
    },
    reset(value) {
      if (!value) {
        return false;
      }
      // 恢復自定義表格樣式
      var columnSaveState = JSON.parse(
        localStorage.getItem(`${this.gridStyleKey}_${value}`)
      );
      if (columnSaveState) {
        this.gridOptions.columnApi.setColumnState(columnSaveState.colState);
        this.gridOptions.columnApi.setColumnGroupState(
          columnSaveState.groupState
        );
        this.gridOptions.api.setSortModel(columnSaveState.sortState);
        this.gridOptions.api.setFilterModel(columnSaveState.filterState);
      } else {
        const getGridStyle = {
          url: "/tableStyle/get",
          method: "post",
          params: {
            key: `${this.gridStyleKey}_${value}`,
          },
        };
        this.$store.dispatch("get_to_do_tasks", getGridStyle).then((res) => {
          // 待辦項目
          if (res.data) {
            columnSaveState = JSON.parse(res.data.value);
            if (columnSaveState) {
              this.gridOptions.columnApi.setColumnState(
                columnSaveState.colState
              );
              this.gridOptions.columnApi.setColumnGroupState(
                columnSaveState.groupState
              );
              this.gridOptions.api.setSortModel(columnSaveState.sortState);
              this.gridOptions.api.setFilterModel(columnSaveState.filterState);
              // this.saveState(value)
            }
          }
        });
      }
    },
    restore() {
      // 恢復表格默認樣式
      this.gridOptions.columnApi.resetColumnState();
      this.gridOptions.columnApi.resetColumnGroupState();
      this.gridOptions.api.setSortModel(null);
      this.gridOptions.api.setFilterModel(null);
    },
    onFilterTextBoxChanged() {
      //
      this.gridOptions.api.setQuickFilter(this.searchText);
    },
    edit(index, key) {
      // this.gridOptions.api.setRowData()
      this.gridOptions.api.setFocusedCell(index, key); // 定位焦點
      this.gridOptions.api.startEditingCell({
        // 開始編輯加點行
        rowIndex: index,
        colKey: key,
      });
    },
    stopEdit(event) {
      this.gridOptions.api.stopEditing();
    },
    cellEditingStarted(event) {
      // cell開始編輯
      this.$emit("cellEditingStarted", event);
    },
    cellEditingStopped(event) {
      // cell開始編輯
      this.$emit("cellEditingStopped", event);
    },
    rowValueChanged(event) {
      // 行內的值發生變化
      this.$store.commit("ROW_VALUE_CHANGED_DATA", event.data);
      this.$emit("childRowchanged", event);
      this.$emit("rowValueChanged", event);
    },
    isFirstColumn(params) {
      // var displayedColumns = this.gridOptions.columnApi.getAllDisplayedColumns()
      // var thisIsFirstColumn = displayedColumns[0] === this.gridOptions.column
      // return thisIsFirstColumn
    },
    addNewRow() {},
    rowSelected(params) {
      // row選擇事件回調
      const selectdNodes = params.api.getSelectedNodes();
      const id = this.$el.id;
      selectdNodes.gridId = id;
      this.selectdNodes = selectdNodes;
      // console.log("selectdNodes");
      // console.log(selectdNodes);
      this.$store.commit("GRID_SELECT_ROW", selectdNodes);
      this.$emit("rowSelected", params);
    },
    bodyScroll(event) {
      this.$emit("bodyScroll", event);
      // if (event.direction === 'horizontal' && event.left % 300 === 0) {
      //   event.columnApi.autoSizeColumns()
      //   var allColumnIds = []
      //   event.columnApi.getAllColumns().forEach(function(column) {
      //     allColumnIds.push(column.colId)
      //   })
      //   event.columnApi.autoSizeColumns(allColumnIds)// 自動調整所有列寬
      // }
    },
    cellMouseOver(event) {
      this.$emit("cellMouseOver1", event);
    },
    editClick(event) {
      // console.log(123);
      // console.log(event);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>

　　父組件調用

          <ag-grid :gridParameter="gridParameter" :searchText="searchInput"></ag-grid>


import agGrid from "@/components/AgGrid/index.vue";
components: {
    agGrid,
  },

      gridParameter: {
        style: {
          //表格樣式
          height: "calc(100% - 165px)",
          width: "100%",
        },
        columnDefs: [
          //每列
          {
            headerName: "數據來源",
            field: "sourceFrom",
            width: 120,
          },
          {
            headerName: "公司名稱",
            field: "companyname",
            width: 150,
          },
          {
            headerName: "網點名",
            field: "netsite",
            width: 100,
          },
          {
            headerName: "車輛線路起點",
            field: "bsite",
            width: 120,
          },
          {
            headerName: "車輛線路終點",
            field: "esite",
            width: 120,
          },
          {
            headerName: "裝車時間",
            field: "loadingTime",
            width: 100,
          },
          {
            headerName: "實際發車時間",
            field: "sendtime",
            width: 120,
          },
          {
            headerName: "車牌號",
            field: "carnumber",
            width: 100,
          },
          {
            headerName: "掛車牌號",
            field: "trailernumer",
            width: 100,
          },
          {
            headerName: "司機手機號",
            field: "drivertel",
            width: 100,
          },
          {
            headerName: "裝車件數",
            field: "orderCount",
            width: 100,
          },
          {
            headerName: "總件數",
            field: "qty",
            width: 100,
          },
          {
            headerName: "重量",
            field: "weight",
            width: 100,
          },
          {
            headerName: "體積",
            field: "vol",
            width: 100,
          },
          {
            headerName: "運輸費合計",
            field: "transfee",
            width: 100,
          },
          {
            headerName: "批次狀態",
            field: "batchState",
            width: 100,
          },
          {
            headerName: "托運單號",
            field: "billNo",
            width: 100,
          },
          {
            headerName: "發車批次",
            field: "batchNo",
            width: 100,
          },
          {
            headerName: "網點地址（省）",
            field: "netProvince",
            width: 150,
          },
          {
            headerName: "網點地址（市）",
            field: "netCity",
            width: 150,
          },
          {
            headerName: "網點地址（區）",
            field: "netDistrict",
            width: 150,
          },
          {
            headerName: "到達時間",
            field: "arrivedTime",
            width: 100,
          },
          {
            headerName: "實際運費",
            field: "actualFreight",
            width: 100,
          },
          {
            headerName: "單車毛利",
            field: "profit",
            width: 100,
          },
          {
            headerName: "現付運輸費",
            field: "handTransitFee",
            width: 100,
          },
          {
            headerName: "現付油卡費",
            field: "handCardFee",
            width: 100,
          },
          {
            headerName: "回車運輸費",
            field: "retTransitFee",
            width: 100,
          },
          {
            headerName: "整車信息費",
            field: "vehicleInfoFee",
            width: 100,
          },
          {
            headerName: "到付油卡費",
            field: "payCardFee",
            width: 100,
          },
          {
            headerName: "車輛核載",
            field: "vehicleBorne",
            width: 100,
          },
          {
            headerName: "原始單號",
            field: "originalDocumentNumber",
            width: 100,
          },
          {
            headerName: "統一社會信用代碼",
            field: "socialCreditIdentifier",
            width: 150,
          },
          {
            headerName: "許可證編號",
            field: "permitNumber",
            width: 100,
          },
          {
            headerName: "業務類型代碼",
            field: "businesstypeCode",
            width: 120,
          },
          {
            headerName: "發運實際日期",
            field: "goodsReceiptdatetime",
            width: 120,
          },
          {
            headerName: "發貨人",
            field: "consignor",
            width: 100,
          },
          {
            headerName: "發貨人個人證件號",
            field: "rpersonalIdentity",
            width: 150,
          },
          {
            headerName: "發貨方-國家行政區划代碼",
            field: "rcountrySubdivisioncode",
            width: 180,
          },
          {
            headerName: "收貨人",
            field: "consignee",
            width: 100,
          },
          {
            headerName: "收貨方-國家行政區划代碼",
            field: "ecountrySubdivisioncode",
            width: 180,
          },
          {
            headerName: "牌照類型代碼",
            field: "licenseplatetypecode",
            width: 120,
          },
          {
            headerName: "車輛分類代碼",
            field: "vehicleClassificationCode",
            width: 120,
          },
          {
            headerName: "道路運輸證號",
            field: "roadtranscertnumber",
            width: 120,
          },
          {
            headerName: "所有人",
            field: "owner",
            width: 100,
          },
          {
            headerName: "姓名",
            field: "nameofperson",
            width: 100,
          },
          {
            headerName: "從業資格證號",
            field: "quaCertNumber",
            width: 100,
          },
          {
            headerName: "貨物名稱",
            field: "descriptionofgoods",
            width: 100,
          },
          {
            headerName: "貨物類型分類代碼",
            field: "cargotypeClassCode",
            width: 150,
          },
        ],
        isRowSelectable: function (rowNode) {
          return rowNode.data ? rowNode.data.roleCode != "sysAdmin" : false;
        },
        defaultColDef: {
          singleClickEdit: true,
          editable: false, // 開啟網格編輯功能
          headerCheckboxSelection: function (params) {
            var displayedColumns = params.columnApi.getAllDisplayedColumns();
            var thisIsFirstColumn = displayedColumns[0] === params.column;
            return thisIsFirstColumn;
          },
          checkboxSelection: function (params) {
            var displayedColumns = params.columnApi.getAllDisplayedColumns();
            var thisIsFirstColumn = displayedColumns[0] === params.column;
            return thisIsFirstColumn;
          },
        },
// 后端數據
        rowData: [],
      },

備注:

gridOption:表格配置

columnDefs:表格列設置

rowData:表格數據