jstree使用示例

最新推荐文章于 2022-12-28 13:31:36 发布

原创最新推荐文章于 2022-12-28 13:31:36 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

前端htmlcss 同时被 2 个专栏收录

19 篇文章

订阅专栏

15 篇文章

订阅专栏

该博客介绍了如何使用 jstree 库创建并管理树形结构，包括设置核心配置、实现右键菜单功能，以及监听新建、重命名和删除节点的事件。示例代码展示了如何遍历数据、添加自定义操作，并处理节点的选中事件。

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

$(function() {
	  $('#container')
	  .jstree({
	    'core' : { 
	      'check_callback' : true,
	      'themes' : { "dots" : false,"stripes" : true },
	      'data' : [
	                <volist name="jsoninfo" id="vo">//thinkphp 的遍历标签
                   	{ "id" : "<{$vo.did}>", "parent" : "<{$vo.parentid}>", "text" : "<{$vo.name}>","icon" : "glyphicon glyphicon-folder-close","state" : { "opened" : true } },
                   	</volist>
                 ]
	    },

<span style="white-space:pre">		</span>//右键菜单
		'contextmenu':{
			'select_node':!1,
			'items':function(){
				var a=$.jstree.defaults.contextmenu.items();
				return a.create.label="添加子部门",
				a.create.action=function(a){
					var c=$.jstree.reference(a.reference),
					d=c.get_node(a.reference);
					c.create_node(d,{
						type:"default",
						text:"新建部门"
					},
					"last",
					function(a){
						setTimeout(function(){
							c.edit(a)
						}, 0);
					})
				},
				a.rename.label="重命名",
				a.remove.label="删除",
				delete a.ccp,
				a
			}
		},
	  	"plugins" : ["wholerow","contextmenu"]
	  })
	  .on('create_node.jstree', function(e, data){ //新建节点
		  //data.node.parent;父节点

		}).on('rename_node.jstree', function(e, data){ <span style="font-family: Arial, Helvetica, sans-serif;">//重命名节点</span>
<span style="white-space:pre">			</span>//处理data.text，data.node.id

		}).on('delete_node.jstree', function(e, data){//删除节点
			//处理data.node.id
		})
  	  .on("changed.jstree", function (e, data) {
		if(data.selected.length) {
			//获取点击焦点是处理data.instance.get_node(data.selected[0]).id
		}
	  });
	  
	});