工学1号馆

home

« | 返回首页 | »

jstree中获取选中结点的前驱节点与后继结点

By Wu Yudong on November 18, 2019

今天在jstree文档树中实现获取一个选中节点的前驱节点与后继结点,这个功能可以在服务端实现,通过ajax传到前端显示,也可以在前端使用js通过操作jstree的api进行操作,由于文档树是一个N叉树,所以在服务端实现的难度大,而使用jstree现有的api则可以相对简单的实现。

接下来先熟悉一下jstree的api操作文档:

本小结使用到的数据节点的结构大致如下:

root
├─1                 
├─2              id: 11
│  ├─21          id: 16
│       ├─211    id: 30
│       ├─212    id: 31
│  ├─22          
│  ├─ ...            
│  └─n         

1、node节点

首先看看json的树节点的数据组成:

{id: “16”, text: “21”, icon: false, parent: “11”, parents: Array(2), …}

    1. a_attr{href“/ebook/……./doc_id/16″id“16_anchor”}
    2. children(2) [“30”“31”]
    3. children_d(2) [“30”“31”]
    4. dataundefined
    5. iconfalse
    6. id16
    7. li_attr{id“16”}
    8. original{id“16”text“21”parent“11”position“0”a_attr{…}, …}
    9. parent11
    10. parents(2) [“11”“#”]
    11. state{loadedtrueopenedtrueselectedtruedisabledfalse}
    12. text21
    13. typedefault
    14. __proto__Object

可以通过node.id获取id值,node.children获取子节点数组,node.parent获取其直接父节点

node.a_attr.href获取节点对应的链接,node.parents获取的是对应的父亲祖先节点数组……

2、get_parent (obj)

获取节点的父节点的id。

参数/返回 描述
obj mixed
返回 String
res = $("#sidebar").jstree(true);
console.log(res.get_parent(node));

返回:11

3、get_node (obj [, as_dom])

根据输入(子 DOM 元素、ID字符串、选择器等)获取节点的 JSON 形式数据(或 扩展自 jQuery 的 DOM 节点)。

参数/返回 描述
obj mixed
as_dom Boolean
返回 Object jQuery
res = $("#sidebar").jstree(true);
console.log(res.get_node(11));

返回:id为11的node

4、get_path (obj [, glue, ids])

获取节点的路径。可能是

  • 一堆节点名称
  • 一堆节点ID
  • 一堆节点名和 ID(或数组)
参数/返回 描述
obj mixed 节点
glue String 若是字符串,则填间隔字符串(如/),若是一个假值,则返回数组
ids Boolean 若为true则用节点ID 构建路径,否则用节点名称
返回 mixed

这个可以逐个实践一下:

res = $("#sidebar").jstree(true);
console.log(res.get_path (selected.node, '/'));
console.log(res.get_path (selected.node, false));
console.log(res.get_path (selected.node, false, true));

你还可以类似的实践一下其他的api操作以达到熟练操作jstree的程度。


接下来实现本文标题所示的需求:

在选中一个节点的时候获取这个节点的前驱节点和后继结点

我这里就不多说废话,直接上我写的代码:

function next(node){
	res = $("#sidebar").jstree(true);
	parent_id = res.get_parent(node); //id
	parent_node = res.get_node(parent_id);
	grand_parent_id = res.get_parent(parent_node);
	grand_parent_node = res.get_node(grand_parent_id);
	if(grand_parent_id == '#') {
		if(grand_parent_node.children.length - 1 > parseInt(parent_node.original.position)){
			return grand_parent_node.children[parseInt(parent_node.original.position)+1];
		} else {
			return 0;
		}
	} else {
		if(grand_parent_node.children.length - 1 > parseInt(parent_node.original.position)){
			return grand_parent_node.children[parseInt(parent_node.original.position)+1];
		} else {
			return next(parent_node);
		}
	}
}


/**
 * 获取node节点的最后一个子节点
 */
function lastchild(node){
	if(node.children.length == 0) {
		return node.id;
	} else {
		return lastchild($("#sidebar").jstree(true).get_node(node.children[node.children.length-1]));
	}
}

/**
 * 找出指定节点的后继节点
 */
function next_node(node){
	res = $("#sidebar").jstree(true);
	if(res.is_parent(node)){
		return node.children[0];
	} else if((next_node_id = res.get_next_dom(node).context.id) != 'sidebar'){
		
		return next_node_id;
	} else {
		return next(node);
	}
}

/**
 * 找出指定节点的前驱节点
 */
function pre_node(node){
	if(node.parents[0] == '#' && node.original.position == 0){
		return 0;
	}
	if(node.original.position == 0) {
		return node.parents[0];
	} else {
		$pre_id = $("#sidebar").jstree(true).get_prev_dom(node).context.id;
		$pre_node = lastchild($("#sidebar").jstree(true).get_node($pre_id));
		return $pre_node;
	}
}

 

如果文章对您有帮助,欢迎点击下方按钮打赏作者

Comments

No comments yet.
To verify that you are human, please fill in "七"(required)