文档章节

jsTree基本使用(新增,修改,删除,移动,点击,加载默认选中根节点,异步加载数据)

绝对起航
 绝对起航
发布于 2017/09/12 11:00
字数 565
阅读 128
收藏 1
点赞 0
评论 0

      曾经在两个不同的项目中使用过两个不同的树插件,分别是ztree和jstree。个人感觉,在基础的使用中(没使用过复杂的操作),jstree是比较方便的(如果想一个页面有多棵树插件,请不要跳ztree的坑)。

       首先,先使用jstree新建一颗树:

<div class="tree">
	<div id="jstree"></div>
</div>
<script>
    $('#jstree').jstree({
	'core' : {
	    'themes' : {
		'name' : 'proton',
		'responsive' : true
	    },//必须加
	    'check_callback' : true,//开启异步刷新必须加
	    'data' : function(node, callback) {//异步请求后台数据
		$.post('${ctx}/dim/getdimcatlogchildren', {//以id请求参数,根节点id默认为“#”号,后台注意区分
		    "id" : node.id
		}, function(data) {
		    for (var i = 0; i < data.length; i++) {
			if (node.id == "#") {//默认选中根节点
			    var state = new Object();
			    state.selected = true;
			    data[i].state = state;
			    $(".remarks-box").html(data[i].name);
			}
            /* 	data[i].type = 'catalog';//设置节点类型
				obj.type = "catalog";
				obj.sign = data[i].id;
				data[i].a_attr = obj; */
			data[i].text = data[i].name;
			data[i].children = true;
		    }
		    callback.call(node, data)
		}, 'json');
	    }
	},
	"plugins" : [ "dnd", "types", "sort" ],//开启插件:拖拽,类型识别,默认排序
	"types" : {
	    "#" : {
		"max_children" : 1,//根节点只能有一个
		"valid_children" : [ "catalog" ]//节点类型只允许是catalog
	    }/* ,
			      "catalog" : {
			        "valid_children" : ["catalog","indicator"]//节点类型只能是catalog和indicator
			      },
			      "indicator" : {
				    "icon" : "glyphicon glyphicon-filter",//设置图标
			        "valid_children" : []//不允许有子节点
			      },
			      "resource" : {
			        "icon" : "glyphicon glyphicon-pushpin",
			        "valid_children" : []
			      } */
	}
    }).on('changed.jstree', function(e, data) {
    //用户点击其它节点事件
    //data.selected 选中的节点id
    //data.instance.get_node(data.selected[0]).text  选中的节点名字
    }).on('move_node.jstree', function(e, data) {
    //拖拽节点事件
    //data.node.id 子节点  data.parent 新的父节点
    });

       补充一点,要整棵树进行刷新时,保持刷新后默认选中根节点,需添加:

.on('refresh.jstree', function(e, data) {
	var ref = data.instance;
	var sel = JSON.parse("[\"" + nowname + "\"]");
	ref.select_node(sel)
 });

       新增,修改子节点:

var ref = $('#jstree').jstree(true);//选中被修改树
var s = JSON.parse("[\"" + id + "\"]");//生成新增节点id
var node = ref.get_node(s[0]);//获取id为s的节点
if (node.original != undefined) {//判断该节点是否存在
//如果存在所做事情,比如修改节点名字
ref.rename_node(s, obj.dim.disname);
return;
}
sel = ref.get_selected();//获取当前选中节点
if (ref.is_open(sel) || ref.is_leaf(sel)){//当前节点已经展开,若没展开,直接展开就可获取节点信息
var anode = obj.dim;
anode.id = obj.dim.id;
anode.text = obj.dim.name;
ref.create_node(sel, anode);//创建节点
}

       删除子节点:

var ref = $('#jstree').jstree(true);
sel = ref.get_selected();
ref.delete_node(sel[0]);

 

© 著作权归作者所有

共有 人打赏支持
绝对起航
粉丝 0
博文 9
码字总数 5306
作品 0
广州
easyUI combotree控件默认复选框选中的问题

