当前位置: 首页 > 知识库问答 >
问题:

PrimeFaces TreeTable-停止复选框选择传播

曹季同
2023-03-14

环境:
PrimeFaces 6.1
JSF 2.2
Tomcat 7.0.23
Java1.7。0_79

实现了一个带有复选框选择的TreeTable,并且需要分别防止父节点和子节点的选择向上和向下传播以进行客户端和服务器端处理。

示例树:
父节点
--子节点1
--子子节点1.1
--子节点2
----子子节点2.1

所需行为:选择节点时,只应选中该节点的复选框。

实际行为(开箱即用):
选择节点,子节点和父节点被选中。例如,在上面的示例树中选择子节点2父节点和子子节点2.1也被选中。

TreeTable组件:

<p:treeTable id="treeTable" value="#{Bean.rootNode}" var="item" selectionMode="checkbox" nodeVar="node"
    styleClass="widthFull" showUnselectableCheckbox="true" selection="#{Bean.selectedNodes}" stickyHeader="true">
    <p:ajax event="select" listener="#{Bean.processSelect(item)}" ignoreAutoUpdate="true"/>
    <p:ajax event="unselect" listener="#{Bean.processUnselect(item)}" ignoreAutoUpdate="true"/>
    ....
</p:treeTable>

覆盖PrimeFaces JS函数:
能够通过覆盖PrimeFaces.widget.TreeTable.prototype.propagate和PrimeFaces.widget.TreeTable.prototype.get后代javascript函数来防止客户端处理中的传播。

PrimeFaces.widget.TreeTable.prototype.propagateUp = function(node) {
    //do nothing, overriding the TreeTable propagate selection up functionality

}

PrimeFaces.widget.TreeTable.prototype.getDescendants = function(node) {
    //do nothing other than return empty array, overriding the TreeTable propagate selection down functionality by overriding getDescendants...hopefully this doesn't cause other issues
    f = [];
    return f;
}

树表更新:
树表更新是作为ajax选择和取消选择事件处理的一部分执行的。

RequestContext.getCurrentInstance().update("inventoryForm:treeTable");

问题:当ajax select和unselect事件被触发以禁用特定节点上的可选择性并更新树表时,子节点被选中。处理ajax事件侦听器时,子节点不在Bean上的selectedNodes数组中。如何防止在树表组件更新时选择子节点?

共有1个答案

拓拔松
2023-03-14

防止复选框选择从服务器端传播可以通过扩展CheckboxTreeNode类并覆盖传播SelectionDown(boolean)和传播SelectionUp()方法来实现。当然,然后您需要使用新类而不是CheckboxTreeNode构建树内容。

public class MyCheckboxTreeNode extends CheckboxTreeNode {

    public MyCheckboxTreeNode() {
        super();
    }

    public MyCheckboxTreeNode(Object data, TreeNode parent) {
        super(data, parent);
    }

    public MyCheckboxTreeNode(Object data) {
        super(data);
    }

    public MyCheckboxTreeNode(String type, Object data, TreeNode parent) {
        super(type, data, parent);
    }

    @Override
    protected void propagateSelectionDown(boolean value) {
        //Do nothing, overriding CheckboxTreeNode method to prevent propagation down of tree node selections when ajax update is performed.
    }

    @Override
    protected void propagateSelectionUp() {
        //Do nothing, overriding CheckboxTreeNode method to prevent propagation up of tree node selections when ajax update is performed.
    }
}

需要重写额外的PrimeFaces javascript函数,以防止在子节点折叠时向下传播。

//--------Override Primefaces JS
PrimeFaces.widget.TreeTable.prototype.fireSelectNodeEvent = function(b) {
    //Overriding this function in order to prevent selection of descendant nodes when parent is selected. See a.oncomplete function below.
    if (this.isCheckboxSelection()) {
           var e = this
             , a = {
               source: this.id,
               process: this.id
           };
           a.params = [{
               name: this.id + "_instantSelection",
               value: b
           }];
           a.oncomplete = function(k, f, g) {
            //commented out the logic to prevent selection of descendant nodes when parent node is selected
            //if (g.descendantRowKeys && g.descendantRowKeys !== "") {
                   //var j = g.descendantRowKeys.split(",");
                   //for (var h = 0; h < j.length; h++) {
                       //e.addToSelection(j[h])
                   //}
                   //e.writeSelections()
               //}
           }
           ;
           if (this.hasBehavior("select")) {
               var d = this.cfg.behaviors.select;
               d.call(this, a)
           } else {
               PrimeFaces.ajax.AjaxRequest(a)
           }
       } else {
           if (this.hasBehavior("select")) {
               var d = this.cfg.behaviors.select
                 , c = {
                   params: [{
                       name: this.id + "_instantSelection",
                       value: b
                   }]
               };
               d.call(this, c)
           }
       }
}
 类似资料:
  • 问题内容: 我看到了一个非常简单的选择框,其中的选择选项在悬停时可见(而不是单击),如以下屏幕截图所示。 替代文字 我正在尝试在下面的简单选择框中创建类似的效果。能有人帮这可怎么办呢?谢谢。 问题答案: 这是一种实现方式,尽管我更喜欢一种插件方法(而 不是对html进行硬编码ul): 编辑以包括演示中使用的css和html: html css: 这将导致菜单隐藏unselected项目,直到将ul

  • 如果选中复选框D并取消选中其他复选框,我希望选中复选框K和F。同样,如果选中复选框I,则前面的复选框I将被选中,下面的复选框将被取消选中。我的html代码是: 我为此所做的是: 这看起来很乱,还有一个很酷的过程吗???

  • 问题内容: 我有一个复选框,希望对click事件执行一些Ajax操作,但是该复选框也位于容器内,它具有自己的单击行为,当单击该复选框时,我不想运行该行为。此示例说明了我要执行的操作: 但是,我不知道如何在不导致默认点击行为(复选框变为选中/未选中)的情况下停止事件冒泡。 以下两项都停止了事件冒泡,但也没有更改复选框状态: 问题答案: 更换 与 event.stopPropagation() 停止将

  • 问题内容: 我有一个Django应用程序,想要在用户的个人资料中显示多个选择复选框。然后,他们将能够选择多个项目。 这是我的models.py的简化版本: 和我的形式课: 还有我的views.py: 我可以看到POST仅发送一个值: 并且本地vars参数正在发送一个列表: 所有表单字段都显示正确,但是当我提交POST时,我得到一个错误 错误绑定参数7-可能是不受支持的类型。 我是否需要在视图中进一

  • 我在应用程序中遇到复选框选择问题。我在一个页面上有一个dataTable(index.xhtml)。在同一个页面上有一个ajax按钮,当用户单击它时,应用程序应该导航到另一个页面(detail.xhtml)。详细信息页面包含用于导航回索引的返回按钮。xhtml。导航有效,但当用户从详细信息页面返回时,当用户单击dataTable时,dataTable中的行复选框不会被选中(选中所有行的标题复选框有

  • 下面是我的代码。 问题是当我选中一个复选框时,包括选中循环视图中的其他复选框。但当我签入适配器时,项目被正确添加,但复选框被复制。 例如:如果我选中了第一项复选框,向下滚动第16项复选框也会被选中。取消选中该复选框也将取消选中第一项。