Is there a better way to display multivalue data as a column?

问题

I have 4 audit fields in my notes database. They are multivalued and they each get a new entry when something on the form changes. I have an audit form which displays these fields in a columnar way. Almost like a view. Here is the code for the columns.

<xp:tr>
  <xp:td style="background-color:rgb(255,255,255)">
  <xp:text escape="true" id="dspAuditWhen"></xp:text></xp:td>

  <xp:td style="background-color:rgb(255,255,255)">
  <xp:text escape="true" id="dspAuditWho"></xp:text></xp:td>

  <xp:td style="background-color:rgb(255,255,255)">
  <xp:text escape="true" id="dspAuditWhat"></xp:text></xp:td>

  <xp:td style="background-color:rgb(255,255,255)">
  <xp:text escape="true" id="dspAuditValue"></xp:text></xp:td>
</xp:tr>

I populate these fields with a client sided "onClientLoad" event.

var auditWhen = XSP.getElementById("#{id:AuditWhen}").value.split(";");
XSP.getElementById("#{id:dspAuditWhen}").innerHTML = auditWhen.join("\n");

var auditWho = XSP.getElementById("#{id:AuditWho}").value.split(";");
for ( i = 0; i < auditWho.length ; i++) {auditWho[i] = auditWho[i].substr(0,20); }
var a=auditWho.join("\n");
XSP.getElementById("#{id:dspAuditWho}").innerHTML = auditWho.join("\n");

var auditWhat = XSP.getElementById("#{id:AuditWhat}").value.split(";");
var b=auditWhat.join("\n");
XSP.getElementById("#{id:dspAuditWhat}").innerHTML = auditWhat.join("\n");

Note a couple of things. I do not have the code in just yet for dspAuditValue. Also I'm controlling the length of auditWho. Also note that I have a variable "a",and "b" for debugging purposes.

Anyway this code works perfectly fine for the dspAuditWhen and dspAuditWho columns. For dspAuditWhat, they appear to be just separated by spaces, not newlines.

I compared "auditWhat" with "auditWho". "auditWhat" successfully split into an array just like "auditWho"

I compared "b" with "a". It too is a large string with each element separated by a \n.

I have verified that auditWhat is a multivalued list field in the notes client. (If it weren't, then my Notes client Audit form wouldn't be working.)

I see absolutely nothing wrong with this code. It's as if the web browser is saying "you get 2 columns with the data the way you want it and THAT'S IT!!!

Same behaviour in both IE & Firefox

回答1:

\n isn't an HTML tag - it would be just like a carriage return in your HTML source.

Try joining with <br/> instead for a new line eg :

XSP.getElementById("#{id:dspAuditWhat}").innerHTML = auditWhat.join("<br/>");

Not sure why one column in particluar shopuld need special treatment though

回答2:

All values are in the same row of your table. You can generate one row per value. This can be done server side with something like that :

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.data>
        <xp:dominoDocument var="document1" formName="TestHistory"
            action="openDocument" />
    </xp:this.data>

    <xp:this.resources>
        <xp:styleSheet href="/histo.css" />
    </xp:this.resources>

    <xp:repeat id="repeat1" rows="30"
        var="rowData" indexVar="rowIndex"
        value="#{document1.HistoDate}">
        <xp:this.facets>
            <xp:text disableTheme="true" xp:key="header"
                escape="false">
                <xp:this.value><![CDATA[
            <table class="histo">
                <tr>
                    <th>When</th>
                    <th>Who</th>
                    <th>What</th>
                    <th>Comment</th>
                </tr>
            ]]></xp:this.value>
            </xp:text>

            <xp:text disableTheme="true" xp:key="footer"
                escape="false">
                <xp:this.value><![CDATA[</table>]]></xp:this.value>
            </xp:text>
        </xp:this.facets>

        <xp:panel tagName="tr" styleClass="#{javascript: (rowIndex%2 ? 'odd' : 'even')}">
            <xp:text escape="true" tagName="td"
                value="#{javascript:document1.getItemValueArray('HistoDate')[rowIndex]}" />
            <xp:text escape="true" tagName="td"
                value="#{javascript:document1.getItemValueArray('HistoActor')[rowIndex]}" />
            <xp:text escape="true" tagName="td"
                value="#{javascript:document1.getItemValueArray('HistoAction')[rowIndex]}" />
            <xp:text escape="true" tagName="td"
                value="#{javascript:document1.getItemValueArray('HistoComment')[rowIndex]}" />
        </xp:panel>
    </xp:repeat>

</xp:view>

And some css like that :

table.histo {
    margin: 10px;
    border: 1px solid #E0E0E0;
    border-collapse: collapse;
}
table.histo th, table.histo td {
    border: 1px solid #E0E0E0;
    padding: 2px 4px;
}
table.histo th {
    font-weight: bold;
    text-align: center;
    background-color: #D0D0D0;
}
table.histo tr.even {
    background: #FFF;
}
table.histo tr.odd {
    background: #F0F0F0;
}

来源：https://stackoverflow.com/questions/23518896/is-there-a-better-way-to-display-multivalue-data-as-a-column

标签

javascript

arrays

xpages