Primefaces selectManyCheckbox javascript问题答案

【问题标题】：Primefaces selectManyCheckbox javascript issuePrimefaces selectManyCheckbox javascript问题
【发布时间】：2014-06-20 05:11:47
【问题描述】：

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

在具有两列的 panelGrid 中，我有两个 selectManyCheckbox（包含队列的 SMC1 和包含用户的 SMC2；在用户和队列之间我有一个多对多关系）。

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

我正在考虑使用 Ajax 调用来实现它，例如在以下场景中：
1. 点击队列复选框；
2. Ajax 调用被发送到具有相应 queueId 的服务器；
3. 服务端脚本获取关联的用户并返回一个JSON字符串和对应的userIds；
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>

【问题讨论】：

这些包含在数据表或其他东西中？
不，它们不包含在任何数据表中。
为什么你的 widgetVar 是这样的widgetVar="menu_#{rowIndex}"
我已经尝试了很多方法来解决这个问题，widgetVar 就是其中之一。但这是错误的方法，我也尝试了一个简单的名称，如 widgetVar ="ccc"，没有结果。
不，它不会为每次检查生成一个widgetVar。到目前为止，JS代码中有什么？

标签： javascript jsf primefaces

【解决方案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");  
    });
}

【讨论】：