我有四个支票簿的模块列表(查看,创建,编辑和删除)。在那,如果用户点击创建复选框或编辑复选框或删除复选框想要自动选中复选框和复选框,如果取消选中视图复选框想要取消选中create.Edit并自动删除。请帮我解决这个问题,因为我是JSF的新手。提前谢谢
此致 莫汉
<p:column headerText="Module ID:">
<h:outputText value="#{modules.moduleID}" />
</p:column>
<p:column headerText="Root Module ID:">
<h:outputText value="#{modules.rootID}" />
</p:column>
<p:column headerText="Module Description:">
<h:outputText value="#{modules.moduleDescription}" />
</p:column>
<p:column headerText="View" >
<h:selectBooleanCheckbox id="vi" value="#{roleModule.view[modules.moduleID]}"/>
</p:column>
<p:column headerText="Create" >
<h:selectBooleanCheckbox value="#{roleModule.create[modules.moduleID]}">
<p:ajax update="vi" listener="#{roleModule.permissionCheck}"/>
</h:selectBooleanCheckbox>
</p:column>
<p:column headerText="Edit" >
<h:selectBooleanCheckbox value="#{roleModule.edit[modules.moduleID]}">
<p:ajax update="vi" listener="#{roleModule.permissionCheck}"/>
</h:selectBooleanCheckbox>
</p:column>
<p:column headerText="Delete" >
<h:selectBooleanCheckbox value="#{roleModule.delete[modules.moduleID]}">
<p:ajax update="vi" listener="#{roleModule.permissionCheck}"/>
</h:selectBooleanCheckbox>
</p:column>
</p:dataTable>
答案 0 :(得分:1)
我会在jQuery中执行此操作,原因之一是,在视图上完成所有取消选中和检查后,将其置于服务器端级别是如此基本的操作。
JS
$(PrimeFaces.escapeClientId('form:table'))
.on("change",
"input[type='checkbox'][name*='edit'], input[type='checkbox'][name*='create'], input[type='checkbox'][name*='delete']",
function() {
var tr = $(this).parent().parent();
var view = tr
.find("input[type='checkbox'][name*='view']");
var create = tr
.find("input[type='checkbox'][name*='create']");
var edit = tr
.find("input[type='checkbox'][name*='edit']");
var deleteBox = tr
.find("input[type='checkbox'][name*='delete']");
if ($(this).is(':checked')) {
view.prop("checked", true);
} else {
if (create.is(':checked') || edit.is(':checked')
|| deleteBox.is(':checked')) {
view.prop("checked", true);
} else
view.prop("checked", false);
}
});
$(PrimeFaces.escapeClientId('form:table')).on(
"change",
"input[type='checkbox'][name*='view']",
function() {
var tr = $(this).parent().parent();
var view = tr.find("input[type='checkbox'][name*='view']");
var create = tr.find("input[type='checkbox'][name*='create']");
var edit = tr.find("input[type='checkbox'][name*='edit']");
var deleteBox = tr
.find("input[type='checkbox'][name*='delete']");
if ($(this).is(':not(:checked)')) {
create.prop("checked", false);
edit.prop("checked", false);
deleteBox.prop("checked", false);
}
});
请注意:如果您更新表格,则应重新运行该脚本,或者只能使用表单ID替换选择器。像这样
$(PrimeFaces.escapeClientId('form')).on ....
当然,您应该将代码包含在$( document ).ready()。
中修改强> 的 根据您的要求。
我创建了一个小project on github,您可以下载该项目,看看jQuery(JS一般)如何与JSF一起工作,这里是一个实时的demo。
两个主要文件是main.xhml和checkBoxesJQuery.js。
希望它有所帮助。
答案 1 :(得分:0)
试试这个,这可能对你有帮助 JSF代码:
<h:selectBooleanCheckbox value="#{bean.viewChecked}" >
<a4j:support action="#{bean.viewCheckBoxAction}" event="onclick" reRender="panelId"/>
</h:selectBooleanCheckbox>
<h:outputText value="View" />
<h:selectBooleanCheckbox value="#{bean.createChecked}" >
<a4j:support action="#{bean.createCheckBoxAction}" event="onclick" reRender="panelId"/>
</h:selectBooleanCheckbox>
<h:outputText value="Create" />
<h:selectBooleanCheckbox value="#{bean.editChecked}" >
<a4j:support action="#{bean.editCheckBoxAction}" event="onclick" reRender="panelId"/>
</h:selectBooleanCheckbox>
<h:outputText value="Edit" />
<h:selectBooleanCheckbox value="#{bean.deleteChecked}" >
<a4j:support action="#{bean.deleteCheckBoxAction}" event="onclick" reRender="panelId"/>
</h:selectBooleanCheckbox>
<h:outputText value="Delete" />
Bean代码:
public String viewCheckBoxAction()
{
if(!viewChecked) // while view is unchecked then uncheck all the others
{
editChecked = false;
deleteChecked = false;
createChecked = false;
}
return null;
}
public String createCheckBoxAction()
{
viewCheckManage();
return null;
}
public String editCheckBoxAction()
{
viewCheckManage();
return null;
}
public String deleteCheckBoxAction()
{
viewCheckManage();
return null;
}
private void viewCheckManage()
{
if(createChecked || deleteChecked || editChecked) // while any one is checked then view also checked
{
viewChecked = true;
}
else
{
viewChecked = false;
}
}
答案 2 :(得分:0)
您可以尝试这样的事情
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</h:head>
<h:body>
<h:form id="form">
<p:dataTable value="#{roleModule.modulesList}" var="module" id="table">
<p:column headerText="Module ID:">
<h:outputText value="#{module.moduleID}" />
</p:column>
<p:column headerText="Root Module ID:">
<h:outputText value="#{module.rootID}" />
</p:column>
<p:column headerText="Module Description:">
<h:outputText value="#{module.moduleDescription}" />
</p:column>
<p:column headerText="View">
<h:selectBooleanCheckbox id="view" value="#{module.view}">
<p:ajax update=":form:table" listener="#{roleModule.permissionCheck}" />
</h:selectBooleanCheckbox>
</p:column>
<p:column headerText="Create">
<h:selectBooleanCheckbox id="create" value="#{module.create}">
<p:ajax update=":form:table" listener="#{roleModule.permissionCheck}" />
</h:selectBooleanCheckbox>
</p:column>
<p:column headerText="Edit">
<h:selectBooleanCheckbox id="edit" value="#{module.edit}">
<p:ajax update=":form:table" listener="#{roleModule.permissionCheck}" />
</h:selectBooleanCheckbox>
</p:column>
<p:column headerText="Delete">
<h:selectBooleanCheckbox id="delete" value="#{module.delete}">
<p:ajax update=":form:table" listener="#{roleModule.permissionCheck}" />
</h:selectBooleanCheckbox>
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
如果您的模块是实体bean,您可能希望使用@Transient
注释复选框属性import java.io.Serializable;
public class Module implements Serializable {
private static final long serialVersionUID = 176253618089501709L;
private String moduleID,rootID,moduleDescription;
private boolean view,edit,delete,create;
public String getModuleID() {
return moduleID;
}
public void setModuleID(String moduleID) {
this.moduleID = moduleID;
}
public String getRootID() {
return rootID;
}
public void setRootID(String rootID) {
this.rootID = rootID;
}
public String getModuleDescription() {
return moduleDescription;
}
public void setModuleDescription(String moduleDescription) {
this.moduleDescription = moduleDescription;
}
public boolean isView() {
return view;
}
public void setView(boolean view) {
this.view = view;
}
public boolean isEdit() {
return edit;
}
public void setEdit(boolean edit) {
this.edit = edit;
}
public boolean isDelete() {
return delete;
}
public void setDelete(boolean delete) {
this.delete = delete;
}
public boolean isCreate() {
return create;
}
public void setCreate(boolean create) {
this.create = create;
}
@Override
public String toString() {
return "Module [moduleID=" + moduleID + ", rootID=" + rootID + ", moduleDescription=" + moduleDescription + ", view=" + view + ", edit=" + edit + ", delete=" + delete + ", create=" + create + "]";
}
}
最后
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.component.UIInput;
import javax.faces.context.FacesContext;
import javax.faces.event.AjaxBehaviorEvent;
@ManagedBean
@ViewScoped
public class RoleModule implements Serializable{
private static final long serialVersionUID = 1L;
private List<Module> modulesList;
@PostConstruct
public void init() {
modulesList = new ArrayList<Module>();
Module m1 = new Module();
m1.setModuleID("1");
m1.setRootID("root");
m1.setModuleDescription("desc1");
modulesList.add(m1);
Module m2 = new Module();
m2.setModuleID("2");
m2.setRootID("root");
m2.setModuleDescription("desc2");
modulesList.add(m2);
}
public void permissionCheck(AjaxBehaviorEvent event){
Boolean value = (Boolean) ((UIInput) event.getComponent()).getValue();
UIInput component = ((UIInput) event.getComponent());
FacesContext context = FacesContext.getCurrentInstance();
Module module = context.getApplication().evaluateExpressionGet(context, "#{module}", Module.class);
System.out.println(module+","+value+","+component.getId());
switch(component.getId()){
case "create":
case "delete":
case "edit":
if (value){
module.setView(true);
}
break;
case "view":
if (!value){
module.setCreate(false);
module.setDelete(false);
module.setEdit(false);
}
}
}
public List<Module> getModulesList() {
return modulesList;
}
public void setModulesList(List<Module> modulesList) {
this.modulesList = modulesList;
}
}
更新:下面的一点勘误
//try as non-string using equal
Path pathFilterNonString = getPath(filter.getKey(), site, siteType);
Class pathType = pathFilterNonString.getJavaType();
if (pathType.equals(Long.class)){
try{
filterCondition = cb.and(filterCondition, cb.equal(pathFilterNonString, Long.valueOf(filter.getValue())));
}catch(java.lang.NumberFormatException nfe){
//ignore
//java.lang.NumberFormatException: For input string: "a"
}
}else if (pathType.equals(Timestamp.class)){
try{
filterCondition = cb.and(filterCondition, cb.equal(pathFilterNonString, Timestamp.valueOf(filter.getValue())));
}catch(java.lang.IllegalArgumentException e){
//ignore
//java.lang.IllegalArgumentException: Timestamp format must be yyyy-mm-dd hh:mm:ss[.fffffffff]
}
}
答案 3 :(得分:0)
您可以使用复选框的onchange-attribute并添加JavaScript代码,如document.getElementByID('formID:tableID:lineID:boxID').checked=true