jsTree动态加载子节点(lazy loading)
2015-06-18 09:39
543 查看
该文前提:已经实现从服务器获取json数据初始化jsTree这一步。
js中初始化jstree
返回的json数据,对应用于树节点的数据结构:
实现子节点动态加载的关键所在:
返回的数据中将children设置成布尔型true或者false。
当设置成true时,点击该树节点,jstree就会进行一次请求,请求的url和data配置就是初始化jstree中的那些。
当设置成false时,jstree就将该节点当成叶子节点
这样子就实现了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的动态加载子节点的功能。
相关文章推荐
- 对json的各种操作
- 在web上创建可视化的交互式数据javascript框架-JavaScript InfoVis Toolkit
- js 刷新页面window.location.reload();
- 纯js实现无限空间大小的本地存储
- JS实现当前页居中分页效果的方法
- javascript - ie - css - 动态更新鼠标指针形状
- javascript中Date()函数在各浏览器中的显示效果
- [转]JSP编程,url中加斜杠和不加斜杠的区别
- javaScript中Math()函数注意事项
- json解析性能比较(gson与jackson)
- 理解Javascript_04_数据模型
- JavaScript数据类型
- javaScript中Math()函数注意事项
- javascript中Date()函数在各浏览器中的显示效果
- JS实现当前页居中分页效果的方法
- 纯js实现无限空间大小的本地存储
- 用JavaScript显示浏览器客户端信息的超相近教程
- javascript显示中文日期的方法
- javascript实现根据时间段显示问候语的方法
- javascript随机显示背景图片的方法