jstree 学习笔记
2010-10-20 16:35
183 查看
1) 官网:http://jstree.com/
jstree版本:v.1.0.rc2
2) jstree 可以异步的不停的读取数据库的内容。在数据量很大的时候,可以一层一层的去读取树节点的内容,不至于界面卡死掉,有很好的用户体验。
前台javascript调用jstree的方法(更多方法可以参考官网的文档,写的很详细)。
javascript:
$(function () {
$("#demo2").jstree({
"json_data" : {
"ajax" : {
"url" : "jsondata.aspx",
"data" : function (n) {
return {
"id" : n.attr ? n.attr("id") : 0
};
}
}
},
"themes" : {
"theme" : "classic",
"dots" : true,
"icons" : false
},
"plugins" : [ "themes", "json_data"]
});
});
展开所有节点: $("#demo2").jstree("open_all");
3) 在jsondata.aspx 页面的page_load中,通过读取数据库拿到每层树节点所要显示的内容,再拼接成jsondata格式的字符串,response.write出来。
jsondata 格式:
[
{ "data" : "A node", "children" : [ { "data" : "Only child", "state" : "closed" } ], "state" : "open" }
]
4) 我应用jstree来动态读取树节点所达到的效果图。
jstree版本:v.1.0.rc2
2) jstree 可以异步的不停的读取数据库的内容。在数据量很大的时候,可以一层一层的去读取树节点的内容,不至于界面卡死掉,有很好的用户体验。
前台javascript调用jstree的方法(更多方法可以参考官网的文档,写的很详细)。
javascript:
$(function () {
$("#demo2").jstree({
"json_data" : {
"ajax" : {
"url" : "jsondata.aspx",
"data" : function (n) {
return {
"id" : n.attr ? n.attr("id") : 0
};
}
}
},
"themes" : {
"theme" : "classic",
"dots" : true,
"icons" : false
},
"plugins" : [ "themes", "json_data"]
});
});
展开所有节点: $("#demo2").jstree("open_all");
3) 在jsondata.aspx 页面的page_load中,通过读取数据库拿到每层树节点所要显示的内容,再拼接成jsondata格式的字符串,response.write出来。
jsondata 格式:
[
{ "data" : "A node", "children" : [ { "data" : "Only child", "state" : "closed" } ], "state" : "open" }
]
4) 我应用jstree来动态读取树节点所达到的效果图。
相关文章推荐
- jstree插件学习笔记
- [Cocos2d-x]Cocos2d-x 3.2 学习笔记
- 机器学习基石学习笔记3 VC Dimension(1)
- javascript学习笔记1-document.write
- java学习笔记(一)
- Nebula3学习笔记(5): IO实战, ZIP解压缩程序
- Apache Shiro学习笔记(六)Shiro Filter介绍
- java学习笔记--封装的注意点
- Python编程入门-第八章 输入和输出 -学习笔记
- kernel 高精度tick hrtimer 学习笔记
- iOS学习笔记--数据存储
- c# 异步编程 学习笔记
- 有上下界的网络流问题学习笔记
- OpenGL学习笔记(四):了解OpenGL、OpenGL的操作模式、特性和基本使用步骤
- 操作系统学习笔记之进程管理(二)
- Vue.js学习笔记一
- 孙鑫vc学习笔记_第11课_part2
- 学习笔记
- 【T-MAC学习笔记10之--数据修改之插入数据,更新数据,删除数据】
- linux学习笔记-读《Linux编程技术详解》(4-2)-文件和目录