ag Grid如何在更改复选框的值后刷新
Posted
技术标签:
【中文标题】ag Grid如何在更改复选框的值后刷新【英文标题】：agGrid how to refresh after change value of checkbox 【发布时间】：2021-01-28 19:04:54 【问题描述】：我的 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>
【问题讨论】：
【参考方案1】：您可以refresh特定的行和列来提高性能
refreshCells(
force: true,
columns: ['colId1', 'colId2'],
rows: [rowNode1, rowNode2],
);
但是如果您希望复选框选择/取消选择行，您可以通过在列定义中启用它来使用 agGrid 内置的复选框选择
field: '',
checkboxSelection: true,
headerCheckboxSelection: true,
suppressRowClickSelection: true,
,
field: 'id',
...
...
【讨论】：
是的，我知道我可以刷新行和列，但在我的情况下它不起作用，这意味着行正在刷新，但复选框仍然相同，我不能使用 agGrid 内置复选框，因为我不要只选择此复选框的行，但感谢您的回答:) @RadosławŁuczak 您应该在问题中添加复选框渲染器代码，以便其他人可以帮助您调试问题。 我看到我开始滚动表复选框已更新:)【参考方案2】：我解决了这个问题。
解决方案是使用api.redrawRows 瞬间的api.refreshCells
解决我问题的代码
const row = [];
row.push(child.parent);
this.params.api.redrawRows( rowNodes: row );
【讨论】：
以上是关于ag Grid如何在更改复选框的值后刷新的主要内容，如果未能解决你的问题，请参考以下文章