【问题标题】:JSF update primefaces tree childrenJSF 更新 primefaces 树的孩子
【发布时间】:2012-10-11 15:20:45
【问题描述】:

我想更新 primefaces 树的子节点,而不是从服务器中拉出整棵树。

我可以更新整个树,但不能更新特定节点的子节点...

编辑:

这是我的代码示例:

<p:tree value="#{cc.tree}" var="wrapper" id="tree" widgetVar="tree" styleClass="commentTree-#{cc.id}">
   <p:treeNode id="treeNode" styleClass="treenode-#{wrapper.id}">
      Hallo: #{wrapper.text}
   </p:treeNode>
</p:tree>

现在我想更新一个特定的树节点。

function findIDbySelector(selector) {
    return $(selector).first().attr('id');
}

function updateComponent(clientID) {
    var ajax_json = {};
    ajax_json['source'] = '#{cc.id}';
    ajax_json['update'] = clientID;

    PrimeFaces.ajax.AjaxRequest(ajax_json);
}

[...]

updateComponent(findIDbySelector('.treenode-1'));

正如我所说,我可以更新整个树,但我只想更新单个 Treenode。

(代码可能包含错误/错别字,因为它被剥离了)

【问题讨论】:

  • 到目前为止你尝试了什么?
  • 我尝试更新 primefaces 生成的子树,但由于它们不是 jsf 组件,因此失败。然后我看了一下primefaces如何在他们的“动态树”示例中加载数据,但是每次扩展节点时它们都会加载整个树,这对我来说是没有选择的。
  • 请发布您的 .xhtml 和 .java 文件,以便我们为您提供指导

标签: java ajax jsf jsf-2 primefaces


【解决方案1】:

我浏览了一些 primefaces 资源,发现它们支持加载子节点,这对我来说已经足够了(我可以将节点的内容包装到面板中并更新它和子节点)。

为了更新子元素,我修改了 primefaces expandnode 方法:

function loadNodes(tree, c) {
    var a = tree;
    if (tree.cfg.dynamic) {
        if (tree.cfg.cache && c.children(".ui-treenode-children").children().length > 0) {
            tree.showNodeChildren(c);
            return
        }
        if (c.data("processing")) {
            PrimeFaces.debug("Node is already being expanded, ignoring expand event.");
            return
        }
        c.data("processing", true);
        var b = {
            source: tree.id,
            process: tree.id,
            update: tree.id,
            formId: tree.cfg.formId
        };
        b.onsuccess = function (j) {
            var g = $(j.documentElement),
                h = g.find("update");
            for (var e = 0; e < h.length; e++) {
                var l = h.eq(e),
                    k = l.attr("id"),
                    f = l.text();
                if (k == a.id) {
                    c.children(".ui-treenode-children").html(f);
                    a.showNodeChildren(c)
                } else {
                    PrimeFaces.ajax.AjaxUtils.updateElement.call(tree, k, f)
                }
            }
            PrimeFaces.ajax.AjaxUtils.handleResponse.call(tree, g);
            return true
        };
        b.oncomplete = function () {
            c.removeData("processing")
        };
        b.params = [{
            name: tree.id + "_expandNode",
            value: a.getRowKey(c)
        }];
        if (tree.hasBehavior("expand")) {
            var d = tree.cfg.behaviors.expand;
            d.call(tree, c, b)
        } else {
            PrimeFaces.ajax.AjaxRequest(b)
        }
    } else {
        tree.showNodeChildren(c);
        tree.fireExpandEvent(c)
    }
}

一个示例调用可能是:

loadNodes(tree, $('#j_idt62\\:tree\\:0'));

其中tree 是 p:tree 的 WidgetVar

【讨论】:

  • 附带说明:不要通过生成的 id (j_idt..) 来引用元素。
  • 仅用于示例 :) 我通过一个独特的类获得 id:function findIDbySelector(selector) { return $(selector).first().attr('id'); }
猜你喜欢
  • 1970-01-01
  • 2018-04-29
  • 2012-12-04
  • 1970-01-01
  • 2013-05-11
  • 2014-06-11
  • 1970-01-01
  • 2012-07-26
  • 2016-09-27
相关资源
最近更新 更多