Question

我有一个xp：重复控制一个xp：按钮控件。我想计算按钮的styleClass属性，所以我通过在styleClass中添加“active”来识别我点击了哪一个。

不幸的是，当我在viewScope变量中设置活动ID（所选按钮的ID）并将其与在它们区分的styleClass中计算的ID进行比较时。

不同之处在于viewScope中ID的值似乎包含一个额外的迭代器值，例如。

view：_id1：_id81：repeat2：0：button2或视图：_id1：_id81：repeat2：1：BUTTON2

并且styleClass中的计算值不是例如

视图：_id1：_id81：repeat2：BUTTON2

所有其他按钮的最后一个ID值相同。

为了计算我使用的ID值：

getComponent（ “BUTTON2”）。getClientId（FacesContext中）

正如Tim Tripcony所提到的那样Getting the clientId of an XPages button programmatically

我做错了什么或如何在SSJS中正确计算styleClass属性？

Answer 1

不要使用客户端ID。使用重复索引来记忆单击了哪个按钮。

<xp:repeat
    id="repeat1"
    rows="30"
    value="..."
    indexVar="index">
    <xp:button
        value="Label"
        id="button1"
        styleClass="#{javascript:
            'yourClass' + (viewScope.buttonPressed == index ? 'Active' : '')}">
        <xp:eventHandler
            event="onclick" submit="true"
            refreshMode="partial" refreshId="repeat1">
            <xp:this.action><![CDATA[#{javascript:
                viewScope.buttonPressed = index}]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
</xp:repeat>

Answer 2

在我写完第一个答案后，我回家了。在我的路上我想到了这一点，并认为我找到了一个相当简单的解决方案;因为我认为其他答案中的一些想法可以帮助理解我的解决方案提案，所以我保留原封不动并创建新的解决方案。以下是您可以尝试的内容：

为转发器的indexVar媒体资源添加一个值，例如rIndex（您将在所有属性下找到它）

假设一个按钮变为活动状态，用户必须单击它，将一些SSJS代码添加到其onclick事件中，以便将当前indexVar值存储在requestScope变量中：

requestScope.put("activeIndex", rIndex)

确保onclick对包含重复控件的容器执行部分刷新

创建代码来计算重复按钮的样式类;如果重复的迭代索引是存储在requestScope中的索引，则指定一个样式类，否则分配另一个样式类：

if(rIndex==requestScope.get("activeIndex")){
  "btnStyleActive";
}else{
  "btnStyleInactive";
}

因为onclick部分刷新了转发器及其内容，所以应用了correctstyleClass。

我没有在家里安装Domino Designer，所以我无法尝试，但我觉得这必须有效。

更新： 刚刚构建了我自己的解决方案，非常类似于Knut的代码片段，并且它运行良好;没有运行时错误。为了完整性＆＃39;我为转发器添加了一个入口变量（var="rEntry"）但你可能不需要它。

我会发布我的页面的xml代码，以便您可以复制并粘贴并尝试：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.resources>
        <xp:styleSheet href="/test.css"></xp:styleSheet>
    </xp:this.resources>
    <xp:panel id="pnMainContainer">
        <xp:repeat
            id="repeat1"
            rows="30"
            indexVar="rIndex"
            var="rEntry">
            <xp:this.value><![CDATA[#{javascript:[1, 2, 3, 4, 5]}]]></xp:this.value>
            <xp:panel id="pnRptInner">
                <xp:label id="label1">
                    <xp:this.value><![CDATA[#{javascript:"Entry content for this iteration = "+ rEntry.toString() + " "}]]></xp:this.value>
                </xp:label>
                <xp:button id="button1">
                    <xp:this.value><![CDATA[#{javascript:"Repeated Button @ index #" + rIndex.toString()}]]></xp:this.value>
                    <xp:this.styleClass><![CDATA[#{javascript:if(requestScope.get("activeIndex")==rIndex){
    "btnStyleActive";
}else{
    "btnStyleInactive";
}}]]></xp:this.styleClass>
                    <xp:eventHandler
                        event="onclick"
                        submit="true"
                        refreshMode="partial" refreshId="pnMainContainer">
                        <xp:this.action><![CDATA[#{javascript:requestScope.put("activeIndex", rIndex)}]]></xp:this.action>
                    </xp:eventHandler></xp:button>
            </xp:panel>
        </xp:repeat>
    </xp:panel>
</xp:view>

为了完成它，这里是非常简单的css：

.btnStyleInactive{color:blue;}
.btnStyleActive{color:red;};

确保：

按钮的onclick对转发器本身执行部分更新或周围的容器
onclick代码是SSJS

Answer 3

您不能依赖静态资源（如styleSheet）中的控件ID，因为始终会计算这些ID。在xpage上添加更多组件，所有控件都可能会收到新的ID。因为这个原因，我严格避免在我的styleSheets中使用id。

我不能100％确定我是否理解您在这里要做的事情，因此以下解决方案可能与您无关;无论如何我会尝试：

尝试在css中使用伪标识符，如

div.myRepeaterClass按钮：有效{whatever：whatever;}
使用计算的styleClass来包含转发器的indexVar;为此，您可以为重复控件的indexVar属性指定一个名称，如rIndex。然后你的按钮的styleClass可以渲染到

styleClass =“＃{javascript：”myBtnClass_“+ rIndex.toString（）}”

这样您至少可以为按钮设置唯一的styleClasses

这可能是最复杂的，如果其他人不工作：你可能知道css也可以使用各种控制属性作为参考;假设你有一个标准的html元素，你的css可能是

[title = myElementTitle] {whatever：except;}

对于Xpage控件，您可以使用通用属性属性：您将在“ 所有属性＆gt;＆gt;下找到元素” attrs “ ;基础知识 “适用于大多数控件。在这里，您可以添加自己的自定义属性 - 值对，然后您可以从styleSheet中引用它们。如果有必要，您可以编写一些操作该自定义属性的onClick代码。例如：

使用值myRepeatBtn创建自定义属性btnInactive。然后编写将该值更改为btnActive的JS代码。你的css可以使用这个选择器：

[myRepeatBtn=btnActive]{whatever: however;}

部分刷新会导致css对该更改做出反应

希望这个maskes感觉;）祝你好运。

Answer 4

或者从按钮中将条目的NoteID写入viewScope变量并根据该变量计算类。我假设有一些后续处理要做，在这种情况下，NoteID将非常有用。

这是我在很多场合使用过的技术，例如为“视图编辑”启用/禁用可编辑字段。

Answer 5

在转发器中，“var”可以在很多地方使用，但无论出于何种原因，都不能计算styleClass。

以下解决方法有效：使用标准div，span，...而不是xp：div，xp：span ...然后你可以计算类。（注意你编写有效的javascript，因为没有编辑器支持）

代码如下所示：

<xp:repeat
    id="repeat1"
    value="objList"
    var="obj">
    <span class="#{javascript:return (obj.Condition) ? 'class1' : 'class2';}">
        <xp:button
            value="obj.Name"
            id="button1"
            styleClass="btn">
            <xp:eventHandler
                event="onclick" submit="true"
                refreshMode="partial" refreshId="repeat1">
                <xp:this.action>
                ...
                </xp:this.action>
            </xp:eventHandler>
        </xp:button>
    </span>
</xp:repeat>

css取决于父元素类：

    ....
.class1 .btn{
    text-align: left;
}

.class2 .btn{
    text-align: right;
}

    ...

计算重复控制中按钮的styleClass

5 个答案: