对于jsTree–通过ajax按需加载子节点感兴趣的读者，本文将会是一篇不错的选择，并为您提供关于Ajax按需读取数据生成下级菜单、ASP.NETTreeView并按需加载数据、Bootstrap3–
对于jsTree – 通过ajax按需加载子节点感兴趣的读者，本文将会是一篇不错的选择，并为您提供关于Ajax按需读取数据生成下级菜单、ASP.NET TreeView并按需加载数据、Bootstrap 3 – 如何通过AJAX在模态体中加载内容？、Bootstrap 3-如何通过AJAX在模态主体中加载内容？的有用信息。
本文目录一览：- jsTree – 通过ajax按需加载子节点
- Ajax按需读取数据生成下级菜单
- ASP.NET TreeView并按需加载数据
- Bootstrap 3 – 如何通过AJAX在模态体中加载内容？
- Bootstrap 3-如何通过AJAX在模态主体中加载内容？
jsTree – 通过ajax按需加载子节点
我试图得到一个jsTree工作与按需加载子节点。我的代码是这样：
jQuery('#introspection_tree').jstree({
"json_data" : {
"ajax" : {
url : "http://localhost/introspection/introspection/product"
}
},"plugins" : [ "themes","json_data","ui" ]
});
从调用返回的json是
[
{
"data": "Kit 1","attr": {
"id": "1"
},"children": [
[
{
"data": "Hardware","attr": {
"id": "2"
},"children": [
]
}
],[
{
"data": "Software","attr": {
"id": "3"
},"children": [
]
}
]
]
}
.....
]
每个元素可能有很多孩子，树会是大的。目前，这是一次加载整个树，这可能需要一些时间。当用户打开子节点时，我需要做什么来实现按需加载？
提前致谢。
爱尔兰人指出我的方向是正确的，但不能完全解决我的问题。我用她的答案挑出来，想出了这个。为了清楚起见，仅使用两个不同的服务器功能。第一个列出所有顶级产品，第二个列出给定productid的所有子项：
jQuery("#introspection_tree").jstree({
"plugins" : ["themes","ui"],"json_data" : {
"ajax" : {
"type": 'GET',"url": function (node) {
var nodeId = "";
var url = ""
if (node == -1)
{
url = "http://localhost/introspection/introspection/product/";
}
else
{
nodeId = node.attr('id');
url = "http://localhost/introspection/introspection/children/" + nodeId;
}
return url;
},"success": function (new_data) {
return new_data;
}
}
}
});
从函数返回的json数据是这样的(注意每个节点中的state = closed)：
[
{
"data": "Kit 1","state": "closed"
},{
"data": "KPCM 049","attr": {
"id": "4"
},{
"data": "Linux BSP","attr": {
"id": "8"
},"state": "closed"
}
]
不需要静态数据，树现在在每个级别上是完全动态的。
Ajax按需读取数据生成下级菜单
jilian.htm复制代码 代码如下:
<script language="javascript">
var http_request=false;
function send_request(url){//初始化,指定处理函数，发送请求的函数
http_request=false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest){//Mozilla浏览器
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType){//设置MIME类型
http_request.overrideMimeType("text/html");
}
}
else if(window.ActiveXObject){//IE浏览器
try{
http_request=new ActiveXObject("Xsxml2.XMLHTTP");
http_request.setRequestHeader("Content-Type","text/xml");
http_request.setRequestHeader("Content-Type","gb2312");
}
catch(e){
try{
http_request=new ActiveXObject("Microsoft.XMLHTTP");
http_request.setRequestHeader("Content-Type","text/xml");
http_request.setRequestHeader("Content-Type","gb2312");
}
catch(e){
}
}
}
if(!http_request){//异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例");
return false;
}
http_request.onreadystatechange=processRequest;
//确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET",url,true);
http_request.send(null);
}
//处理返回信息的函数
function processRequest(){
if(http_request.readyState==4){//判断对象状态
if(http_request.status==200){//信息已经成功返回，开始处理信息
document.getElementById(currentPos).innerHTML=http_request.responseText;
}
else{//页面不正常
alert("您所请求的页面有异常");
}
}
}
function showRoles(obj){
document.getElementById(obj).parentNode.style.display="";
document.getElementById(obj).innerHTML="正在读取数据..."
currentPos=obj;
send_request("jilian_data.asp?playPos="+obj);
}
</script>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20">
<a href="javascript:void(0)" onclick="showRoles(''pos_1'')">经理室
</a>
</td>
</tr>
<tr >
<td height="20" id="pos_1"> </td>
</tr>
<tr>
<td height="20">
<a href="javascript:void(0)" onclick="showRoles(''pos_2'')">开发部</a>
</td>
</tr>
<tr >
<td id="pos_2" height="20"> </td>
</tr>
</td>
</table>
jilian_data.asp
复制代码 代码如下:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<%
playPos=request("playPos")
if playPos="pos_1" then
Response.Write(" jingli<br> 副总经理")
end if
if playPos="pos_2" then
Response.Write(" 总工程师<br> 软件工程师")
end if
%>
