Question

我有一个表格，其上有一些数据，并且它们的一些单元格必须与每个存在的数据行的同一行中的其他单元格相加。我想在客户端使用dinamically来减少部分服务器负载，因为在某些情况下会有数百万个家庭行分页。

该表生成如下：

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

内容表行从第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而没有EL表达式的评估值，如<span id="formId:tableId:0:family1">。基本上，HTML DOM树中的实际ID是不您的JavaScript代码所期望的。

以下相关问题详述：

至于具体的功能要求，在现代硬件中总结几个整数是非常便宜的（在不到一微秒的时间内完成;千次仍然不到一毫秒）。将它委托给客户端是没有意义的。您最好花时间修复其他区域的性能漏洞，例如尝试热切地显示未经过滤和/或未经过滤的数百万条记录。修正具有更大的积极影响的数量级。

下面应该对你有好处。

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

如果你真的坚持将它委托给客户端，那么最好在下面的帮助下做好＃34; abstract＆＃34;假设父<rich:dataTable>的客户ID与您尝试的选择器[id^="frmCalculoRHP:table"]匹配，并且您显然无法使用$，那么样式类而不是具有ID的狭隘一些与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中的表之后运行上面的脚本（例如内联，文档准备或窗口加载。

数据表每行汇总特定单元格

1 个答案: