1. javascript jstree 异步加载 大数据 json格式数据 动态加载
动态加载 那 就是 通过ajax 发出请求 接受 JSON格式的字符串 再转化成 javascript 识别的JSON 对象
也就是版 “${themeList}” 就可以了
前台通权过URL 到 服务端 请求数据 服务端（返回的必须是JSON格式的） 返回数据 前台处理就行了
2. jstree 如何获得选中节点的值
$('#jstree').jstree();
$('#jstree').on('changed.jstree',function(e,data){//当前选中节点的来id
console.log(data.instance.get_node(data.selected[0]).id);
var domId = data.instance.get_node(data.selected[0]).id;
jsTree是基自于javascript的一个跨浏览器树控件，功能强大，而且是免费的。
开始使用jsTree
所有你需要的文件在dist/ folder。
包括jsTree主题
CSS文件。
3. 如何用jsTree.js实现结点展开和收拢时图标的变化
您好，很高兴为您解答。
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge"><!--IE使用它所支持的最新版本-->
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>tree</title>
<linkhref="../css/bootstrap.min.css"rel="stylesheet">
<linkhref="../css/style.min.css"rel="stylesheet">
<linkhref="../css/font-awesome.min.css"rel="stylesheet">
</head>
<body>
<divid="myTree">
<ul>
<li>Root1</li>
<li>Root2
<ul>
<liid="child1">
<a>child1</a>
<ul>
<li>child1-1</li>
<li>child1-2</li>
</ul>
</li>
<li>child2</li>
<li>child3</li>
</ul>
</li>
<li>Root3</li>
</ul>
</div>
<scriptsrc="../js/jquery.min.js"></script>
<scriptsrc="../js/bootstrap.min.js"></script>
<scriptsrc="../js/jstree.min.js"></script>
<script>
$(function(){
$('#myTree').jstree();
$('#myTree').on("changed.jstree",function(e,data){
console.log(data.selected);
});
$('button').on('click',function(){
$('#myTree').jstree(true).select_node('child1');
$('#myTree').jstree('select_node','child1');
$.jstree.reference('#myTree').select_node('child1');
});
});
</script>
</body>
</html>
如若满意，请点击右侧【采纳答案】，如若还有问题，请点击【追问】
希望我的回答对您有所帮助，望采纳！
~O(∩_∩)O~
4. javascript脚本如何异步加载，有什么作用
使用ajax就可以使用异步加载。推荐使用jquery实现异步加载。使用原生js开发速度会下降很多。
这边有一篇使用jq实现异步加载后台数据。
http://www.daimatree.com/tag_jq/tag_jq_ajax.php
5. 请教jstree的一些用法
JsTree是一个基于JQuery的框架，实现简单，功能比较齐全。项目中急于修改树控件，现学现卖，实现了简单的功能，仅包含异步加载，动态设置节点样式图标，靠着自己看帮助文档，多次尝试一步步完成。
1. 实现异步加载
$("#tvBox").tree({
data : {
async : true,
type : "xml_flat",
[color=red]opts : {
url : URL
}
},
types : {
"default" : {
renameable : false,
deletable : false,
creatable : false,
draggable : false
}
},
ui:{
theme_name : "classic"
},
callback : {
beforedata : function(NODE, TREE_OBJ) {
setParams(NODE, TREE_OBJ); // 获取参数信息
//向服务器传递参数
return { type : type_id, dyj : dyj_id, bdz : bdz_id, jg : jg_id, ept : ept_id }
},//end beforedata
onselect : function(NODE, TREE_OBJ) { // 单击函数，点击设备节点名称的时候在右边显示信息
setParams(NODE, TREE_OBJ); // 获取参数信息
var ids = $(NODE).attr("id").split("-");
// alert(ids[6]);
var subType = ids[1];
var dydj = ids[2];
//alert(type_id+" -- "+ept_id);
var nodeParam="type="+type_id+"&subType="+subType+"&bdz="+bdz_id+"&dydj="+dydj+"&ept="+ept_id;
if (type_id == EptType.dyj) {//点击的是电业局节点
var dyj_url = "pages/omds/ept/dyj/dyj.jsp?dyj="+dyj_id+"&"+nodeParam;
//alert(dyj_url+" -- "+dyj_name);
top.doCreateTabItem(dyj_url,
dyj_name,
dyj_url+"&random="+Math.random(),
dyj_name);//在'主页'标签中显示
}
}, //end onselect
// 只在树第一次加载的时候调用
onload : function(TREE_OBJ) {
$("#tvBox ul li a:first-child ins").hide(); //电业局节点不显示图标
}
}// end callback
}); // end tree()
JsTree支持多种格式的数据源，这里使用了xml格式，其实json格式更好。data中代码即可实现异步加载，通过设置UI参数可以修改主题，callback参数可以对一些事件作出响应，如beforedata可以在发送异步请求之前添加url参数，onselect可以响应生成的树中节点的单击事件，还有open在节点被打开的时候被调用，等等，可以帮助实现很多功能……
--1 碰到比较麻烦的事情是展开子节点向后台传递参数时需要用到父节点的id等信息，需要用到parent函数。
--2 另外，当展开一个节点从后台没有查询到子节点时需要返回<root></root>，不能使<root>,我当时用jdom生成xml碰到后者，出现了问题。
--3 callback中的事件需要自己去尝试才能知道什么时候被触发
2. 实现节点换肤
项目中涉及到得是电业局--变电站--间隔--设备，对于后三者节点图标必须与其状态对应，且状态是动态的，所以需要后台在生成xml的时候设置icon属性
6. jstree判断是否有下级节点
有3种方法:
用is_parent( node)方法, node传节点ID或节点对象, 有下级节点则返回true.
用is_leaf(node)方法, 此方法表示是否为最末级, 刚好和is_parent相反.
在事件中获取node对象, 其中node.child为包含所有直接子节点的数组, node.child.length === 0 则没有下级节点.
示例:
html
<divid="tree"></div>
JavaScript
var$tree=$('#tree');
$tree.jstree({
core:{
data:[
{id:'1',parent:'#',text:"1"},
{id:'2',parent:'1',text:"11"},
{id:'3',parent:'1',text:"12"},
{id:'4',parent:'2',text:"111"}
]
}
});
$tree.on('ready.jstree',function(){
//jQuery风格
$tree.jstree('is_parent','2');//true
$tree.jstree('is_leaf','2');//false
//使用jstree实例对象操作
vartree=$tree.jstree(true);
tree.is_parent('4');//false
tree.is_leaf('4');//true
//注意:jstree的初始化是一个异步过程,如果上述代码没有放在初始化完成的事件中,将不会得到正确的结果,因为执行代码时,jstree还没生成.
});
//jstree事件中的应用
$tree.on('select_node.jstree',function(e,data){
varnode=data.node;
if(node.child.length>0)
console.log('此节点有下级节点');
vartree=data.instance;
if(tree.is_parent(node))//这里无需tree.is_parent(node.id),is_parent方法可以node对象作为参数.
console.log('此节点有下级节点');
});
7. 如何使用jsTree事件与AngularJS-angularjs，angularjs-directive
代码： app.directive('jstree', function() {
return {
restrict: 'A',
scope: {
jstree: '='
},
link: function(scope, element, attrs)
{
scope.$watch('jstree', function()
{
$(element).jstree({
"json_data" :{
"data":scope.jstree.data
},
"themes" : {
"theme" : "classic",
"dots" : true,
"icons" : true
},
"plugins" : [ "themes", "json_data" ]
}, false);
}, true);
// select a node
element.bind("select_node.jstree",function(e, data) {
$window.alert(e.data);
});
}
};
});
8. jstree如何清除重新渲染
jstree不用通过重新调用一次$(dom).jstree({})来重新加载，直接清除dom里的内容也是无效的，因为jstree的class等数据还绑定在dom上。
必须在$(dom).jstree({})之前加上$.jstree.destroy ();
销毁原来的所有节点后，新建即可
9. jstree中想要选中子节点，父节点就会变成选中状态，需要如何修改。
修改方法：
JQuery
$('#子节点id').parent().attr('id');//通过子元素id获取父元素
js
document.getElementById("子节点id").parentNode.getAttribute("id");
10. 编程问题： 如何刷新某个div内的jstree，checkbox已经选中的状态，使其改变为不选中。
把对象删除掉再重构一下.用Jquery方法$('#你的树对象容器').remove(); 或者偏例你的树节点,将各节点都设置成未选中状态.