Wu Yudong's Blog

今天在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. data: undefined
5. icon: false
6. id: “16“
7. li_attr: {id: “16”}
8. original: {id: “16”, text: “21”, parent: “11”, position: “0”, a_attr: {…}, …}
9. parent: “11“
10. parents: (2) [“11”, “#”]
11. state: {loaded: true, opened: true, selected: true, disabled: false}
12. text: “21“
13. type: “default“
14. __proto__: Object

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

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

2、get_parent (obj)

获取节点的父节点的id。

res = $("#sidebar").jstree(true);
console.log(res.get_parent(node));

返回：11

3、get_node (obj [, as_dom])

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

res = $("#sidebar").jstree(true);
console.log(res.get_node(11));

返回：id为11的node

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

获取节点的路径。可能是

• 一堆节点名称
• 一堆节点ID
• 一堆节点名和 ID（或数组）

这个可以逐个实践一下：

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;
	}
}