创建 hierarchical/indented 下拉列表

Question

我知道我要问的是能够使用纯HTML；但是，我需要在 ag-Grid 单元中使用此功能。

我对我的 ag-Grid Angular 应用程序有新要求。利益相关者希望我在 ag-Grid 单元格内显示分层 LOV（值列表）下拉列表。我正在使用带有 valueFormat 的 cellEditorSelector 来构建不同类型的 cellEditors；即 agRichSelectCellEditor、datePicker，没有编辑器（只是一个自由形式的输入字段）。

这是我的利益相关者提供的分层下拉列表的示例屏幕截图：

Example of Stakeholder's LOV/dropdown

我尝试使用应用程序中现有的下拉菜单创建 POC：

Proof of Concept

我希望我不必用连字符来表示级别（即 -、--）。我想放置制表符（'\t' 表示一级，'\t\t' 表示二级，等等......）转义序列。

然后我尝试使用以下代码添加字体颜色为白色的连字符，但无济于事：

return {
component: 'agRichSelectCellEditor',
params: {
    values: valueArray,
    formatValue: function(value) {
        return '-----'.fontcolor('white') + value;
    },
}

};

LOV 显示的内容是这样的：

LOV with hyphens, but trimmed tabbed space

这是我创建的数组对象。级别 1 在一个连字符后有一个制表符 (\t)，级别 2 在两个连字符后有两个制表符 (\t\t)，并相应显示。由于某种原因，制表符的空格在网格显示时被删除；因此，使用连字符，因为它们不会被修剪。

Array object with hyphens and tabbed space

如果我创建不带连字符的数组对象，选项卡仍会保留：

Array object with only tabbed space

Answer 1

我能够为我的概念验证想出一个解决方案。请注意，我使用 'level1' 和 'level2' 作为静态级别指标。最终，我的数组对象将包含实际级别，因此它不限于两个级别。

在我的网格组件中，我创建了以下 ag-Grid 组件参考：

this.components = { levelRenderer: levelRenderer }

以及 levelRenderer 代码：

 // cell renderer class
function levelRenderer() {
}

// init method gets the details of the cell to be renderer
levelRenderer.prototype.init = function (params) {
  this.eGui = document.createElement('select');
  const hiddenLOVsElement: HTMLInputElement = document.getElementById('hiddenLOVs') as HTMLInputElement;
  this.hiddenLOVs = hiddenLOVsElement;
  const hiddenLOVsArray: any[] = this.hiddenLOVs.value.split(',');

  for (let i = 0; i < hiddenLOVsArray.length; i++) {
    const option = document.createElement('option');
    option.value = hiddenLOVsArray[i];
    option.text = hiddenLOVsArray[i];

    const levelValue = option.value.substr(0, 6);
    console.log('levelValue: ', levelValue);
    switch (levelValue) {
      case 'level1':
        option.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + hiddenLOVsArray[i];
        break;
      case 'level2':
        option.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
          '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + hiddenLOVsArray[i];
        break;
      default:
        option.innerHTML = hiddenLOVsArray[i];
    }

    this.eGui.appendChild(option);
  }

};

levelRenderer.prototype.getGui = function() {
    return this.eGui;
};

这是我从我的 cellEditorSelector 调用它的方式：

return {
    component: 'levelRenderer',
    }
};

请注意，我使用的值是 Web 服务调用（通过实用程序 class）的结果，其中 returns 一个 JSON 对象。我从 JSON 对象构建了一个名为 valueArray 的数组。我将该数组隐藏在 DOM:

中

<input id='hiddenLOVs' type='hidden' [value]="this.hiddenLOVs"/>


const hiddenListOfValues: HTMLInputElement = document.getElementById('hiddenLOVs') as HTMLInputElement;
hiddenListOfValues.value = JSON.parse(JSON.stringify(valueArray));

这是我的 LOV 的最终结果：

Indented LOV dropdown

注意，需要添加一个getValue函数：

levelRenderer.prototype.getValue = function() {
  console.log('getValue');
  return this.eGui.value;
};

创建 hierarchical/indented 下拉列表

Creating a hierarchical/indented dropdown

javascript

ag-grid

ag-grid-angular