设置Datatable primefaces的列宽

时间:2012-06-21 14:16:56

标签: jsf-2 primefaces

在设置数据表的列宽方面需要一些帮助。但是,数据表宽度似乎不一致。数据表中列的宽度似乎取决于列标题长度。请参考以下代码。

 <p:column style="text-align: left; width:15px;" >
           <f:facet name="header">
              <h:outputText id="SalesHistoryID" value="View Sales History/Forecast"/>
           </f:facet>
           <h:commandLink  id="ForecastID" value="View"/>

在上述情况下,列标题值长度“查看销售历史/预测”似乎很大,因此列宽似乎也会根据列标题文本值进行扩展。如果有任何方法可以实际保持列宽的均匀性并且不依赖于列标题文本值,请告诉我。

如果列标题文本长度太大,有没有办法保持列宽的均匀性?请协助。在此先感谢

3 个答案:

答案 0 :(得分:13)

要设置数据表的列宽,请为datatable设置 resizableColumns =“true”属性,然后使用 width =“10”为特定列设置宽度专栏,就是这样:))

<p:dataTable id="dataTable" var="question" value="#{QuestionsMB.questionsList}" rowKey="#{question.id}"
                        paginator="true" rows="10" selection="#{QuestionsMB.selectedQuestions}" 
                        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                        lazy="true" rowsPerPageTemplate="10,15,50,100"
                        resizableColumns="true"
                        emptyMessage="No question found with given criteria" >
                <f:facet name="header">
                    Questions List
                </f:facet> 

                <p:column selectionMode="multiple"/> 

                <p:column id="questionHeader" width="10">
                    <f:facet name="header">
                        <h:outputText maxlength="20" value="Question text :" />
                    </f:facet>
                    <p:commandLink value="#{question.questionText}" update=":questionDetailForm:display" oncomplete="questionDialog.show()"  title="View">
                        <f:setPropertyActionListener value="#{question}" target="#{QuestionsMB.selectedQuestion}" />   
                    </p:commandLink>

                </p:column>
</p:dataTable>   

答案 1 :(得分:6)

<p:dataTable id="id"  value="#{bean.mainList}"  var="dp" tableStyle="width:auto"  resizableColumns="true"  >

tableStyle="width:auto" , resizableColumns="true"这将有助于填充列

答案 2 :(得分:5)

表格元素上的

style =“table-layout:fixed”正是您要找的。默认表格布局为“auto”,这可确保没有单元格小于内容。要知道那些不适合的文字会溢出。