AG Grid：仅在单元格中居中复选框

Posted 2023-03-28

【中文标题】AG Grid：仅在单元格中居中复选框

【英文标题】：AG Grid: center checkbox alone in cell

【发布时间】：2021-12-29 19:49:46

【问题描述】：

版本：

vueJS: 3.0.0
bootstrap: 5.0.0-beta3
ag-grid-community: 26.1.0
ag-grid-vue3: 26.1.2

请看下面的截图。在我的columnDefs for ag-grid 中，我为Pending 列指定了checkboxSelection: true。我不希望在该列中呈现任何文本。相反，我希望在每个单元格中都有一个复选框。这可以做到吗？按照现在的情况，复选框在单元格中是左对齐的。

这是Pending 的 columnDef：

 headerName: "Pending", field: "pending", sortable: true, editable: true, checkboxSelection: true, cellStyle: () => getPageStatus() ,

这是列标题的样式：

  .ag-header-cell-label 
    justify-content: center;
  

感谢您的调查。

【问题讨论】：

在检查 DOM 中包含复选框的 ag-grid 单元格后，我能够使用以下样式将复选框居中在 Pending 列标题下：.ag-cell-wrapper justify-content: center; 。但我真的希望在 AG Grid 的文档 API 中找到一种定义明确的方法。

【参考方案1】：

我草拟了一个通用解决方案，它解释了如何在网格单元格中呈现自定义 html 元素。该解决方案的大部分基于现有的文章和博客。请注意这里的数据模型（呈现到网格）假定一个 pending 属性。

    <ag-grid-vue
      class="ag-theme-alpine"
      :frameworkComponents="frameworkComponents"
      :columnDefs="columnDefs"
      :rowData="getRowData"
      rowSelection="multiple"
      domLayout="autoHeight"
      editType="fullRow"
      @grid-ready="onGridReady">
    </ag-grid-vue>

import CheckboxRenderer from '@/components/CheckboxRenderer.vue';

export default 
  data() 
    return 
      frameworkComponents: 
        checkboxRenderer: CheckboxRenderer
      ,
      columnDefs: [
             headerName: "Pending", field: "pending", sortable: true, editable: true,
          cellStyle: () => getPageStatus(), cellRenderer: 'checkboxRenderer', valueGetter: params => params ? null : null ,
      ]
    
  
;

CheckboxRenderer.vue

<template>
  <input ref="eGui" @click="checkedHandler" type="checkbox" v-model="params.data.pending" class="ag-input-field-input ag-checkbox-input" />
</template>

<script>
export default 
  name: "CheckboxRenderer",
  props: 
    params: Object
  ,
  methods: 
    getGui() 
      return this.$refs.eGui;
    ,
    checkedHandler(e) 
      let checked = e.target.checked;
      let colId = this.params.column.colId;
      this.params.node.setDataValue(colId, checked);
    
  ,
;
</script>

<style>
.ag-checkbox-input 
  width: 18px;
  height: 18px;
  vertical-align: middle;

</style>