jquery jstree 插件的使用

最近一个项目 需要用到jstree 这个jquery插件，就研究了下，做目录树 菜单还是很强大的，下面对经常会用到几个用法做下说明。

1. 首先页面 引用 jquery.jstree

2. html ：

<div id="cate_tree" class="jstree fl"><ul><li id="0" class="jstree-closed jstree-unchecked"><a href="#" class="jstree-clicked"><ins class="jstree-checkbox"> </ins>All Product</a><ul style="">{foreach $categories as $cat}<li id="{$cat.id}" class="jstree-closed jstree-unchecked"><a href="#" class="jstree-clicked"><ins class="jstree-checkbox"> </ins>{$cat.name}</a>{if $cat.sub|@count > 0}<ul style="">{foreach $cat.sub as $subcat}<li id="{$subcat.id}" class="jstree-leaf jstree-unchecked"><a href="#" class=""><ins class="jstree-checkbox"> </ins>{$subcat.name}</a></li>{/foreach}</ul>{/if}</li>{/foreach}</ul></li></ul></div>

默认所有目录树打开不选中， 样式为 

class="jstree-closed jstree-unchecked">

默认打开目录树，样式为

class="jstree-open jstree-unchecked">
默认需要全选，样式尝试
class="jstree-open jstree-checked">
3. js 加载该目录树
// 设置jstree 主题路径$.jstree._themes = Www_URL_JS + 'jstree/themes/';$("#cate_tree").jstree({ "plugins" : [ "themes", "html_data", "checkbox", "ui" ],"themes": {            "theme": "classic",            "dots": true,            "icons": false         }});


默认主题 是default，是文件夹样式，classic 是 ＋ － 号的样式

4. 获取选中的值
var cate_ids = [];$("#cate_tree .jstree-checked").each(function(){            var $this = $(this);            cate_ids.push($this.attr("id"));        });


5. 设置给定的值为选中状态
var cate_js_tree = $("#cate_tree").jstree({ "plugins" : [ "themes", "html_data", "checkbox", "ui" ],"themes": {            "theme": "classic",            "dots": true,            "icons": false         }});cate_js_tree.bind('loaded.jstree', function () {$("#cate_tree").find("li").each(function() {var$this = $(this);for(x in cate_ids) {if ($this.attr("id") == cate_ids[x]) {$("#cate_tree").jstree("check_node", $this);}}});});


6. 如果还有不太明白的，可以访问官网查询，嘿嘿……
附上这个地址，本人觉得很不错，哈哈
http://www.jstree.com/documentation/checkbox
	
				
	
					   
jquery jstree 插件的使用
	  	   
JQuery树插件JSTree的使用
	  	   
JQuery的JSTree使用
	  	   
jsTree插件的应用
	  	   
jstree的使用
	  	   
Jstree的使用
	  	   
JsTree的使用demo
	  	   
【学习】jstree的使用
	  	   
JStree的使用总结
	  	   
JSTree的使用
	  	   
jsTree的使用
	  	   
网页显示简单的静态树，利用jquery 的插件jstree
	  	   
jstree的简单使用例子
	  	   
jstree的基本使用例子
	  	   
jstree的基本使用例子
	  	   
jstree的简单使用例子
	  	   
jstree的简单使用例子
	  	   
jsTree插件的简单的应用
	     		  
	  	   
jsp
	  	   
setjmp/longjmp
	  	   
想investigate a research area . U 'd better read phd thesis, review and survey first
	  	   
Android之网络学习资源汇集（更新）
	  	   
切换div
	  	   
jquery jstree 插件的使用
	  	   
poj 1308
	  	   
php一个题
	  	   
Android 2.2,2.3 浏览器不支持XPATH的对策
	  	   
代码收藏
	  	   
斯坦福大学公开课：编程范式（一）
	  	   
设计模式——备忘录模式
	  	   
私募细解看盘三大要点
	  	   
map遍历取值的几种方式