jstree选择节点

Question

问候， 我正在使用 jsTree 生成分层数据。 JsTree 生成如下：

$(function() {
$("#industries").tree({
        data: {
            type: "json",
            opts: {
                url: "/Admin/GetIndustries/"
            }
        }
    });
});

它可以查找并且 jsonresult 类似于：

[{"attributes":[],"data":{"title":"Adwokaci, Notariusze","id":"1a051101-c3fa-48f2-b2e1-c60d1b67ea22"},"children":[{"attributes":[],"data":{"title":"Kancelarie adwokackie","id":"26d6cff1-3c7f-4a2f-bf5a-422e08127b43"

我的问题是：如何将选定节点的 id 保存在某个隐藏字段中？我做了这样的事情：

<script type="text/javascript">
    $("#industries").click(function() {
        var tree = $.tree.reference("industries");
        var t = $.tree.focused(); if (t.selected) t.selected; else alert("Select a node first");
        alert(t.id);

    });

但它不起作用。我进入警报窗口“未定义”。有人可以帮我吗？

编辑： 我已经更改了 jstree 实例，如下所示：

$(function() {
$("#industries").tree({
        callback: {
            onselect: function(NODE, TREE_OBJ) {
                    alert(NODE.id);
                }
            },
        data: {
            type: "json",
            opts: {
                url: "/Admin/GetIndustries/"
            }
        }
    });
});

并且我得到空警报

Answer 1

或者只是绑定选择节点：

$("#industries").tree({
        callback: {
            onselect: function(NODE, TREE_OBJ) {
                    alert(NODE.id);
                }
            },
        data: {
            type: "json",
            opts: {
                url: "/Admin/GetIndustries/"
            }
        }
    })
.bind("select_node.jstree", function (NODE, REF_NODE) {
            var a = $.jstree._focused().get_selected();
        }
    });

尝试查看变量 a 的 ID 或 NODE。我实际上是使用 REF_NODE 来获取

Answer 2

我没有检查所有答案，但看到您没有选择任何答案，因此决定发布一个对我有用的方法，

 $(function () {
        $("#demo1")
        .bind("select_node.jstree", function (event, data) {
                           var selectedObj = data.rslt.obj;
            alert(selectedObj.attr("id") + selectedObj.attr("data"));
             })

即如果您想要节点的 id 和标题。希望这有帮助

Answer 3

您可以在 bind() 函数中使用它，如下所示：

.bind("check_node.jstree", function(e, data) {
    //console.log(data.rslt.obj.attr(\'id\'));

    if (data.rslt.obj !== undefined && data.rslt.obj.attr(\'id\') !== undefined) {
        jQuery.ajax({
            async: false,
            type: "POST",
            dataType: "json",
            url: "' . Yii::app()->createUrl('adsmanager/adsfields/ajaxappendcategory') . '",
            data: {
                "id" : data.rslt.obj.attr(\'id\'),
                "itemId" : "' . Yii::app()->getRequest()->getParam('id') . '",
            },
            success: function(r) {
                if(r === undefined || r.status === undefined || !r.status) {
                    data.rslt.obj.removeClass(\'jstree-checked\');
                    data.rslt.obj.addClass(\'jstree-unchecked\');
                } else {
                    niceBox(\'ok, checked\');
                }
            }
        });
    }

    return true;
});

与取消选中操作相同。

Answer 4

尝试这里提到的回调： http://www.jstree.com/documentation

它应该像这样工作这：

$("#industries").tree({
    //..... your other stuff .....
    callback: {
        onselect: function(NODE, TREE_OBJ) {
                      node_id = NODE.id;
                  }
    }
});

Answer 5

现在您已经更改了代码以使用 onselect 回调，您还有问题吗？我无法判断您的编辑是否意味着您已经解决了问题。如果有，您应该将此问题标记为已回答。

就我个人而言，我使用 onchange 而不是 onselect，但我确信两者都可以。您还可以考虑使用 jquery 的 data() 功能来存储值以及页面上的元素隐藏字段的，除非您想要提交包含该值的表单。

但如果您需要将其保存到隐藏字段，请尝试如下操作：

$("#industries").tree({
    //..... your other stuff .....
    callback: {
        onchange: function(NODE, TREE_OBJ) {
             $("#hidden_field").val(NODE.id);
        }
    }
});

Answer 6

目前 id 是否已分配给任何 HTML 对象？

在我的解决方案中，我在项目的属性上设置 id，而不是在数据中，这会在每个

上设置 id。像这样：

[{"data":"Origination","attributes":{"id":"10"}",children":[
                     {"data":"New Connection","attributes":{"id":"11"}},
                     {"data":"Disconnection","attributes":{"id":"12"}},
                     {"data":"Load Change","attributes":{"id":"13"}},
                     {"data":"Corporate","attributes":{"id":"14"}}
                     ]}]

这具有渲染此 HTML 的效果（我也在使用 jsTree 复选框插件）：

<UL class=ltr sizcache="2" sizset="4">
  <LI id=10 class="  open" selected="false"><A class=undetermined href=""><INS> </INS>Origination</A>
  <UL sizcache="2" sizset="0">
    <LI id=11 class=leaf selected="false"><A href=""><INS> </INS>New Connection</A></LI>
    <LI id=12 class=leaf selected="true"><A class=checked href=""><INS> </INS>Disconnection</A></LI>
    <LI id=13 class=leaf selected="false"><A href=""><INS> </INS>Load Change</A></LI>
    <LI style="MARGIN-TOP: 0px" id=14 class="last leaf" selected="true"><A class=checked href=""><INS> </INS>Corporate</A></LI>

Answer 7

与 Matt 一样，我也将 id 放入属性对象中，因此它会附加到 li 节点（从 Matt 复制的示例）。

{"data":"Origination",
 "attributes":{"id":"10"},
 "children":[
   { "data":"New Connection",
     "attributes":{"id":"11"}
   },
   { "data":"Disconnection",
     "attributes":{"id":"12"}
   }
 ]
}

然后，在我的 onselect 函数中，我首先将 li 节点包装在 jQuery 中（函数参数未包装），然后获取它的 id。

    treeObject.callback = {
        onselect: function(liNode, oTree) {
            var id = $(liNode).attr('id');
            var script = ComParentSet.getScript(id);
            script.doXYZ();
        }
    }

Answer 8

$('#jstree-api').on('changed.jstree', function (e, data) {
    var objNode = data.instance.get_node(data.selected);
    var note;
    note = 'Selected Node Data(Id: <strong>' + objNode.id + '</strong>, Name: <strong>' + objNode.text + '</strong>)'; e = 'Selected Category(Id: <strong>' + objNode.id + '</strong>, Name: <strong id="api-data" data-parent="' + objNode.parent + '" data-id="' + objNode.id + '">' + objNode.text + '</strong>)';

    $('#footer-api').html(note);
});

这将为您提供所选节点的详细信息。

这里是一系列文章，如果您使用 jsTree，您应该关注。