如何让 ajax 在 t:datatable 列中工作，而 t:datatable 在 t:datalist 中？

Question

我是 JSF 新手。在我的例子中，我想显示几个表（为此我使用数据列表 - 运行时会知道表的数量）并且在每个数据表行中我需要在复选框被选中后执行一些处理程序（没有任何提交按钮 - 它稍后会打电话）。

在下面的代码中

<f:ajax listener="#{dataListTry.run(o)}" event="change" render="some_datatable_id"/>

将在提交按钮后调用，但我需要在选中复选框后刷新，而不是提交按钮。如果我使用没有数据列表的数据表，回调调用没有任何问题。如何使回调在数据列表中的数据表中起作用？

代码示例：

<?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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:t="http://myfaces.apache.org/tomahawk"
>
<h:body>

    <h:form id="some_example_form">

        <t:dataList id="some_data_list"
                    var="dataListTry"
                    value="#{packageGroups.packageGroupList}" rowIndexVar="pos">

            <t:div>
                <t:outputLabel title="label"/>
                <t:outputText value="Table_#{pos}"/>
            </t:div>

            <t:selectBooleanCheckbox title="External">
                <f:ajax event="change" listener="#{dataListTry.run}" render=":some_example_form"/>
            </t:selectBooleanCheckbox>

            <t:column>

                <t:dataTable id="some_datatable_id"
                             forceId="true"
                             forceIdIndex="true"
                             value="#{dataListTry.packageItems}"
                             var="o">

                    <t:column>
                        <h:outputText value="#{o.prefix}"/>
                    </t:column>

                    <t:column defaultSorted="false" sortable="false" width="28px">
                        <t:selectBooleanCheckbox value="#{o.selected}">

                            <f:ajax render="some_datatable_id"/>
                            <f:ajax event="change" listener="#{dataListTry.run(o)}"/>
                        </t:selectBooleanCheckbox>
                    </t:column>
                </t:dataTable>
            </t:column>
        </t:dataList>
        <br/>

        <h:commandButton value="Submit" action="demo" forceId="true"/>
        <h:commandButton value="MoveBack" action="demo" forceId="true" actionListener="#{packageGroups.moveBack()}"/>
    </h:form>

</h:body>

</html>

豆类是：包裹项目：

@ManagedBean(name = "packageItem")
@SessionScoped
public class PackageItem {


  public boolean selected;
  public String prefix;

  public PackageItem(String prefix) {
    this.prefix = prefix;
  }

  public boolean isSelected() {
    return selected;
  }

  public void setSelected(boolean selected) {
    this.selected = selected;
    setPrefix("selected after submit");
  }

  public String getPrefix() {
    return prefix;
  }

  public void setPrefix(String prefix) {
    this.prefix = prefix;
  }

}

包组：

@ManagedBean(name = "packageGroup")
@SessionScoped
public class PackageGroup {

  private List<PackageItem> packageItems;

  private int value;

  private String idGroup;
  private String resultValue = "Created";

  public PackageGroup(String groupId, int groupName, String value, String value2) {
    this.idGroup = groupId;
    this.value = groupName;

    packageItems = new ArrayList<>();
    packageItems.add(new PackageItem(value));
    packageItems.add(new PackageItem(value2));
  }

  public PackageGroup() {
  }

  public List<PackageItem> getPackageItems() {
    return packageItems;
  }

  public void setPackageItems(List<PackageItem> packageItems) {
    this.packageItems = packageItems;
  }

  public void run() {
    doClickAction();
  }

  public void run(PackageItem p) {
    doClickAction();
    this.resultValue = p.prefix;
  }

  private void doClickAction() {
    packageItems.forEach(e -> e.setPrefix("selected!"));
  }

  public int getValue() {
    return value;
  }

  public void setValue(int value) {
    this.value = value;
  }

}

包组：

@ManagedBean(name = "packageGroups")
@SessionScoped
public class PackageGroups {

  private List<PackageGroup> packageGroupList;

  public PackageGroups() {
    packageGroupList = new ArrayList<>();
    packageGroupList.add(new PackageGroup("100", -1, "one", "two"));
    packageGroupList.add(new PackageGroup("200", -2, "three", "four"));
  }

  public void moveBack() {
    packageGroupList.clear();
    packageGroupList.add(new PackageGroup("100", -1, "one", "two"));
    packageGroupList.add(new PackageGroup("200", -2, "three", "four"));
  }

  public List<PackageGroup> getPackageGroupList() {
    return packageGroupList;
  }

  public void setPackageGroupList(List<PackageGroup> packageGroupList) {
    this.packageGroupList = packageGroupList;
  }

}

