数据表每行对特定单元格求和

Question

我有一个 table，上面有一些数据，对于存在的每个数据行，它们的一些单元格必须与同一行中的其他一些单元格相加。我想在客户端动态地减少一些服务器负载，因为在某些情况下有数百万个家庭行分页。

生成的table如下：

<rich:subTable id="tb" var="fila" value="#{AdministrarDMPermanente.listaDistribucionRecHum}" rowKeyVar="rowk">
    <rich:column style="text-align:center">
        <h:outputText value="#{fila.familiasP}"
        id="family1#{rowk+1}" />
    </rich:column>
    <rich:column style="text-align:center">
        <h:outputText value="#{fila.familiasPA}"
        id="family2#{rowk+1}" />
    </rich:column>
    <rich:column style="text-align:center">
        <h:outputText value="#{fila.familiasPAS}"
        id="family3#{rowk+1}" />
    </rich:column>
    <rich:column style="text-align:center">
        <h:outputText value="cargando..." id="totalfam#{rowk+1}" />
        <h:outputText value="#{fila.totalFamilias}" />
    </rich:column>
</rich:subTable>

我希望它以某种方式生成，更像是：

<rich:subTable id="tb" var="fila" value="#{AdministrarDMPermanente.listaDistribucionRecHum}" rowKeyVar="rowk">
    <rich:column style="text-align:center">
        <h:outputText value="#{fila.familiasP}"
        id="family1#{rowk+1}" />
    </rich:column>
    <rich:column style="text-align:center">
        <h:outputText value="#{fila.familiasPA}"
        id="family2#{rowk+1}" />
    </rich:column>
    <rich:column style="text-align:center">
        <h:outputText value="#{fila.familiasPAS}"
        id="family3#{rowk+1}" />
    </rich:column>
    <rich:column style="text-align:center">
        <h:outputText value="cargando..." id="totalfam#{rowk+1}" />
        <rich:jQuery
        selector="[id^='frmCalculoRHP'][id$='totalfam#{rowk+1}']"
        query="[id^='frmCalculoRHP'][id$='family1#{rowk+1}']+   
        [id^='frmCalculoRHP'][id$='family2#{rowk+1}']+
        [id^='frmCalculoRHP'][id$='family3#{rowk+1}']" />
        <ui:remove>
            <h:outputText value="#{fila.totalFamilias}" />
        </ui:remove>
    </rich:column>
</rich:subTable>

当我尝试这种方法时，得到一些 javascript 带括号的代码更改为实体：

<script type="text/javascript">//<![CDATA[
 {
    var selector = "[id^=\'frmCalculoRHP\'\x5D[id$=\'totalfam1\'\x5D";
    try {
        selector = eval("[id^=\'frmCalculoRHP\'\x5D[id$=\'totalfam1\'\x5D");
    } catch (e) {}
    jQuery(selector).[id^='frmCalculoRHP'][id$='family1']+[id^='frmCalculoRHP'][id$='family2']+[id^='frmCalculoRHP'][id$='family3'];
}
//]]>
</script>

根据我的研究，我发现它可以通过类似的方式完成：

function totalFrom() {
 var table = document.getElementById(document.querySelector('[id^="frmCalculoRHP:table"]').id);
 for (var i = 3; i < table.rows.length; i++) {
     var total = 0;
     var firstColumn = table.rows[i].cells[6]
     var input = firstColumn.getElementsByTagName('span')[0];
     var value = parseInt(input.textContent);
     if (!isNaN(value)) {
      total += value;
     }
     var secondColumn = table.rows[i].cells[7];
     var input = secondColumn.getElementsByTagName('span')[0];
     var value1 = parseInt(input.textContent);
     if (!isNaN(value1)) {
      total += value1;
     }
     var thirdColumn = table.rows[i].cells[8];
     var input = thirdColumn.getElementsByTagName('span')[0];
     var value2 = parseInt(input.textContent);
     if (!isNaN(value2)) {
      total += value2;
     }
     var qry="[id^='frmCalculoRHP'][id$='totalfam"+(i-2)+"']";
     var resu=document.getElementById(document.querySelector(qry).id);
     resu.textContent=total;
 }
}

content table 行从第 3 行开始，这就是为什么在脚本中您可以看到 var i = 3.

Answer 1

您的具体问题是由在 id 属性中使用 EL 引起的，该属性依赖于一个变量，该变量仅在视图渲染期间可用，而在视图构建期间不可用。

<rich:subTable ... rowKeyVar="rowk">
    <rich:column>
        <h:outputText id="family1#{rowk+1}" ... />
    </rich:column>
    <rich:column>
        <h:outputText id="family2#{rowk+1}" ... />
    </rich:column>
    <rich:column>
        <h:outputText id="family3#{rowk+1}" ... />
    </rich:column>
</rich:subTable>

id 属性在视图构建期间进行评估。如果您检查了生成的 HTML 输出，您会注意到 <h:outputText id="family1#{rowk+1}"> 等所有生成的 ID 都没有像 <span id="formId:tableId:0:family1"> 这样的 EL 表达式的计算值。基本上，HTML DOM 树中的实际 ID 不是您的 JavaScript 代码所期望的。

这在以下相关问题中有详细说明：

How to use EL with <ui:repeat var> in id attribute of a JSF component
How can I know the id of a JSF component so I can use in Javascript

至于具体的功能需求，对几个整数求和在现代硬件中是非常便宜的（不到一微秒就完成了；千次仍然不到一毫秒）。将它委托给客户端没有意义。您最好花时间修复其他方面的性能漏洞，例如尝试急切地显示数百万条未过滤 and/or 未分页的记录。修复在数量级上具有更大的积极影响。

下面应该对你有好处。

<rich:subTable ...>
    <rich:column>
        <h:outputText value="#{fila.familiasP}" />
    </rich:column>
    <rich:column>
        <h:outputText value="#{fila.familiasPA}" />
    </rich:column>
    <rich:column>
        <h:outputText value="#{fila.familiasPAS}" />
    </rich:column>
    <rich:column>
        <h:outputText value="#{fila.familiasP + fila.familiasPA + fila.familiasPAS}" />
    </rich:column>
</rich:subTable>

如果你真的坚持将它委托给客户端，那么最好在 "abstract" 风格的帮助下像下面那样类而不是狭隘地使用 ID，因为父 <rich:dataTable> 的客户端 ID 与您尝试的选择器 [id^="frmCalculoRHP:table"] 匹配，并且您显然不能使用 $，因为一些与 RichFaces 相关的尴尬 jQuery 冲突：

<rich:subTable ...>
    <rich:column>
        <h:outputText styleClass="family" value="#{fila.familiasP}" />
    </rich:column>
    <rich:column>
        <h:outputText styleClass="family" value="#{fila.familiasPA}" />
    </rich:column>
    <rich:column>
        <h:outputText styleClass="family" value="#{fila.familiasPAS}" />
    </rich:column>
    <rich:column>
        <h:outputText styleClass="family-total" />
    </rich:column>
</rich:subTable>

<script>
    jQuery("[id^='frmCalculoRHP:table'] .rich-subtable-row").each(function(index, row) {
        var total = 0;
        jQuery(".family", row).each(function(index, cell) {
            total += parseInt(jQuery(cell).text()) || 0;
        });
        jQuery(".family-total", row).text(total);
    });
</script>

.rich-subtable-row 只是 <rich:subTable> 的自动生成的 <tr class>。

显然，运行上面的脚本在 DOM 中的 table 之后（例如内联，或在文档就绪时，或在 window 加载时。

数据表每行对特定单元格求和

Datatable sum specific cells every row

javascript

jsf

richfaces