使用 javascript 更改列的标题

Question

我有一个奇怪的要求，涉及从弹出的 LOV 页面项更改交互式网格内的列标题，而无需每次参数更改时提交/重新加载页面。

我的第一个想法是使用一些 javascript 代码来混淆从动态操作执行的标头。这是我到目前为止的代码：

var parts_arr = $v("P200_PARTS_SELECTION").split(':'),
  col_staticID_arr = ['#part-1_HDR', '#part-2_HDR', '#part-3_HDR', '#part-4_HDR', '#part-5_HDR',
    '#part-6_HDR', '#part-7_HDR', '#part-8_HDR', '#part-9_HDR', '#part-10_HDR'
  ];

for (let i = 0, len = parts_arr.count; i < len; i++) {
  $(col_staticID_arr[i]).text(apex.item("P200_PARTS_SELECTION").displayValueFor(parts_arr[i]));
};

不幸的是，由于某些原因，这不起作用，首先，我似乎无法在

$(...).text

字段中使用变量，甚至无法使用连接字符串。其次，当

displauValueFor(...)

字段只保存一个值时，它似乎只拉动

P200_PARTS_SELECTION

的显示值。

但是我相信我走在正确的道路上，因为以下代码行确实成功更改了列的标题：

$('#part-1_HDR').text('TEST');

任何帮助将不胜感激！

Answer 1

let arr = $(".text").text().split(':');
let col_arr = ['#part-1', '#part-2', '#part-3'];

$('th').each(function( index, value ) {
  $(col_arr[index]).html(arr[index]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="text">text1:text2:text3</div>
<table>
  <thead>
    <tr>
      <th id="part-1">Column 1</th>
      <th id="part-2">Column 2</th>
      <th id="part-3">Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
    </tr>
    <tr>
      <td>Row 3, Column 1</td>
      <td>Row 3, Column 2</td>
      <td>Row 3, Column 3</td>
    </tr>
  </tbody>
</table>

我举了这个例子。这可能适合您的情况。

Answer 2

列标题位于列元数据中。因此，一种方法也可以是调整此元数据并刷新网格（这不会重新加载，只会根据当前状态重新绘制）。 示例代码：

let gridView = apex.region('ig_dept').widget().interactiveGrid("getViews", "grid");
let columns = gridView.getColumns();
let dnameColumn = columns.filter(column => column.elementId == 'c_dname')[0];   // filter by staticId
//let dnameColumn = columns.filter(column => column.property == 'DNAME')[0];   // filter by column name 
dnameColumn.heading = 'Dept name';
gridView.refreshColumns();
gridView.refresh();