基于Primefaces的自定义框架多行表格渲染执行JS设置按钮tooltip问题

异常原因 #

• 初始脚本只在页面加载完成时执行一次，当排序、筛选、分页等AJAX操作触发后，表格DOM会被整体替换，之前添加的title属性会随旧DOM被清除，没有后续逻辑为新渲染的按钮补充tooltip属性。
• 脚本放在xy:column标签内部时，每行都会生成一份相同的脚本，页面首次加载时脚本执行时机早于所有行渲染完成的时机，执行遍历逻辑时只能获取到已渲染完成的第一行，因此仅第一行生效；AJAX刷新时表格所有行会先完成渲染再执行列内脚本，因此刷新后所有行生效。
• 脚本放在table标签闭合前不生效，是因为Primefaces系框架渲染数据表时会自动过滤掉表格标签内非组件定义的内容，不会将这部分脚本输出到前端DOM中。

解决方案 #

以下都是临时适配方案，待后续自定义框架支持属性配置后可直接替换：

方案1：绑定Primefaces AJAX回调（最稳定） #

先将tooltip设置逻辑封装为独立函数：

function setTableButtonTooltip() {
  // 可根据实际渲染的DOM结构调整选择器
  const rows = document.querySelectorAll('#tableId tbody tr');
  for (const row of rows) {
    const tooltipContent = row.children[0].textContent.trim();
    const actionBtn = row.children[1].querySelector('button') || row.children[1].firstChild;
    if (actionBtn) {
      actionBtn.setAttribute('title', tooltipContent);
    }
  }
}

再添加事件监听，保证首次加载和每次表格AJAX更新后都会执行逻辑：

// 页面首次加载完成后执行
document.addEventListener('DOMContentLoaded', setTableButtonTooltip);
// 监听Primefaces AJAX请求完成事件，只要表格被更新就执行设置逻辑
if (window.PrimeFaces) {
  const originalHandle = PrimeFaces.ajax.Response.handle;
  PrimeFaces.ajax.Response.handle = function(xhr, status, args, data) {
    originalHandle.apply(this, arguments);
    if (args?.update?.includes('tableId')) {
      setTableButtonTooltip();
    }
  };
}

方案2：绑定表格组件事件回调（更简洁） #

直接在表格标签内为排序、筛选、分页事件添加完成回调，对应你的自定义框架的AJAX标签即可，示例如下：

<xy:dataTable id="tableId" value="#{lazyTableBean.dates}" var="date">
  <!-- 原有列定义 -->
  <p:ajax event="sort" oncomplete="setTableButtonTooltip()" />
  <p:ajax event="filter" oncomplete="setTableButtonTooltip()" />
  <p:ajax event="page" oncomplete="setTableButtonTooltip()" />
</xy:dataTable>

该方案仅需额外保留首次加载的执行逻辑即可，无需修改全局AJAX配置。

内容的提问来源于stack exchange，提问作者Noel93