您的位置:首页 > Web前端 > JavaScript

jsTree动态加载子节点(lazy loading)

2015-06-18 09:39 543 查看
该文前提:已经实现从服务器获取json数据初始化jsTree这一步。

js中初始化jstree

$('#contact-org').jstree({
"data" : {
"dataType": 'json',
"url":function(node){
return ctxPath + "/v-contact?queryOrg";
},
"data":function(node){
return {"id" : node.id};
}
}
}
}


返回的json数据,对应用于树节点的数据结构:

{
"attr" : {"id":"标示 "},
"data" :{"title": " 显示的标题 "
           ,"attr":{"href" :"可以自定义一些值,在UI 解析"
                           ,"class": "jstree-search"//可以预先在后台给节点设置样式
}
    ,"icon":" 图标的地址  "
  },
"state" : "closed" 或"open",
"children":[{子节点1},{子节点2}]
}


实现子节点动态加载的关键所在:
返回的数据中将children设置成布尔型true或者false。

当设置成true时,点击该树节点,jstree就会进行一次请求,请求的url和data配置就是初始化jstree中的那些。

当设置成false时,jstree就将该节点当成叶子节点

这样子就实现了jstree的动态加载子节点的功能。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: