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

Question

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

表格生成如下:

<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;
 }
}

内容表行从第三行开始，这就是为什么在脚本中您可以看到 var i = 3。

Answer 1

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

<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属性在 View 构建时评估。如果您检查了生成的 HTML 输出，您会注意到 <h:outputText id="family1#{rowk+1}">等等都生成没有 EL 表达式评估值的 ID，如下所示 <span id="formId:tableId:0:family1"> 。基本上，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

<小时/>

对于具体的功能要求，在现代硬件中对几个整数求和是非常便宜的(不到一微秒即可完成；一千次仍不到一毫秒)。将其委托(delegate)给客户端是没有意义的。您最好花时间修复其他领域的性能漏洞，例如尝试急切地显示数百万条未过滤和/或未分页的记录。解决这个问题会产生更大的积极影响。

以下内容应该对您有好处。

<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>

如果您真的坚持将其委托(delegate)给客户端，那么最好在“抽象”样式类的帮助下执行下面的操作，而不是狭隘地使用 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只是自动生成的 <tr class>的<rich:subTable> .

显然，在 DOM 中的表格之后运行上面的脚本(例如内联，或在文档准备好时，或在窗口加载时。