如何允许用户更改 AG-GRID 中的列名？

Question

我希望允许我的用户将列 header 的名称更改为 他们想要 在 ag-grid 中的任何名称。我正在使用 javascript 实现。

我在堆栈溢出或文档中找不到任何人这样做的例子，我最初的想法是创建一个新的 header 组件并添加我自己的代码以通过 ag 网格以这种方式处理它api.

我找到了这个页面 https://www.ag-grid.com/javascript-data-grid/component-header/

它似乎没有默认的 header 组件作为示例。我想用它来开始......所以我的问题是：

有谁知道可以实现我想要做的事情的示例或更好的方法吗？或者
任何人都可以指出我在哪里可以找到默认 ag 网格 header 组件的代码，我可以使用它开始，并使用文档中给出的示例进行更改上面有链接。

Answer 1

这是默认 header 模板的样子。您可以将其用作定义自定义 header 组件的基础。您需要内联组件参数、绑定事件等而不是那些 ref 属性，如 header 组件的示例所示。

<div class="ag-cell-label-container" role="presentation">
    <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true"></span>
    <div ref="eLabel" class="ag-header-cell-label" role="presentation">
        <span ref="eText" class="ag-header-cell-text"></span>
        <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon" aria-hidden="true"></span>
        <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true"></span>
        <span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" aria-hidden="true"></span>
        <span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" aria-hidden="true"></span>
        <span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" aria-hidden="true"></span>
    </div>
</div>

来源：https://www.ag-grid.com/javascript-data-grid/column-headers/#header-templates

Answer 2

我允许用户在基于 AG Grid Community 的 table 编辑器应用程序中编辑列名称。

Table 编辑器应用程序：https://eviltester.github.io/grid-table-editor/

我使用自定义 header。

我的自定义 header 的来源在这里：https://github.com/eviltester/grid-table-editor/blob/master/customHeader.js

我的 header 基于 AG Grid 文档中的 header 模板：

https://www.ag-grid.com/javascript-data-grid/column-headers/#header-templates

我的header是：

   <div class="customHeaderTop">
    <div class="customFilterMenuButton">
        <i class="ag-icon ag-icon-filter"></i>
    </div>
    <div class="customHeaderLabel">${this.agParams.displayName}</div>
    <div class="customSort">
      <span class="customSortDownLabel inactive">
          <i class="ag-icon ag-icon-desc"></i>
      </span>
      <span class="customSortUpLabel inactive">
          <i class="ag-icon ag-icon-asc"></i>
      </span>
      <span class="customSortRemoveLabel inactive">
          <i class="ag-icon ag-icon-cancel"></i>
      </span>
    </div>
  </div>
  <div class="headerbuttons">
    <span title="add left" onclick="addNeighbourColumnId(-1,'${this.agParams.column.colId}')">[<+]</span>
    <span title="rename" onclick="renameColId('${this.agParams.column.colId}')">[~]</span>
    <span title="delete" onclick="deleteColId('${this.agParams.column.colId}')">[x]</span>
    <span title="duplicate" onclick="duplicateColumnId(1,'${this.agParams.column.colId}')">[+=]</span>
    <span title="add right" onclick="addNeighbourColumnId(1,'${this.agParams.column.colId}')">[+>]</span>
  </div>

重命名列本身可以使用 API:

    renameColId(id,name){

        var colDefs = this.gridApi.getColumnDefs();
        var editColDef;
        colDefs.forEach(colDef =>{
            if(colDef.colId==id){
              editColDef = colDef;
            }
          })
        editColDef.headerName = name;
        this.gridApi.setColumnDefs(colDefs);
    }

如何允许用户更改 AG-GRID 中的列名？

How to allow user to change column name's in AG-GRID?

javascript

jquery

ag-grid