Question

在我的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>

Answer 1

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

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

简单的方法是在h:outputStylesheet或<link rel="stylesheet">中添加自己的样式表。

Primefaces TreeTable css风格

1 个答案: