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