jQuery jstree 选择节点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2674841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jstree select node
提问by niao
Greetings, I am using jsTree to generatate my hierarchical data. JsTree is generated as follows:
问候，我正在使用 jsTree 生成我的分层数据。JsTree 生成如下：
$(function() {
$("#industries").tree({
data: {
type: "json",
opts: {
url: "/Admin/GetIndustries/"
}
}
});
});
it works find and the jsonresult is something like:
它可以找到并且 jsonresult 是这样的：
[{"attributes":[],"data":{"title":"Adwokaci, Notariusze","id":"1a051101-c3fa-48f2-b2e1-c60d1b67ea22"},"children":[{"attributes":[],"data":{"title":"Kancelarie adwokackie","id":"26d6cff1-3c7f-4a2f-bf5a-422e08127b43"
my question is: how can I save id of selected node in some hidden field? I do something like this:
我的问题是：如何在某些隐藏字段中保存所选节点的 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);
});
but it does not work. I get in my alert window "undefined". Can someone please help me?
但它不起作用。我进入我的警报窗口“未定义”。有人可以帮帮我吗？
EDIT:I've changed the jstree instance as follows:
编辑：我已将 jstree 实例更改如下：
$(function() {
$("#industries").tree({
callback: {
onselect: function(NODE, TREE_OBJ) {
alert(NODE.id);
}
},
data: {
type: "json",
opts: {
url: "/Admin/GetIndustries/"
}
}
});
});
and i get empty alertt
我得到空警报
回答by jlrolin
Or just bind the select node:
或者只是绑定选择节点：
$("#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();
}
});
Try looking at the variable a for the ID, or NODE. I was actually using REF_NODE to get
尝试查看 ID 或 NODE 的变量 a。我实际上是在使用 REF_NODE 来获取
回答by Sue
I did not check all the answers but saw that you didnt select any so decided to post a method that worked for me
我没有检查所有答案，但看到您没有选择任何答案，因此决定发布对我有用的方法
$(function () {
$("#demo1")
.bind("select_node.jstree", function (event, data) {
var selectedObj = data.rslt.obj;
alert(selectedObj.attr("id") + selectedObj.attr("data"));
})
this is if you want the id and the title of the node. hope this helps
这是如果您想要节点的 id 和标题。希望这可以帮助
回答by ignas
You can use it in your bind()function like this:
你可以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;
});
The same with uncheck action.
与取消选中操作相同。
回答by Tapan kumar
$('#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);
});
This will get you the selected node details.
这将为您提供所选节点的详细信息。
Here is a series of articleyou should follow if you are using jsTree.
回答by MDCore
Try the callbacks mentioned here: http://www.jstree.com/documentation
尝试这里提到的回调：http: //www.jstree.com/documentation
It should work something like this:
它应该像这样工作：
$("#industries").tree({
//..... your other stuff .....
callback: {
onselect: function(NODE, TREE_OBJ) {
node_id = NODE.id;
}
}
});
回答by Tauren
Now that you've changed your code to use the onselect callback, are you still having problems? I can't tell if your edit means you've solved the problem or not. If you have, you should mark this question as answered.
既然您已经更改了代码以使用 onselect 回调，那么您还有问题吗？我不知道你的编辑是否意味着你已经解决了这个问题。如果有，您应该将此问题标记为已回答。
Personally, I use onchange instead of onselect, but I'm sure either would work. You could also consider using jquery's data()features to store values along with an element on the page instead of a hidden field, unless you are wanting submit a form with the value.
就个人而言，我使用 onchange 而不是 onselect，但我确信两者都可以。您还可以考虑使用jquery 的 data()功能来存储值以及页面上的元素而不是隐藏字段，除非您想要提交带有该值的表单。
But if you need to save it to a hidden field, try something like this:
但是，如果您需要将其保存到隐藏字段，请尝试以下操作：
$("#industries").tree({
//..... your other stuff .....
callback: {
onchange: function(NODE, TREE_OBJ) {
$("#hidden_field").val(NODE.id);
}
}
});
回答by Matt Frear
Are the ids being assigned to any of the HTML objects at the moment?
目前是否将 id 分配给任何 HTML 对象？
In my solution I set the id on the attribute of the item, not in the data, which sets the ids on each <li>. Like so:
在我的解决方案中，我在项目的属性上设置了 id，而不是在数据中，它在每个 <li> 上设置了 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"}}
]}]
and that has the effect of rendering this HTML (I am also using the jsTree checkbox plugin):
这具有呈现此 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>
回答by Stan
Like Matt, I also put the id in an attributes object, so it gets attached to the li node (example copied from Matt).
像 Matt 一样，我也将 id 放在一个属性对象中，因此它会附加到 li 节点（从 Matt 复制的示例）。
{"data":"Origination",
"attributes":{"id":"10"},
"children":[
{ "data":"New Connection",
"attributes":{"id":"11"}
},
{ "data":"Disconnection",
"attributes":{"id":"12"}
}
]
}
Then, in my onselect function, I first wrap the li node in jQuery (the function parameter is not wrapped), then get it's id.
然后，在我的 onselect 函数中，我首先将 li 节点包裹在 jQuery 中（函数参数未包裹），然后获取它的 id。
treeObject.callback = {
onselect: function(liNode, oTree) {
var id = $(liNode).attr('id');
var script = ComParentSet.getScript(id);
script.doXYZ();
}
}
