ag Grid如何在更改复选框的值后刷新

Question

我的 agGrid 组件有问题，所以我的观点是将复选框显示为单元格中的值，所以我这样做了，然后我添加了额外的复选框来选择表中的所有复选框，但它不能按我想要的那样工作，如你所见如果选中了所有复选框，则在屏幕上，所以这个额外的复选框也（屏幕） screen1 然后我取消选中其中一个选项，但额外的复选框不会更改 screen2 但应该取消选中。我找到了使用refreshCells({ force: true }); 的解决方案，但是这种方法会刷新所有表，因此取消选中需要很长时间。要创建此复选框，我使用 vuetify 组件

我的 agGridSetup

<template>
  <v-container>
    <ag-grid-vue
      style="width: 100%; height: 375px"
      class="table ag-theme-balham"
      @grid-ready="onGridReady"
      :columnDefs="agGridColDefs"
      :groupMultiAutoColumn="true"
      :enableRangeSelection="true"
      :animateRows="true"
      :row-data="rowData"
    ></ag-grid-vue>
  </v-container>
</template>
<script lang="ts">
import { Component, Vue, Prop, Ref, Watch } from "vue-property-decorator";
import { BaseTableColumnDef } from "@/models/Table/BaseTableColumnDef.ts";
import {
  ColDef,
  ColDefUtil,
  ColumnApi,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IDatasource,
  IGetRowsParams,
} from "ag-grid-community";
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";
@Component({
  components: {
    AgGridVue,
  },
})
export default class Table extends Vue {
  gridOptions!: GridOptions;
  agGridColDefs!: ColDef[];
  @Prop() private baseTableColumnDefs: BaseTableColumnDef[];
  @Prop() private rowData: any;
  private columnDefs: ColDef;
  private agGridApi!: GridApi;
  private agGridColumnApi!: ColumnApi;

  beforeMount() {
    this.initGridOptions();
    this.initGirdColDef();
  }

  onGridReady(gridReadyEvent: GridReadyEvent) {
    this.agGridApi = gridReadyEvent.api;
    this.agGridColumnApi = gridReadyEvent.columnApi;
    if (this.agGridApi) {
      this.agGridApi.sizeColumnsToFit();
    }
  }

  private initGridOptions() {
    this.gridOptions = {
      defaultColDef: {
        headerValueGetter: (params: any) => {
          return this.$t(params.baseTableColumnDefs.headerName);
        },
      },
    };
  }
  private initGirdColDef() {
    this.agGridColDefs = this.baseTableColumnDefs.map((colDef) =>
      this.mapSingleColDef(colDef)
    );
  }

  private mapSingleColDef(colDef: BaseTableColumnDef): ColDef {
    return {
      ...colDef,
      resizable: true,
    };
  }
}
</script>
<style lang="scss" scoped>
</style>

列定义

private columnDefs: BaseTableColumnDef[] = [
    {
      headerName: "Kategorie",
      field: "permissionResourceType",
      sortable: true,
      rowGroup: true,
      hide: true,
    },
    {
      headerName: "Berechtigung",
      field: "name",
      sortable: true,
    },
    {
      headerName: "Anzeigen",
      field: "showValue",
      sortable: true,
      cellRendererFramework: UserGroupCheckbox,
    },
    {
      headerName: "Bearbeiten",
      field: "editValue",
      sortable: true,
      cellRendererFramework: UserGroupCheckbox,
    },
    {
      headerName: "Löschen",
      field: "deleteValue",
      sortable: true,
      cellRendererFramework: UserGroupCheckbox,
    },
    {
      headerName: "Zulassen",
      field: "permitValue",
      sortable: true,
      cellRendererFramework: UserGroupCheckbox,
    },
  ];

复选框组件

