给一个js tree的懒加载案例,以及后端java代码
时间: 2024-02-11 13:04:46 浏览: 22
好的,下面是一个简单的 js tree 懒加载案例,以及后端代码(使用 Java 实现):
前端代码:
```html
<div id="tree"></div>
<script>
$(function() {
$('#tree').jstree({
'core': {
'data': {
'url': '/get_nodes',
'data': function(node) {
return { 'id': node.id };
}
}
}
});
});
</script>
```
后端代码(使用 Spring Boot):
```java
import java.util.ArrayList;
import java.util.List;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class TreeController {
@GetMapping("/get_nodes")
public List<Node> getNodes(@RequestParam(required = false) String id) {
List<Node> nodes = new ArrayList<>();
if (id == null) {
// 根节点
Node rootNode = new Node();
rootNode.setId("1");
rootNode.setText("根节点");
rootNode.setChildren(true);
nodes.add(rootNode);
} else {
// 根据 id 查询子节点
List<Node> children = getChildren(id);
nodes.addAll(children);
}
return nodes;
}
private List<Node> getChildren(String parentId) {
// 根据 parentId 查询子节点,这里只是一个示例
List<Node> children = new ArrayList<>();
Node node1 = new Node();
node1.setId(parentId + "-1");
node1.setText("子节点1");
node1.setChildren(true);
children.add(node1);
Node node2 = new Node();
node2.setId(parentId + "-2");
node2.setText("子节点2");
node2.setChildren(false);
children.add(node2);
return children;
}
}
```
注意事项:
1. Node 类需要实现 Serializable 接口,以便在返回 JSON 数据时进行序列化。
2. 在返回的节点数据中,如果一个节点有子节点,需要设置 `children` 属性为 `true`,以告知 js tree 继续加载该节点的子节点。
3. 后端代码中的 `getChildren` 方法,需要根据实际的业务逻辑进行调整,这里只是一个示例。
4. 前端代码中的 `data` 属性,指定了获取节点数据的 URL(即 /get_nodes),以及传递给后端的参数(即当前节点的 ID)。