jstree选择节点

问候，我正在使用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？ 我做这样的事情：

  $("#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(); } }); 

尝试查看ID或NODE的变量a​​。 我实际上是在使用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（）function来存储值以及页面上的元素而不是隐藏字段，除非您想要提交带有值的表单。

但是，如果您需要将其保存到隐藏字段，请尝试以下方法：

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

Answer 6

目前是否将ID分配给任何HTML对象？

在我的解决方案中，我在项目的属性上设置了id，而不是在数据中设置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复选框插件）：

 
 
 Origination 
 
 New Connection
 
 Disconnection
 
 Load Change
 
 Corporate 

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: ' + objNode.id + ', Name: ' + objNode.text + ')'; e = 'Selected Category(Id: ' + objNode.id + ', Name: ' + objNode.text + ')'; $('#footer-api').html(note); }); 

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

如果您使用的是jsTree，那么您应该遵循以下一系列文章 。