<template>
  <span>
    <ValidationProvider>
      <v-checkbox
        class="checkbox"
        v-model="selectAllShowObjectValue"
        v-on:change="onChangeAllShowObjectValue()"
        :indeterminate="selectAllShowIndeterminate"
        v-if="isSelectAllShow"
      ></v-checkbox>
      <v-checkbox
        class="checkbox"
        v-model="selectAllEditObjectValue"
        v-on:change="onChangeAllEditObjectValue()"
        v-if="isSelectAllEdit"
      ></v-checkbox>
      <v-checkbox
        class="checkbox"
        v-model="selectAllDeleteObjectValue"
        v-on:change="onChangeAllDeleteObjectValue()"
        v-if="isSelectAllDelete"
      ></v-checkbox>
      <v-checkbox
        class="checkbox"
        v-model="selectAllPermitProcessValue"
        v-on:change="onChangeAllPermitProcessValue()"
        v-if="isSelectAllPermit"
      ></v-checkbox>
      <v-checkbox
        class="checkbox"
        v-model="selectAllPermitActionValue"
        v-on:change="onChangeAllPermitActionValue()"
        v-if="isSelectAllPermit"
      ></v-checkbox>

      <v-checkbox
        class="checkbox"
        v-model="params.data.showValue"
        v-on:change="
          setCheckboxForObjectGroupShow();
          setShowValue();
        "
        v-if="isShow"
      ></v-checkbox>
      <v-checkbox
        class="checkbox"
        v-model="params.data.editValue"
        v-on:change="setEditOrDeleteValue()"
        v-if="isEdit"
      ></v-checkbox>
      <v-checkbox
        class="checkbox"
        v-model="params.data.permitValue"
        v-if="isPermit"
      ></v-checkbox>
      <v-checkbox
        class="checkbox"
        v-model="params.data.deleteValue"
        v-on:change="setEditOrDeleteValue()"
        v-if="isDelete"
      ></v-checkbox>
    </ValidationProvider>
  </span>
</template>
<script lang="ts">
import { is } from "vee-validate/dist/rules";
import { params } from "vee-validate/dist/types/rules/alpha";
import { Component, Vue, Prop, Ref, Watch } from "vue-property-decorator";
import { ValidationProvider } from "vee-validate";

@Component({
  components: {
    ValidationProvider,
  },
})
export default class UserGroupCheckbox extends Vue {
  params: any = {};
  isShow: boolean = false;
  isEdit: boolean = false;
  isPermit: boolean = false;
  isDelete: boolean = false;

  isSelectAllShow: boolean = false;
  isSelectAllEdit: boolean = false;
  isSelectAllPermit: boolean = false;
  isSelectAllDelete: boolean = false;

  selectAllDeleteObjectValue: boolean = false;
  selectAllPermitProcessValue: boolean = false;
  selectAllPermitActionValue: boolean = false;
  selectAllEditObjectValue: boolean = false;
  selectAllShowObjectValue: boolean = true;

  selectAllShowIndeterminate: boolean = false;

  beforeMount() {
    if (this.params.colDef.headerName === "Anzeigen") {
      if (this.params.data !== undefined && this.params.data !== null) {
        if (this.params.data.showModifiable) {
          this.isShow = true;
        } else {
          this.isShow = false;
        }
      } else {
        if (this.params.node.key === "Objekte") {
          this.setCheckboxForObjectGroupShow();
          this.isSelectAllShow = true;
        } else {
          this.isSelectAllShow = false;
        }
      }
    }
    if (this.params.colDef.headerName === "Bearbeiten") {
      if (this.params.data !== undefined && this.params.data !== null) {
        if (this.params.data.editModifiable) {
          this.isEdit = true;
        } else {
          this.isEdit = false;
        }
      } else {
        if (this.params.node.key === "Objekte") {
          this.isSelectAllEdit = true;
        } else {
          this.isSelectAllEdit = false;
        }
      }
    }
    if (this.params.colDef.headerName === "Löschen") {
      if (this.params.data !== undefined && this.params.data !== null) {
        if (this.params.data.deleteModifiable) {
          this.isDelete = true;
        } else {
          this.isDelete = false;
        }
      } else {
        if (this.params.node.key === "Objekte") {
          this.isSelectAllDelete = true;
        } else {
          this.isSelectAllDelete = false;
        }
      }
    }
    if (this.params.colDef.headerName === "Zulassen") {
      if (this.params.data !== undefined && this.params.data !== null) {
        if (this.params.data.permitModifiable) {
          this.isPermit = true;
        } else {
          this.isPermit = false;
        }
      } else {
        if (
          this.params.node.key === "Aktionen" ||
          this.params.node.key === "Prozesse"
        ) {
          this.isSelectAllPermit = true;
        } else {
          this.isSelectAllPermit = false;
        }
      }
    }
  }

