在多行表渲染上执行 JavaScript

Question

我正在使用基于 Primefaces 的自定义框架来显示数据表，它看起来像这样：

<xy:dataTable id="tableId" value="#{lazyTableBean.dates}" var="date">
    <xy:column id="nameColumnId">
        <xy:outputText id="nameOutputId" value="date.name"/>
    </xy:column>

    <xy:column id="actionColumnId">
        <xy:actionButton id="actionButtonId" label="Button"
            action="#{someBean.someAction(date.id)}"/>                          
    </xy:column>
</xy:dataTable>

现在我想设置按钮的工具提示。由于该框架的 actionButton 组件没有 title 属性，因此我使用 JavaScript 对其进行更改：

var rows = // getting the table content row components here

// iterating through table rows and setting the button tooltip to the name of the corresponding date
for (const row of rows) {
    var myTooltip = row.children.item(0).textContent;
    row.children.item(1).firstChild.setAttribute("title", myTooltip);
}

当我在文件末尾导入 JS 脚本时，这基本上可以正常工作。 但是，有几个 AJAX 事件（例如，在对表格进行排序或过滤时，或者在使用分页时......）会重新打印表格内容。由于没有再次触发 JS 脚本，因此在这种情况下不会设置工具提示。

现在我计划在某个适当的位置（例如，在重新渲染的组件内部）简单地导入脚本，以便在渲染按钮时执行它。但是，我还没有找到合适的地方让它工作。当我把它放在列中时：

<xy:dataTable id="tableId" value="#{lazyTableBean.dates}" var="date">
    <xy:column id="nameColumnId">
        <xy:outputText id="nameColumnId" value="date.name"/>
    </xy:column>

    <xy:column id="actionColumnId">
        <xy:actionButton id="actionColumnId" label="Button"
            action="#{someBean.someAction(date.id)}"/> 
        <h:outputScript library="js" name="addTooltipToTableButtons.js" />                
    </xy:column>
</xy:dataTable>    

这会导致只有第一行正确设置其工具提示，所有其他行保留其通用的。但是在 AJAX 事件上，会发生正确的行为，所有行都正确设置了它们的工具提示。如果最后还导入了脚本，也会发生相同的行为。我猜这与动态打印具有相同列组件的多行的表格格式有关，但这只是猜测。

将它放在表中（直接在</xy:dataTable> 之前）根本不会执行任何脚本。

我对 JavaScript 完全陌生，我们只是在使用这种方法，直到我们的自定义框架支持设置任意属性。我希望你有一个想法（或解释为什么它不会那样工作） - 在此先感谢！

问候

Answer 1

如果有人对我的解决方案感兴趣，我使用 MutationObserver 来处理事件，除了页面加载时的“正常”JS。

整个 JS 文件是这样的：

var table = ...; // get table by normal means

for (var i = 0, row; row = table.rows[i]; i++) {
    var tooltip = row.cells[0].textContent;
    row.cells[1].firstChild.setAttribute(tooltip);
}

var observer = new MutationObserver(function( mutations ) {
  mutations.forEach(function( mutation ) {
    var newNodes = mutation.addedNodes;
    if( newNodes !== null ) {
        var $nodes = $( newNodes );
        $nodes.each(function() {
            var tooltip = this.cells[0].textContent;
            this.cells[1].firstChild.setAttribute(tooltip);
        });
    }
  });    
});

var config = { 
    attributes: true, 
    childList: true, 
    characterData: true 
};
 
observer.observe(table.children.item(1), config);