Question

我打算在PrimeFaces（5.2）中显示一个（只读，无过滤，没有延迟加载）表，其中表应该一直延伸到具有“空行”的页脚，如果有的话行不够。页脚具有固定位置，因此如果行太多，表格将获得滚动条。获得空行的标准解决方案似乎是返回“假行”以及结果。但是我不知道要返回多少，因为服务器不知道客户端可以看到多少行，所以我返回更多然后可以合理地看到（100）。我的计划是用JavaScript删除不需要的虚拟行，检查它们的“可见性”，但事实证明这是一项不可能完成的任务。到目前为止，我没有看过检查能见度的方法。我的表定义如下：

      function isVisible1(ele) {
          if (ele !== null &&
              ele !== undefined &&
              ele.clientWidth !== 0 &&
              ele.clientHeight !== 0) {
              var style = window.getComputedStyle(ele,null);
              return style !== null &&
                  style !== undefined &&
                  style.opacity !== 0 &&
                  style.visibility !== 'hidden' &&
                  style.display !== 'none';
          }
          return false;
      }
      function isVisible2(ele) {
          return ele !== null &&
              ele !== undefined &&
              ele.clientWidth !== 0 &&
              ele.clientHeight !== 0 &&
              ele.style !== null &&
              ele.style !== undefined &&
              ele.style.opacity !== 0 &&
              ele.style.visibility !== 'hidden' &&
              ele.style.display !== 'none';
      }
      function isVisible3(ele) {
          return ele.offsetWidth > 0 || ele.offsetHeight > 0;
      }
      function countVisibleRows() {
          var count = 0;
          var result1 = 0;
          var result2 = 0;
          var result3 = 0;
          var r;
          for (r in document.getElementById("tableId_data").rows) {
              count++;
              /*
              FAILS BECAUSE window.getComputedStyle(ele,null) says
              argument 1 is not an object
              if (isVisible1(r)) {
                  result1++;
              }*/
              if (isVisible2(r)) {
                  result2++;
              }
              if (isVisible3(r)) {
                  result3++;
              }
          }
          return [count,result1,result2,result3];
      }

        jQuery(document).ready(function () {
            jQuery(document).ready(function () {
                // twice in document.ready to execute after Primefaces callbacks
                try {
                    alert("ROWS: "+countVisibleRows());
                }
                catch(err) {
                    alert(err.message);
                }
            });
        });

（getPaddedOrderViews（100）应该返回至少 100行，如果需要，使用虚拟行填充）

以下代码应该找到可见/不可见的行（所以我可以更改它以便以后删除不可见的虚拟行）：

{{1}}

但它显示“ROWS：[103,0,0,0]”表格中我可以看到大约22个（非空/虚拟）行（我希望得到的数字），更隐藏。有些是我的虚拟行，但在这种情况下我看不到它们中的任何一行。 103证明（恕我直言），我正确地获取行。

isVisible1（ele）在调用window.getComputedStyle（ele，null）时失败。 isVisible2（ele）总是返回false，因为没有row具有样式属性，isVisible3（ele）也总是返回false。

那么，为什么行没有得到任何'风格'，如果没有这种“风格”，我该怎么知道它们是否可见？

关于计算可见行的许多问题/解决方案，其中仅针对“已过滤”的表，但在我的情况下不适用。

如果可以以某种方式从表本身中提取可见行的数量，而不是检查行，这也将解决我的问题。

我根据ShadowPowerManager问题找出如何检查可见性。

Answer 1

如果我理解正确，你想删除溢出行。

因为你使用jQuery可以通过比较行的偏移量与容器底部的偏移量来轻松实现这个目的

var $cont = $('#container')
var contBottom = $cont.height() + $cont.offset().top;

$('tr').filter(function () {
    var $row = $(this),
        top = $row.offset().top,
        ht = $row.height();        
    return (top + ht) > contBottom;
}).remove()

的 DEMO

如何计算HTML表中* visible *行的数量？

1 个答案: