ExtJS+SpringBoot实现读取后端数据的树

本文介绍了如何使用Spring Boot后端配合Ext JS前端来实现动态加载的树形数据展示。后端定义了Node模型,包含id、text、leaf和expanded属性。前端通过设置TreeStore的defaultRootId和defaultRootText展示数据,并在nodeexpand事件中实现节点展开时自动滚动到可视区域。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

关于Ext JS树的基本使用可以参考:[Ext JS] 3.3 树(Tree)的定义和使用,本篇示例主要介绍基于Spring Boot使用后端数据的树, 以及展开某个节点, 以及定位节点。

后端定义

后端定义数据节点的模型类Node, 对应Ext JS 的 Ext.data.NodeInterface。 基本属性有4个:

  • id , 节点的唯一标识
  • text 节点显示
  • leaf 是否是页子节点, 也就是是否可以展下一级
  • expanded 是否展开
    定义如下:
/**  
* @Title: Node.java
* @Package com.osxm.springbootency.extjs
* @Description: TODO
* @author XM
* @date 2022年10月9日 下午9:50:03
* @Copyright: 2022
* @version V1.0  
*/
package com.osxm.springbootency.extjs;

public class Node {

	public Node(String id,String text) {
		this.id = id;
		this.text = text;
	}
	
	private String id;
	
	private String text;
	
	private boolean leaf;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

oscar999

送以玫瑰,手留余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值