工作中使用easyUI的comboTree控件做个树的筛选功能,现在已实现的是异步加载,点击每个节点异步加载下一级,树已经形成,复选框也好使。 目前遇到的问题是,我在修改时候进入显示这棵树的时候...

蜡笔小新_ ⋅ 2016/03/28 ⋅ 0

JQuery Tree插件——zTree v3.0 正式版 发布

在大家的帮助 和 关注下,今天 zTree v3.0 正式版 可以发布了。 v3.0 正式版在功能、性能方便比 v2.x 版本都有了很多改善,尤其是性能方面。用过 v3.0 beta 版本的朋友应该已经体验到了。 但...

zTree ⋅ 2012/01/10 ⋅ 26

对世界上最强大的一棵 treeview 提出意见

说一下,目前我发现最强大的一棵树形菜单还算 zTee 主页地址为:http://www.baby666.cn/v3/main.php#zTreeInfo 我研究 treeview(b/s结构) 的时间加起来,应该有一个月以上了。在传统的web...

长平狐 ⋅ 2013/03/28 ⋅ 0

jstree实现数据同步

目的:实现加载jstree的数据后再点击jstree加载的数据,因为jstree是异步的,将点击方法放到页面初始化里面 $(function(){} 显然是不行的,因为可能数据还没有加载完成,点击的话就没有那条数...

gaofeng36599 ⋅ 2017/04/20 ⋅ 0

高性能PHP论坛--Carbon Forum

Carbon Forum,一个高性能的、高安全性的、基于话题的PHP轻论坛。 优秀的架构,高效的代码,每个页面平均执行时间仅为1~5毫秒,同时恰当地使用异步加载技术,在SEO与用户体验间取得平衡。 论...

lincanbin ⋅ 2014/11/10 ⋅ 2

jstree的使用

1.从官网下载好插件 https://www.jstree.com/ 2.复制到项目中,并导入jquery插件. 3.使用配置: 4.创建实例: 5.监听事件 6.实例交互 7.配置实例 8.html使用jstree 9.使用json属性 10.json生成 ...

小思绪跌跌撞撞仰望天空 ⋅ 2016/08/31 ⋅ 0

JQuery Tree插件 zTree v2.2 正式发布

感谢大家的支持,经过一番努力,终于能见天日了,希望能解决大部分朋友的需求。 这次修正的 Bug 很多,而且还扩展了一些接口,目的就是希望 zTree 能够更灵活的让大家运用到各自的项目中去。...

zTree ⋅ 2010/12/15 ⋅ 1

jstree 怎么改变默认的小三角的样式

最近做一个项目用到 树形 jstree 这个树形里面的东东是在太复杂了 看的头疼,现在想改变树形的样式, 默认加载的是这个 这种小三角的样式看着很不好看 还有那个黄色的背景 也不好看 想改变成...

李俊领 ⋅ 2012/02/17 ⋅ 3

ExtJS学习笔记(一)使用树控件TreeNode ,TreeLoader

在ExtJS中,不管是叶子节点还是非叶子节点,都统一用TreeNode表示树的节点。在ExtJS中,有两种类型的树节点。一种节点是普通的简单树 节点,由Ext.tree.TreeNode定义,另外一种是需要异步加载...

hkm ⋅ 2012/06/04 ⋅ 0

JQuery Tree插件——zTree v3.5.02 版 发布

首先要告诉大家,在 jQuery 发布了插件注册功能后,zTree 也已经发布到了 jQuery 的 Plugins 内,同时也在 Github 上进行了发布(不过近期敏感事件期间 github 一会儿能访问一会儿又不能访问...

zTree ⋅ 2013/01/28 ⋅ 16

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 26分钟前 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 52分钟前 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

容器之查看minikue的environment——minikube的环境信息

执行如下命令 mjduan@mjduandeMacBook-Pro:~/Docker % minikube docker-envexport DOCKER_TLS_VERIFY="1"export DOCKER_HOST="tcp://192.168.99.100:2376"export DOCKER_CERT_PATH="/U......

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部