如何从primefaces TreeTable中删除emptyMessage答案

【问题标题】：How to remove emptyMessage from primefaces TreeTable如何从primefaces TreeTable中删除emptyMessage
【发布时间】：2019-08-06 22:51:59
【问题描述】：

有没有办法完全删除它，我不是说使用 emptyMessage="" 我的意思是完全没有它，在下面的图片中我有一个空的树表，它就像一个标题之后的树表。

默认为空消息的树形表：

使用 emptyMessage=""：

以上都不是我想要的。

我需要将 2 个树表分开的灰线消失，这在 PrimeFaces 3.5 中没有发生，现在仅在 7.0 中发生，有没有办法？ :) 在 3.5 中你可以有一个空值的树表，现在不可能了，所以在 managedbean 中我在 postconstruct 和 getter 上给它一个默认值，当它为空时，但这并不重要我认为我正在寻找的结果，只是为了让您了解它以前没有发生的原因。

【问题讨论】：

只需查看 CSS 并进行自定义以使其按您的意愿行事。
@Melloware 如何查看它的 css 伙伴？？
嗯，这不是显微镜，这是肯定的。也许使用浏览器开发工具？而你的“伙伴”，他们不知道吗？

标签： css jsf primefaces

【解决方案1】：

正如您问题的 cmets 已经暗示的那样 - 您可以使用一些简单的 CSS 并使用 emptyMessage="" 来解决这个问题。这是一个简单的例子来说明如何做到这一点；

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Empty treetable styling</title>
        <style>
            tbody#form\:first_data > tr > td:empty {
                display: none;
            }
        </style>
    </h:head>
    <h:body>
        <h:form id="form">
            <p:treeTable id="first" emptyMessage="" value="#{treeBackingBean.root}">
                 <f:facet name="header">First TreeTable</f:facet>
            </p:treeTable>
            <p:treeTable emptyMessage="" value="#{treeBackingBean.root}">
                <f:facet name="header">Second TreeTable</f:facet>
            </p:treeTable>
        </h:form>       
    </h:body>
</html>

我们利用:empty CSS 选择器结合emptyMessage="" 将在结果树表中生成一个空的td元素这一事实。然后我们使用display: none;隐藏元素。

为了完整起见，这里是本示例使用的支持 bean；

@Data
@Named
@ViewScoped
public class TreeBackingBean implements Serializable {
    private TreeNode root;

    @PostConstruct
    private void init() {
        root = new DefaultTreeNode("Testing", null);
    }
}

生成的树表应该类似于下图；

我们仅在此处设置第一个树表的样式，但正如您所见，它删除了您在问题中遇到的“空白区域”。出于比较的目的，我将第二个树表保留为任何自定义样式规则。

第一个渲染的 treetable 树网格（PrimeFaces 为第一个 treetable 生成的代码）如下所示 - 您还可以清楚地看到之前定义的样式规则匹配的位置；

<table role="treegrid">
    <thead id="form:first_head">
        <tr role="row"></tr>
    </thead>
    <tfoot></tfoot>
    <tbody id="form:first_data" class="ui-treetable-data ui-widget-content">
        <tr class="ui-widget-content ui-treetable-empty-message">
            <td colspan="0"></td>
        </tr>
    </tbody>
</table>

【讨论】：

干杯！...添加客户端呈现的 html 可能是件好事，因为这似乎是 OP 的最大问题
@AdamWaldenberg 感谢队友，css 是我编程的最大弱点，我明天上班去试试！谢谢:)
@AdamWaldenberg 嘿，兄弟，它起作用了，只需要花 5 分钟时间就必须为我的表单 ID 更改 #form 并且首先为我的树表 ID 更改，我是个新手，呵呵跨度>
@BugsForBreakfast 很高兴听到这个消息。