  private onChangeAllShowObjectValue() {
    if (this.selectAllShowObjectValue) {
      this.params.node.childrenAfterGroup.forEach((element: any) => {
        if (element.data.showModifiable) {
          element.data.showValue = true;
        }
      });
    } else if (!this.selectAllShowObjectValue) {
      this.params.node.childrenAfterGroup.forEach((element: any) => {
        if (element.data.showModifiable) {
          element.data.showValue = false;
        }
      });
    }
  }

  private onChangeAllEditObjectValue() {
    if (this.selectAllEditObjectValue) {
      this.params.node.childrenAfterGroup.forEach((element: any) => {
        if (element.data.editModifiable) {
          element.data.editValue = true;
        }
      });
    } else if (!this.selectAllEditObjectValue) {
      this.params.node.childrenAfterGroup.forEach((element: any) => {
        if (element.data.editModifiable) {
          element.data.editValue = false;
        }
      });
    }
  }

  private onChangeAllDeleteObjectValue() {
    if (this.selectAllDeleteObjectValue) {
      this.params.node.childrenAfterGroup.forEach((element: any) => {
        if (element.data.deleteModifiable) {
          element.data.deleteValue = true;
        }
      });
    } else if (!this.selectAllDeleteObjectValue) {
      this.params.node.childrenAfterGroup.forEach((element: any) => {
        if (element.data.deleteModifiable) {
          element.data.deleteValue = false;
        }
      });
    }
  }

  private onChangeAllPermitProcessValue() {
    if (this.selectAllPermitProcessValue) {
      this.params.node.childrenAfterGroup.forEach((element: any) => {
        if (element.data.permitModifiable) {
          element.data.permitValue = true;
        }
      });
    } else if (!this.selectAllPermitProcessValue) {
      this.params.node.childrenAfterGroup.forEach((element: any) => {
        if (element.data.permitModifiable) {
          element.data.permitValue = false;
        }
      });
    }
  }
  private onChangeAllPermitActionValue() {
    if (this.selectAllPermitActionValue) {
      this.params.node.childrenAfterGroup.forEach((element: any) => {
        if (element.data.permitModifiable) {
          element.data.permitValue = true;
        }
      });
    } else if (!this.selectAllPermitActionValue) {
      this.params.node.childrenAfterGroup.forEach((element: any) => {
        if (element.data.permitModifiable) {
          element.data.permitValue = false;
        }
      });
    }
  }
  private setCheckboxForObjectGroupShow() {
    if (
      this.params.node.childrenAfterGroup !== undefined &&
      this.params.node.childrenAfterGroup !== null
    ) {
      this.params.node.childrenAfterGroup.forEach((child: any) => {
        if (!child.data.showValue && child.data.showModifiable) {
          this.selectAllShowObjectValue = false;
          this.selectAllShowIndeterminate = true;
        }
      });
    } else {
      this.params.node.parent.childrenAfterGroup.forEach((child: any) => {
        if (!child.data.showValue && child.data.showModifiable) {
          this.selectAllShowObjectValue = false;
          this.selectAllShowIndeterminate = true;
          console.log(child);
          //this.params.api.refreshCells({ force: true });
        }
      });
    }
  }
  private setEditOrDeleteValue() {
    const rowData = this.params.data;
    if (rowData.editModifiable || rowData.deleteModifiable) {
      if (rowData.editValue || rowData.deleteValue) {
        this.params.data.showValue = true;
      }
    }
  }
  private setShowValue() {
    if (!this.params.data.showValue) {
      this.params.data.editValue = false;
      this.params.data.deleteValue = false;
    }
  }
}
</script>
<style scoped>
.checkbox {
  margin: auto;
}
</style>

Answer 1

您可以refresh特定的行和列来提高性能

refreshCells({
  force: true,
  columns: ['colId1', 'colId2'],
  rows: [rowNode1, rowNode2],
});

但是如果您希望复选框选择/取消选择行，您可以通过在列定义中启用它来使用 agGrid 内置的复选框选择

{
  field: '',
  checkboxSelection: true,
  headerCheckboxSelection: true,
  suppressRowClickSelection: true,
},
{
  field: 'id',
  ...
}
...

Answer 2

我解决了这个问题。 解决方案是使用api.redrawRows 瞬间的api.refreshCells

解决我问题的代码

const row = [];

row.push(child.parent);
this.params.api.redrawRows({ rowNodes: row });