jquery jstree 插件的使用

最新推荐文章于 2025-06-03 16:06:21 发布

sunbiao0526

最新推荐文章于 2025-06-03 16:06:21 发布

阅读量1.7w

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVASCRIPT

本文链接：https://blog.csdn.net/sunbiao0526/article/details/8176706

JAVASCRIPT 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用jQuery插件jstree创建目录树，详细阐述了基本引用和配置，展示了其在构建菜单方面的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近一个项目需要用到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