ag-grid树形视图:一种让子列在x级别深度可编辑,而父列为总和的方法。
创始人
2024-07-30 13:31:14
0

在使用 ag-Grid 的树形视图中,如果希望子列在不同级别深度可编辑,而父列为总和,可以使用 ag-Grid 提供的 valueGetter 和 valueSetter 方法来实现。以下是一个示例代码:

// 设置 columnDefs,定义列的配置信息
const columnDefs = [
  { headerName: '名称', field: 'name' },
  { headerName: '数量', field: 'quantity', editable: true, valueGetter: 'data.quantity', valueSetter: 'params.data.quantity = newValue' },
  { headerName: '总和', editable: false, valueGetter: 'data.total', valueSetter: 'params.data.total = newValue' }
];

// 设置 rowData,定义树形结构的数据
const rowData = [
  { name: '父级1', quantity: 10, total: 0, children: [
    { name: '子级1.1', quantity: 5, total: 0 },
    { name: '子级1.2', quantity: 3, total: 0 }
  ]},
  { name: '父级2', quantity: 8, total: 0, children: [
    { name: '子级2.1', quantity: 2, total: 0 },
    { name: '子级2.2', quantity: 3, total: 0 },
    { name: '子级2.3', quantity: 1, total: 0 }
  ]}
];

// 设置 gridOptions,定义 grid 的配置信息
const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  treeData: true,
  getNodeChildDetails: (node) => {
    if (node.children) {
      return {
        group: true,
        children: node.children,
        expanded: true
      };
    } else {
      return null;
    }
  }
};

// 创建 ag-Grid 实例
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);

在上述示例代码中,通过设置 valueGettervalueSetter 方法来获取和设置单元格的值。valueGetter 方法定义了获取单元格值的方式,而 valueSetter 方法定义了设置单元格值的方式。

父列的 valueGetter 方法和 valueSetter 方法都设置为计算总和。子列的 valueGetter 方法和 valueSetter 方法分别设置为获取和设置子列的数量。

注意,在这个示例中,父列的 editable 属性设置为 false,表示不可编辑,而子列的 editable 属性设置为 true,表示可编辑。

这样,当用户编辑子列的数量时,父列的总和会自动更新。

相关内容

热门资讯

Android Studio ... 要解决Android Studio 4无法检测到Java代码,无法打开SDK管理器和设置的问题,可以...
安装tensorflow mo... 要安装tensorflow models object-detection软件包和pandas的每个...
安装了Laravelbackp... 检查是否创建了以下自定义文件并进行正确的配置config/backpack/base.phpconf...
安装了centos后会占用多少... 安装了CentOS后会占用多少内存取决于多个因素,例如安装的软件包、系统配置和运行的服务等。通常情况...
按照Laravel方式通过Pr... 在Laravel中,我们可以通过定义关系和使用查询构建器来选择模型。首先,我们需要定义Profile...
按照分类ID显示Django子... 在Django中,可以使用filter函数根据分类ID来筛选子类别。以下是一个示例代码:首先,假设你...
Android Studio ... 要给出包含代码示例的解决方法,我们可以使用Markdown语法来展示代码。下面是一个示例解决方案,其...
Android Retrofi... 问题描述:在使用Android Retrofit进行GET调用时,获取的响应为空,即使服务器返回了正...
Alexa技能在返回响应后出现... 在开发Alexa技能时,如果在返回响应后出现问题,可以按照以下步骤进行排查和解决。检查代码中的错误处...
Airflow Dag文件夹 ... 要忽略Airflow中的笔记本检查点,可以在DAG文件夹中使用以下代码示例:from airflow...