获取jstree的已检查节点ID列表 [英] Get list of checked node IDs of jstree
问题描述
我是 jstree 和 jQuery 的新手，我的测试树中的节点检查有点问题。
I'm new to jstree and jQuery and have a little problem with node checking in my test tree.
用户应首先检查他需要的节点，然后单击摘要按钮以获取警报窗口中已检查节点的ID列表。我还想导出一个ID列表，以便在 cgi文件中进一步使用。
The user should first check the nodes he needs, then click on the "Summary" button to get a list of the IDs of the checked nodes in an alert window. I also want to export a list of the IDs for further use in a cgi file.
这是我的代码：
<!doctype html>
<html>
<head>
<title>jstree test</title>
</head>
<body>
<div id="testtree">
<ul>
<li id="1" title="ID:1"><a>Fruits and Vegetables</a>
<ul>
<li id="11" title="ID:11"><a>Fruit</a>
<ul>
<li id="111" title="ID:111"><a>Apple</a></li>
<li id="112" title="ID:112"><a>Banana</a></li>
</ul>
</li>
<li id="12" title="ID:12"><a>Vegetables</a>
<ul>
<li id="121" title="ID:121"><a>Zucchini</a></li>
<li id="122" title="ID:122"><a>Tomato</a>
<ul>
<li id="1221" title="ID:1221"><a>Red Tomato</a></li>
<li id="1222" title="ID:1222"><a>Green Tomato</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<button>Summary</button>
<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script>
$(document).ready(function() {
var checked_ids = []; // list for the checked IDs
$("#testtree").jstree({
"plugins" : [ "themes", "html_data", "checkbox", "ui" ]
});
})
var button = document.querySelector( "button" );
// If the user clicks on the button, show him the IDs of the checked fruits/vegetables:
button.addEventListener( "click", function( ev ) {
alert( "Your Selection: ");
}, false);
</script>
</body>
</html>
我有什么建议吗？
更新1：
我试图从其他帖子中使用Brad的解决方案，但我仍然无法使其工作，因为我不喜欢我知道如何将ID添加到数组中。
I tried to use Brad's solution from the other post but I still can't get it working because I don't know how to add the IDs to the array.
这是我的新代码：
<script>
var checked_ids = [];
$(document).ready(function() {
$("#testtree").jstree({
"plugins" : [ "themes", "html_data", "checkbox", "ui" ]
});
// How do I add the IDs to the array?
$("#testtree").jstree('get_selected').attr('id')
})
var button = document.querySelector( "button" );
// If the user clicks on the button, show him the IDs of the checked fruits/vegetables:
button.addEventListener( "click", function( ev ) {
alert("Your Selection: "+ checked_ids.join("\n"));
}, false);
</script>
任何帮助都将不胜感激。
Any help would be appreciated.
更新2：
数组仍未填充：
<button>Summary</button>
<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script>
$(document).ready(function() {
$("#testtree").jstree({
"plugins" : [ "themes", "html_data", "checkbox", "ui" ]
});
var arr = new Array();
$("#testtree").jstree('get_checked').each(function(index) {
arr.push($(this).attr('id'));
});
var button = document.querySelector( "button" );
button.addEventListener( "click", function( ev ) {
alert("Your Selection: "+ arr.length + " " + arr[0] + " " + arr[1]);
}, false);
})
</script>
推荐答案
问题出现在这个地方.attr（'id ）。它只返回第一个id。你应该使用each（）来填充你的数组：
The problem is in this place .attr('id'). It returns only 1st id. You should use each() to fill your array:
var arr = new Array();
$("#testtree").jstree('get_selected').each(function(index) {
arr.push($(this).attr('id'));
});
UPD：
所选项目是您选择/突出显示的项目。你需要检查项目。所以代码将是
Selected items are those you select/highlight. You need checked items. So the code will be
var arr = new Array();
$("#testtree").jstree('get_checked').each(function(index) {
arr.push($(this).attr('id'));
});
我创建了一个jsfiddle http://jsfiddle.net/J5ZaK/123/
I've created a jsfiddle http://jsfiddle.net/J5ZaK/123/
这篇关于获取jstree的已检查节点ID列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
