2

私の 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>
4

1 に答える 1

3

ui-treetable-indent独自の css を作成し、最初に次のように定義された css プロパティをオーバーライドする必要があります。

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

h:outputStylesheet簡単な方法は、またはを使用して独自のスタイルシートを含めること<link rel="stylesheet">です。

于 2013-02-18T14:26:50.080 に答える