Question

我用JSF 2.2和Primefaces 4.0开发了一个应用程序，我遇到了以下问题：

在带有两列的panelGrid中，我有两个selectManyCheckbox（包含队列的SMC1和包含用户的SMC2;在用户和队列之间我有一个ManyToMany关系）。

我想要做的是当我点击SMC1中的复选框，在javascript的帮助下从SMC2更改相应复选框标签的背景。

我正在考虑使用Ajax调用来实现它，如下面的场景：
1.单击队列复选框;
2.使用相应的queueId向服务器发送Ajax调用;
3.服务器端脚本获取关联的用户并返回带有相应userIds的JSON字符串;
4.在客户端，我有一个回调函数，从服务器接收JSON，并应突出显示相应的复选框标签;

我现在的具体问题是我不知道如何选择每个标签以更改背景，因为Primefaces生成的标签没有id。

<h:form id="aUsers">
<p:panelGrid columns="2" style="width:100%; margin-bottom:10px" cellpadding="5">

<p:selectManyCheckbox onchange="submitNewCheckBoxValue([{name:'qId',value:this.value}]);" id="q" value="#{bean.qIds}" layout="grid" columns="3" converter="javax.faces.Long" converterMessage="Error."> 
    <f:selectItems  value="#{bean.qs}" 
            var="q" 
            itemValue="#{q.id}" 
            itemLabel="#{q.name}"/>
</p:selectManyCheckbox>  

<p:selectManyCheckbox id="users" value="#{bean.usIds}" layout="grid" columns="3" converter="javax.faces.Long" converterMessage="Error."> 
    <f:selectItems  value="#{bean.us}" 
            var="u"
            itemValue="#{u.id}"
            itemLabel="#{u.name}"/>  
</p:selectManyCheckbox>

</p:panelGrid>
<p:remoteCommand name="submitNewCheckBoxValue" 
                 process="@this q"
                 actionListener="#{bean.xxx()}" 
                 oncomplete="handleSaveRequest(xhr,status,args);" />
</h:form>

我的javascrip代码是：

function handleSaveRequest(xhr, status, yourobject) { 
var f = document.getElementById('myForm');
var iLen=f.elements.length;
for (var i=0; i<iLen; i++) {
        if (f.elements[i].type == "checkbox" && f.elements[i].id.substr(0,12) == 'myForm:users') {
            //i don't know what to do next  
        }
}

}

生成一个复选框的源代码以及用户selectManycheckbox生成的附加标签

<td>
<div class="ui-chkbox ui-widget">
    <div class="ui-helper-hidden-accessible">
        <input id="myForm:users:0" name="myForm:users" value="3" type="checkbox">
    </div>
    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
        <span class="ui-chkbox-icon ui-c"></span>
    </div>
</div>
</td>
<td>
    <label for="myForm:users:0">username</label>
</td>

Answer 1

我已经在jquery的帮助下解决了这个问题，就像这样

var f = document.getElementById('myForm');
var iLen=f.elements.length;
for (var i=0; i<iLen; i++) {  
    if(f.elements[i].id.substr(0,12) == 'myForm:users') {
        $(document).ready(function(){
            elemDivParent1 = $(f.elements[i]).parent("div");  
            elemDivParent0 = $(elemDivParent1).parent("div");  
            elemParentTd = $(elemDivParent0).parent("td");  
            elemSiblingTd = $(elemParentTd).next();  
            $(elemSiblingTd).addClass("light");  
    });
}

Primefaces selectManyCheckbox javascript问题

1 个答案: