Question

我有一个很好的DataView，只有一件事是错的。额外列的宽度会根据字段中数据的宽度而不断变化。我认为如果这些值不会跳转，看起来好多了。

如何设置这些列的宽度？我尝试在额外列的样式中使用带有！important的宽度，但这并不起作用。我尝试在值上添加＆amp; NBSP，但这并没有完美地发挥作用，而且真的非常糟糕。

<xe:dataView id="dataView1" var="dvEntry"
                    collapsibleDetail="false" columnTitles="true"
                    detailsOnClient="true" openDocAsReadonly="true" rows="25"
                    disableTheme="false" pageName="/xpFormEmployee.xsp"
                    styleClass="lotusTable" rowStyleClass="EVEN,ODD"
                    rowStyle="width:1000px">


                    <xe:this.data>
                        <xp:dominoView var="view1"
                            viewName="(xpEmployeeByNameActiveOnly)"
                            databaseName="TheTruth.nsf" dataCache="id"
                            searchExactMatch="false">
                            <xp:this.search><![CDATA[#{javascript:var query:String = '';
var search:String = viewScope.get("searchString")
if (search === null || search == "") 
{query =  ""}
else
{query = 'FIELD HR_FullName CONTAINS ' + search + '*'}
return query

}]]></xp:this.search>
                        </xp:dominoView>
                    </xe:this.data>
                    <xe:this.extraColumns>

                        <xe:viewExtraColumn
                            style="width:400px !important;vertical-align:middle;font-weight:bold"
                            headerStyle="font-weight:bold;font-size:12pt" contentType="html"
                            columnTitle="Location">
                            <xe:this.href><![CDATA[#{javascript:var geoView:NotesView = database.getView("(DbLookupLocationsByName)");
var geoDoc:NotesDocument;
var UNID:String;

geoDoc = geoView.getDocumentByKey(dvEntry.getColumnValue("HR_GeoLocation"));

if (geoDoc != null)
{
UNID = geoDoc.getUniversalID();
"notes://XX/__86257D58005E456E.nsf/0/" + UNID + "?OpenDocument"}
else
{""}}]]></xe:this.href>
                            <xe:this.value><![CDATA[#{javascript:var tmpLoc:String = dvEntry.getColumnValue("HR_geoLocation");
var lenTmpLoc = 30 - tmpLoc.length;
var tmpPad:String = "";

for (i = 0; i < (lenTmpLoc); i++)
{tmpPad += "&nbsp;";}

return tmpLoc + tmpPad 
}]]></xe:this.value>

                        </xe:viewExtraColumn>
                        <xe:viewExtraColumn columnTitle="Office Phone"
                            columnName="HR_OfficePhone"
                            style="width:400px !important;vertical-align:middle"
                            headerStyle="font-weight:bold;font-size:12pt"
                            contentType="html">
                            <xe:this.value><![CDATA[#{javascript:var tmpLoc:String = dvEntry.getColumnValue("HR_officePhone");
var lenTmpLoc = 50 - tmpLoc.length;
var tmpPad:String = "";

for (i = 0; i < (lenTmpLoc); i++)
{tmpPad += "&nbsp;";}

return tmpLoc + tmpPad 
}]]></xe:this.value>
                        </xe:viewExtraColumn>

                        <xe:viewExtraColumn></xe:viewExtraColumn>
                    </xe:this.extraColumns>
                    <xe:this.iconColumn>
                        <xe:viewIconColumn>

                            <xe:this.icons>
                                <xe:iconEntry
                                    style="height:35px;width:35px;padding-right:5.0px">
                                    <xe:this.url><![CDATA[#{javascript:var phtStr:String;
var imgNme:String;
phtStr = dvEntry.getColumnValue("photo");

var docUNID:String = dvEntry.getColumnValue("docUNID");


if (phtStr != "")
{imgNme = "XXXXXX/xsp/.ibmmodres/domino/OpenAttachment/XXXX" + docUNID + "/$File/" + phtStr + "?Open"}
else
{imgNme = "xpPhotoPlaceholder.gif"}
imgNme

}]]></xe:this.url>
                                </xe:iconEntry>
                            </xe:this.icons>
                        </xe:viewIconColumn>
                    </xe:this.iconColumn>
                    <xe:this.summaryColumn>
                        <xe:viewSummaryColumn columnTitle="Name"
                            headerStyle="font-weight:bold;font-size:12pt;padding-left:8.0px">
                        </xe:viewSummaryColumn>
                    </xe:this.summaryColumn>
                    <xp:this.facets>
                        <xp:panel xp:key="summary">


                            <xp:table>
                                <xp:tr>
                                    <xp:td>
                                        <xp:text escape="false"
                                            id="computedField2">
                                            <xp:this.value><![CDATA[#{javascript:return "<h4><a href='xpFormEmployee.xsp?openDocument&documentId=" + dvEntry.getUniversalID() + "'>" + dvEntry.getDocument().getItemValueString('HR_FullName') + "</a></h4>";
}]]></xp:this.value>
                                        </xp:text>
                                    </xp:td>
                                </xp:tr>

                            </xp:table>
                        </xp:panel>


                        <xe:pagerSizes id="pagerSizes1"
                            sizes="5|10|25|50|100" xp:key="pagerTopLeft">
                        </xe:pagerSizes>
                        <xp:panel xp:key="pagerBottomLeft"
                            id="panel3">
                            <xe:pagerSizes id="pagerSizes2"></xe:pagerSizes>
                        </xp:panel>
                        <xp:panel xp:key="pagerTopRight"
                            styleClass="panelPagerTopRight">
                            <xp:pager layout="Previous Group Next"
                                for="dataView1" id="pager3" partialRefresh="true"
                                styleClass="pager">
                            </xp:pager>
                        </xp:panel>
                        <xp:panel xp:key="pagerBottomRight">
                            <xp:pager layout="Previous Group Next"
                                for="dataView1" id="pager1" partialRefresh="true"
                                styleClass="pager">
                            </xp:pager>
                        </xp:panel>
                        <xp:panel xp:key="noRows">
                            <xp:br />
                            <xp:div styleClass="xlEmptyFacet">
                                <xp:label>
                                    <xp:this.value><![CDATA[#{javascript:"No Documents Found"}]]></xp:this.value>
                                </xp:label>
                            </xp:div>
                        </xp:panel>
                    </xp:this.facets>
                </xe:dataView>

Answer 1

将班级 lotusTable 的样式更改为

.lotusTable {
    table-layout: fixed;
}

然后，width=或headerStyle列中的格式style将不再被忽略。

示例：的

假设上面的css代码在Style Sheets Resource＆＃34; fixedTable.css＆＃34;然后你可以设置列＆＃39;宽度这样

   <xp:this.resources>
      <xp:styleSheet
         href="/fixedTable.css"></xp:styleSheet>
   </xp:this.resources>
   <xe:dataView ...>
       ...
       <xe:this.extraColumns>
           <xe:viewExtraColumn
               headerStyle="width:10%;" ...>
               ...
       </xe:viewExtraColumn>
       <xe:this.extraColumns>
           <xe:viewExtraColumn
               headerStyle="width:20%;" ...>
               ...
       </xe:viewExtraColumn>
       <xe:this.summaryColumn>
           <xe:viewSummaryColumn
               headerStyle="width:70%;" ...>
           </xe:viewSummaryColumn>
       </xe:this.summaryColumn>
       ...
   </xe:dataView>

如何阻止Xpages DataView中的额外列的宽度更改

1 个答案: