`
happyqing
  • 浏览: 3197919 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jsTree API,属性,方法,事件,插件,常用方法

阅读更多

 

jstree API 属性、方法、事件、插件
https://www.jstree.com/api/
jstree API 事件
https://www.jstree.com/api/#/?q=jstree Event

jstree中文github文档
https://blog.csdn.net/qq_24472595/article/details/70053863

jsTree 核心功能(core functionality) API
https://www.cnblogs.com/annkiny/p/7825866.html

 

jsTree初始前清空数据

$('#checkMenuTree').data('jstree', false).empty();

jsTree初始

$('#checkMenuTree').data('jstree', false).empty();
$('#checkMenuTree').jstree({
	'core' : {
		'data' : {
			//"url" : "./root.json",
			"url" : contextPath + "/menu/getJsTreeNodeListAll.json?time="+new Date().getTime(),
			//"type" : "post",
			"dataType" : "json" // needed only if you do not supply JSON headers
		}
	},
	"plugins" : ["checkbox"]
});

 

jsTree选择事件

$('#checkMenuTree').on("changed.jstree", function (e, data) {
	//选中节点的id
	console.log(data.instance.get_selected(true)[0].id);
	//选中节点的text
	console.log(data.instance.get_selected(true)[0].text);
	console.log(data.instance.get_node(data.selected[0]).id);
	console.log(data.instance.get_node(data.selected[0]).text);
});

  

jsTree加载完成事件

 1.41. loaded.jstree ( Event ? )
 当根节点(root)第一次加载时触发。
 1.42. ready.jstree ( Event ? )
 当所有节点都加载完毕时触发

//$('#checkMenuTree').on("loaded.jstree", function () {
$('#checkMenuTree').on("ready.jstree", function () {
	//$('#checkMenuTree').jstree(true).open_all();
	$('#checkMenuTree').jstree('open_all');
	$.each(menuIds,function(index,data){//遍历数据
		var node = $('#checkMenuTree').jstree("get_node", data);
		var isLeaf = $('#checkMenuTree').jstree("is_leaf", node);
		if(isLeaf){
			$('#checkMenuTree').jstree('check_node', data);
		}
          });
});

 

jsTree展开所有节点

$('#checkMenuTree').jstree(true).open_all();
$('#checkMenuTree').jstree('open_all');

 

jsTree获取节点

$('#checkMenuTree').jstree("get_node", id);

 

jsTree判断是否是叶子节点

$('#checkMenuTree').jstree("is_leaf", node);

 

jsTree选择节点

    复选框

$('#checkMenuTree').jstree('check_node', id);

    非复选框的

$('#jstree').jstree(true).select_node('mn1');
$('#jstree').jstree('select_node', 'mn2');

  

jsTree刷新

$('#checkMenuTree').jstree().refresh();

 

jsTree获取选择节点

    复选框

var checkedNodes = $('#checkMenuTree').jstree('get_checked',true);

    非复选框

    get_selected ([full])

 

jsTree获取半选节点,获取不确定的节点

var indeterminateNodes = $('#checkMenuTree').jstree('get_undetermined', true);

 

分享到:
评论

相关推荐

    jsTree动态tree

    综上所述,jsTree是构建动态tree的有力工具,它允许开发者通过JSON数据动态加载节点,同时提供了丰富的插件和事件系统以满足各种交互需求。通过合理地配置和与后端的协同,可以实现高效、灵活的树形界面。

    基于jsTree的无限级树JSON数据的转换代码

    在IT开发领域中,jsTree是一个流行的基于jQuery的插件,用于在网页中渲染树形结构的数据。它常被用于表示层次性的信息,如菜单、分类、权限结构等,具有丰富的API和可定制性,支持无限级树形结构的展开和收起。 ###...

    ztree的api加js库

    4. **API 接口丰富**:提供了大量 API 方法,用于节点的增删改查、异步加载、动画效果等。 ### 二、zTree 的基本使用 1. **引入资源**:首先需要在页面中引入 jQuery 和 zTree 的 CSS、JS 文件。例如: ```html ...

    jquery-tree

    jQuery Tree提供了一系列API方法,用于操作树结构,如`expandNode()`用于展开指定节点,`collapseNode()`用于折叠节点,`selectNode()`用于选择节点,`getSelectedNodes()`则返回当前选中的所有节点。 6. **事件...

    控件Jquery树

    常用的jQuery树插件有jQuery UI的Treeview、jstree、jqTree等。这些插件提供了丰富的API和配置选项,便于开发者进行定制。 例如,`jstree`是一个功能强大的jQuery插件,它不仅提供了上述的基本功能,还支持上下文...

    JQuery zTree 2.0 一个非常好用的jQuery树插件

    `zTreeAPI-2.0.chm`是zTree 2.0的API帮助文档,其中详细介绍了各种方法、属性和事件,包括但不限于: 1. **基本方法**:如`init()`初始化树结构,`updateNode()`更新节点信息,`removeNode()`删除节点等。 2. **...

    d3.js 树形结构

    **d3.js 树形结构**是数据可视化领域中一种常用的数据展示方式,它通过图形化的方式呈现层次化的数据,通常用于展现组织架构、文件系统或者网络拓扑等具有层级关系的信息。d3.js,全称Data-Driven Documents,是由...

    bootstrap-select2-ztree.zip

    Bootstrap、Select2 和 ZTree 是三个在Web开发中常用的库,它们分别提供了不同的功能,而将它们整合在一起可以实现更复杂的交互式用户界面。这里我们将深入探讨这些库以及如何将它们结合来创建一个下拉框带树结构的...

    jQuery EasyUI 常用UI组件.RAR

    - 组件通过JavaScript对象进行配置,可以设置各种属性,如宽度、高度、事件处理函数等。 - 使用`$(selector).easyui方法`来初始化和操作组件。 5. **数据绑定**: - 数据可以通过JSON格式动态加载到组件,如...

    大厂前端面试题-入门版

    CSS 垂直居中的常用方法包括使用 position 属性、flexbox 布局、grid 布局等。 10. 使用过的兼容浏览器样式: CSS 兼容浏览器样式可以使用浏览器前缀,例如 -webkit-、-moz-、-ms- 等,来实现样式的兼容性。 ...

    开课吧 vue面试题训练营

    Vue.js 是一款非常流行的前端JavaScript框架,由尤雨溪开发并维护,它的核心特性包括组件化、虚拟DOM、响应式数据绑定以及易于上手的API。"开课吧 vue面试题训练营"显然是一个专门为Vue.js学习者和求职者设计的资源...

    jquery-TreeTable树型结构 源码及示例

    在IT领域,jQuery TreeTable是一种常用的JavaScript库,用于将HTML表格转换为树形结构,以更直观地展示层次关系的数据。这个"jquery-TreeTable树型结构 源码及示例"压缩包包含了实现这一功能的核心源码和示例,帮助...

    jQuery插件zTree实现的多选树效果示例

    jQuery插件zTree是一款功能强大的树形控件插件,它主要用来在Web页面上构建树形结构,提供了丰富的API接口,可以实现节点的增删改查、搜索、拖拽等功能,其中也包括实现多选树效果。zTree插件不仅在操作上灵活多变,...

    RDF 使用帮助

    RDF 提供了一些常用的方法,这些方法主要位于 `Rdf.Common` 命名空间中,例如: - **createDocument(strData, isUrl)**:根据提供的字符串或 URL 创建 XML 文档。 - **GETNODE(OBJXML, NODEPATH, INDEX)**:从 XML ...

    jQuery EasyUI包

    它提供了各种组件和方法,如对话框(dialog)、面板(panel)、表单(form)等,以及数据绑定和事件处理机制,使得开发者能够方便地创建交互式用户界面。 2. **easyui.css**:这是一个CSS样式文件,包含了jQuery ...

    jquery.EasyUI-1.3中文版.rar

    《jQuery EasyUI 1.3中文版》是前端开发领域常用的一个框架的中文文档,它为开发者提供了便捷的方式来构建交互式、响应式的Web界面。EasyUI是基于jQuery库的插件集合,它简化了HTML UI组件的创建,使得开发者可以...

    EasyUI的说明文档

    这个“EasyUI的说明文档”涵盖了EasyUI的核心概念、使用方法和示例,帮助开发者快速理解和掌握这个框架。 一、EasyUI的组件体系 EasyUI包含了一系列的组件,如对话框(dialog)、表格(datagrid)、下拉菜单...

    APIS:Vuejs中的les Apis

    在"APIS: Vuejs中的Les Apis"这个主题中,我们主要讨论的是Vue.js开发过程中常用的一些API和工具,特别是与项目构建、开发环境配置以及生产部署相关的知识点。 1. **项目初始化**: - 使用`Vue CLI`(Vue.js的...

    query-zTree的基本用法(转载)

    zTree是一款基于jQuery的树形插件,广泛应用于网站的导航、目录展示、数据组织等场景。它以其强大的功能、灵活的配置和友好的API,深受开发者的喜爱。本文将深入探讨zTree的基本用法,帮助你快速上手。 ### 1. ...

    一些前端面试题.pdf

    事件代理是一种优化事件监听器的方法,通过在父元素上设置监听器而不是每个子元素上单独设置,减少了事件监听器的数量,从而提高性能。 ### 深拷贝与浅拷贝 **浅拷贝**:只复制对象的第一层属性,对于对象内的对象...

Global site tag (gtag.js) - Google Analytics