Primefaces TreeTable css 样式答案

【问题标题】：Primefaces TreeTable css stylePrimefaces TreeTable css 样式
【发布时间】：2013-02-02 09:05:53
【问题描述】：

在我的 JSF Web 应用程序中，我插入了一个简单的 TreeTable。

在哪里可以设置左边框和展开的子图标之间的距离？当新的关卡扩展时，我希望这个距离更大。

编辑：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>Facelet Title</title>
        <link rel="stylesheet" type="text/css" href="css/treetable.css" />
        <style type="text/css">
            .ui-treetable .ui-treetable-indent {
                float: right;
                height: 0px;
                width: 0px;
            }
        </style>
    </h:head>
    <h:body>        
        <h:form id="form">  

            <p:treeTable value="#{newJSFManagedBean.docCon.root}" var="document"  
                         selection="#{newJSFManagedBean.docCon.selectedNode}" selectionMode="single">  

                <f:facet name="header">  
                    Single Selection  
                </f:facet>  

                <p:column style="width:150px">  
                    <f:facet name="header">  
                        Name  
                    </f:facet>  
                    <h:outputText value="#{document.name}" />  
                </p:column>  

                <p:column style="width:100px">  
                    <f:facet name="header">  
                        Size  
                    </f:facet>  
                    <h:outputText value="#{document.size}" />  
                </p:column>  

                <p:column style="width:100px">  
                    <f:facet name="header">  
                        Type  
                    </f:facet>  
                    <h:outputText value="#{document.type}" />  
                </p:column>  

                <f:facet name="footer">  
                    <p:commandButton id="singleBtn" value="View" icon="ui-icon-search"  
                            update=":form:documentPanel" oncomplete="documentDialog.show()"/>  
                </f:facet>  
            </p:treeTable>  

            <p:dialog id="dialog" header="Document Detail" showEffect="fade" widgetVar="documentDialog" modal="true">  
                <p:outputPanel id="documentPanel">  
                    <h:panelGrid  columns="2" cellpadding="5" rendered="#{not empty newJSFManagedBean.docCon.selectedNode}">  
                        <h:outputLabel for="name" value="Name: " />  
                        <h:outputText id="name" value="#{newJSFManagedBean.docCon.selectedNode.data.name}" style="font-weight:bold" />  

                        <h:outputLabel for="size" value="Size: " />  
                        <h:outputText id="size" value="#{newJSFManagedBean.docCon.selectedNode.data.size}" style="font-weight:bold" />  

                        <h:outputLabel for="type" value="Type " />  
                        <h:outputText id="type" value="#{newJSFManagedBean.docCon.selectedNode.data.type}" style="font-weight:bold" />  
                    </h:panelGrid>  
                </p:outputPanel>  
            </p:dialog>  

        </h:form>          
        <br /><br />
    </h:body>
</html>

【问题讨论】：

标签： css jsf jsf-2 primefaces treetable

【解决方案1】：

您需要创建自己的 css 并覆盖 ui-treetable-indent css 属性原来定义为：

.ui-treetable .ui-treetable-indent {
    float: left;
    height: 16px;
    width: 16px;
}

简单的方法是使用h:outputStylesheet 或<link rel="stylesheet"> 包含您自己的样式表。

【讨论】：

我认为它不起作用。我在里面创建了css dir和css文件。然后在头部放置。不工作。如何在 styleClass 或 style 属性中使用，只对 treetable 有影响？
你确定你的href吗？当您从浏览器显示源代码时，它会解析 css 吗？但是似乎不可能使用 styleClass。缩小对树表影响的最佳方法是使用 css 功能，例如。将树表嵌入到具有特定类的容器中
在编辑中我插入了我的 xhtml 代码。我也试过没有链接。如您所见，我更改为右侧并放置 0px 以查看一些更改。但我没有。
您使用哪个版本的 primefaces？它会影响 CSS 样式名称
.ui-treetable .ui-treetable-indent 是新的 Primefaces 3.5 样式。在 3.5 之前，缩进设置为生成的 div 的内联样式。很难修改。要查看样式和 html 结构，您可以使用 firefox firebug 插件或 chrome 原生开发者工具（F12 键）。