有没有更好的方法将多值数据显示为列?

时间:2014-05-07 13:15:26

标签: javascript arrays xpages

我的笔记数据库中有4个审核字段。它们是多值的,当表单上的某些内容发生变化时,它们每个都会获得一个新条目。我有一个审计表单,以柱状方式显示这些字段。几乎像一个观点。这是列的代码。

<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>

我使用客户端和#34; onClientLoad&#34;填充这些字段。事件

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");

注意几件事。我还没有dspAuditValue的代码。我也控制了审计的长度。另请注意,我有一个变量&#34; a&#34;和&#34; b&#34;用于调试目的。

无论如何,这段代码对于dspAuditWhen和dspAuditWho列完全正常。对于dspAuditWhat,它们看起来只是用空格分隔,而不是换行符。

我比较了#34; audit &hat&#34;与&#34; auditWho&#34;。 &#34; auditWhat&#34;成功地分成一个数组就像&#34; auditWho&#34;

我比较了&#34; b&#34;与&#34; a&#34;。它也是一个大字符串,每个元素用\ n。

分隔

我已经验证了audit是什么是Notes客户端中的多值列表字段。 (如果不是,那么我的Notes客户审计表格将不起作用。)

我认为这段代码没有任何问题。就像网络浏览器说的那样,你可以按照你想要的方式得到2列数据,那就是它!

IE和IE中的行为相同火狐

2 个答案:

答案 0 :(得分:2)

\ n不是HTML标记 - 它就像HTML源代码中的回车一样。

尝试加入&lt; br /&gt;而不是新的一行,例如:

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

不确定为什么一栏中的专栏需要特殊处理

答案 1 :(得分:1)

所有值都在表格的同一行。 您可以为每个值生成一行。 这可以通过类似的方式在服务器端完成:

<?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>

还有一些类似的css:

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;
}