生成 html（仅视图 - 它不适用于 Whosebug）：

<?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"><body>
<form id="some_example_form" name="some_example_form" method="post" action="/JavaServerFaces_war_exploded/faces/demo.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="some_example_form" value="some_example_form" />
<div><label title="label">
</label>Table_0</div><script type="text/javascript" src="/JavaServerFaces_war_exploded/faces/javax.faces.resource/jsf.js?ln=javax.faces&amp;stage=Development"></script><input id="some_example_form:some_data_list:0:j_idt8" type="checkbox" name="some_example_form:some_data_list:0:j_idt8" value="true" onchange="mojarra.ab('some_example_form:some_data_list:0:j_idt8',event,'change',0,'some_example_form')" title="External" />
<table id="some_datatable_id[0]">
<tbody id="some_datatable_id[0]:tbody_element">
<tr><td>one</td><td width="28px"><input id="some_datatable_id[0]:0:j_idt13" type="checkbox" name="some_datatable_id[0]:0:j_idt13" value="true" onchange="jsf.util.chain(document.getElementById('some_datatable_id[0]:0:j_idt13'), event,'mojarra.ab(\'some_datatable_id[0]:0:j_idt13\',event,\'change\',0,0)', 'mojarra.ab(\'some_datatable_id[0]:0:j_idt13\',event,\'valueChange\',0,\'some_datatable_id[0]\')'); return false;" /></td></tr>
<tr><td>two</td><td width="28px"><input id="some_datatable_id[0]:1:j_idt13" type="checkbox" name="some_datatable_id[0]:1:j_idt13" value="true" onchange="jsf.util.chain(document.getElementById('some_datatable_id[0]:1:j_idt13'), event,'mojarra.ab(\'some_datatable_id[0]:1:j_idt13\',event,\'change\',0,0)', 'mojarra.ab(\'some_datatable_id[0]:1:j_idt13\',event,\'valueChange\',0,\'some_datatable_id[0]\')'); return false;" /></td></tr>
</tbody></table>
<div><label title="label">
</label>Table_1</div><input id="some_example_form:some_data_list:1:j_idt8" type="checkbox" name="some_example_form:some_data_list:1:j_idt8" value="true" onchange="mojarra.ab('some_example_form:some_data_list:1:j_idt8',event,'change',0,'some_example_form')" title="External" />
<table id="some_datatable_id[1]">
<tbody id="some_datatable_id[1]:tbody_element">
<tr><td>three</td><td width="28px"><input id="some_datatable_id[1]:0:j_idt13" type="checkbox" name="some_datatable_id[1]:0:j_idt13" value="true" onchange="jsf.util.chain(document.getElementById('some_datatable_id[1]:0:j_idt13'), event,'mojarra.ab(\'some_datatable_id[1]:0:j_idt13\',event,\'change\',0,0)', 'mojarra.ab(\'some_datatable_id[1]:0:j_idt13\',event,\'valueChange\',0,\'some_datatable_id[1]\')'); return false;" /></td></tr>
<tr><td>four</td><td width="28px"><input id="some_datatable_id[1]:1:j_idt13" type="checkbox" name="some_datatable_id[1]:1:j_idt13" value="true" onchange="jsf.util.chain(document.getElementById('some_datatable_id[1]:1:j_idt13'), event,'mojarra.ab(\'some_datatable_id[1]:1:j_idt13\',event,\'change\',0,0)', 'mojarra.ab(\'some_datatable_id[1]:1:j_idt13\',event,\'valueChange\',0,\'some_datatable_id[1]\')'); return false;" /></td></tr>
</tbody></table>

        <br /><input type="submit" name="some_example_form:j_idt15" value="Submit" /><input type="submit" name="some_example_form:j_idt16" value="MoveBack" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-6485444455087447596:-6234064892138587883" autocomplete="off" />
</form></body>

</html>

在已发布的 html 视图中，如果您选中 Table_% 下的复选按钮，它将执行并更改其他两个复选框的名称（例如，如果您选中 Table_0 一和二将更改它们的名称名）。但是如果你选中附近的复选框，例如，一和二，它们只会在执行按钮提交后更改它们的名称，但是我需要在我没有点击它们之后更改它们需要调用按钮提交。

Answer 1

终于找到解决办法了。如果 forceId 和 forceIdIndex 未设置为 true，则 ajax 回调有效。

如何让 ajax 在 t:datatable 列中工作，而 t:datatable 在 t:datalist 中？

How can I make ajax working in t:datatable column where t:datatable is in t:datalist?

jsf

tomahawk