vue ag-grid-vue 大数据动态加载服务器请求数据

这个方法是一次加载所有数据在前端再做的分页渲染。点击目录文件展开能动态加载服务器的数据显示子目录数据

安装插件：

npm install --save ag-grid-enterprise ag-grid-community ag-grid-vue

代码实现

import { AgGridVue } from "ag-grid-vue";
import "ag-grid-enterprise";
import "ag-grid-community/dist/styles/ag-grid.css"; 
import "ag-grid-community/dist/styles/ag-theme-alpine.css";  // 主题

 <ag-grid-vue
        style="width: 100%; height: 100%;"
        class="ag-theme-alpine"
        id="myGrid"
        :headerHeight="0"
        :gridOptions="gridOptions"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :autoGroupColumnDef="autoGroupColumnDef"
        :rowModelType="rowModelType"
        :serverSideStoreType="serverSideStoreType"
        :treeData="true"
        :animateRows="true"
        :rowSelection="rowSelection"
        :groupSelectsChildren="true"
        :groupSelectsFiltered="true"
        :isRowSelectable="isRowSelectable"
        :groupDefaultExpanded="groupDefaultExpanded"
        :isServerSideGroupOpenByDefault="isServerSideGroupOpenByDefault"
        :isServerSideGroup="isServerSideGroup"
        :getServerSideGroupKey="getServerSideGroupKey"
        @selection-changed="onSelectionChanged"
      ></ag-grid-vue>

 beforeMount() {
    this.gridOptions = {};
    this.columnDefs = [
      {
        field: "id",
        headerName: "",
        hide: true
      },
      {
        field: "file_name",
        headerName: "",
        hide: true
      }
    ];
    this.defaultColDef = {
      width: 240,
      filter: "agTextColumnFilter",
      flex: 1
    };
    this.autoGroupColumnDef = {
      field: "file_name",
      cellRenderer: "agGroupCellRenderer", // 显示checkbox
      cellRendererParams: { checkbox: true } // 显示checkbox
    };
    this.rowSelection = "single"; // 单选
    this.groupDefaultExpanded = -1;
    this.isRowSelectable = rowNode => {
      return rowNode.data ? rowNode.data.file_type !== "dir" : false; // 显示CheckBox条件
    };
    this.rowModelType = "serverSide";
    this.serverSideStoreType = "partial";
    this.isServerSideGroupOpenByDefault = params => {
      return params.rowNode.level < 2;
    };
    this.isServerSideGroup = dataItem => {
      return dataItem.group;
    };
    this.getServerSideGroupKey = dataItem => {
      return dataItem.id;
    };
  },

mounted() {
    this.gridApi = this.gridOptions.api;
    this.gridColumnApi = this.gridOptions.columnApi;
  }

methods: {
    onSelectionChanged(event) {
      // 获取CheckBox选中的数据
      var selectedRows = this.gridApi.getSelectedRows();
      let item = selectedRows.length === 1 ? selectedRows[0] : "";
      console.log("item = ", item);
    },
    async onGridReady(params) {
      const updateData = data => {
        var fakeServer = createFakeServer(data); //初始函数
        var datasource = createServerSideDatasource(fakeServer); // 挂载数据
        params.api.setServerSideDatasource(datasource);
      };

      let params1 = {
        order: "file_type",
        sort: "asc",
        is_page: false
      };
      let { data } = await filelist(params1); // 初始化请求服务器获取根目录数据
      updateData(data.bosAfsFiles.array_files);
    }
  }

在vue页面的export default外，script内引入以下方法

window.createFakeServer = function createFakeServer(fakeServerData) {
  function FakeServer(allData) {
    this.data = allData;
  }
  FakeServer.prototype.getData = function(request) {
    async function extractRowsFromData(groupKeys, data) {
      //1. 初始化根目录数据
      if (groupKeys.length === 0) {
        let totalList = data.map(function(d) {
          return {
            group: d.file_type === "dir", //判断是dir（文件夹）显示展开符号，能点击展开
            id: d.id,
            file_name: d.file_name,
            file_type: d.file_type,
            md5: d.md5,
            afid_lite: d.afid_lite,
            afid_mini: d.afid_mini,
            create_time: d.create_time,
            expire_time: d.expire_time,
            ext: d.ext,
            parent: d.parent,
            sha1: d.sha1,
            size: d.size
          };
        });
        return totalList; // 服务器请求的数据做处理
      }
      // 动态根据文件夹id获取子目录数据
      var key = groupKeys[0];
      for (var i = 0; i < data.length; i++) {
        if (data[i].id === key) {
          // 获取子目录数据
          let params1 = {
            order: "file_type",
            sort: "asc",
            is_page: false,
            dir_id: data[i].id
          };

          let result = await filelist(params1); // 根据父目录id获取子目录数据
          let childrenList = result.data.bosAfsFiles.array_files
            ? result.data.bosAfsFiles.array_files
            : [];
          return extractRowsFromData(groupKeys.slice(1), childrenList);
        }
      }
    }
    return extractRowsFromData(request.groupKeys, this.data);
  };
  return new FakeServer(fakeServerData);
};

window.createServerSideDatasource = function createServerSideDatasource(
  fakeServer
) {
  function ServerSideDatasource(fakeServer) {
    this.fakeServer = fakeServer;
  }
  ServerSideDatasource.prototype.getRows = async function(params) {
    var allRows = await this.fakeServer.getData(params.request); // 获取总数据

    var request = params.request;
    var doingInfinite = request.startRow != null && request.endRow != null;
    var result = doingInfinite
      ? {
          rowData: allRows.slice(request.startRow, request.endRow),
          rowCount: allRows.length
        }
      : { rowData: allRows }; // 分页获取数据
    setTimeout(function() {
      params.success(result); //渲染分页得到的数据
    }, 200);
  };
  return new ServerSideDatasource(fakeServer);
};