SpringBoot+JPA+ElementUi 给级联选择器Cascader返回树形结构数据

本文介绍了一种将项目中的Cascader组件配置信息存入数据库的方法,并提供了从数据库读取配置信息的具体实现,包括数据库表设计、实体类定义、Repository接口、Service层及Controller层的代码示例。

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

如题,最近项目刚结束,来整理下,不喜勿碰,欢迎大神指教!!!

目前项目中的Cascader使用一般都是写js脚本,现在要求把信息配置在数据库中。直接上代码


信息配置表的设计:

DROP TABLE IF EXISTS `tree_node_configuration`;

CREATE TABLE `tree_node_configuration` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `tree_name` varchar(100) NOT NULL COMMENT '名称(标识一棵树)',
  `node_code` varchar(50) NOT NULL COMMENT '节点编码',
  `father_node_code` varchar(50) DEFAULT NULL COMMENT '父节点编码',
  `node_name` varchar(100) DEFAULT NULL COMMENT '节点名称',
  PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=37 DEFAULT CHARSET=utf8;

实体定义:

@Entity
@Table(name = "TREE_NODE_CONFIGURATION")
public class TreeNodeConfiguration implements java.io.Serializable {
    /** 版本号 */
    private static final long serialVersionUID = -5207289768631569866L;


    /**  */
    @Id
    @Column(name = "ID")
    @GeneratedValue
    private Long id;


    /** 名称(标识一棵树) */
    @Column(name = "TREE_NAME")
    private String treeName;


    /** 节点编码 */
    @Column(name = "NODE_CODE")
    private String nodeCode;


    /** 父节点编码 */
    @Column(name = "FATHER_NODE_CODE")
    private String fatherNodeCode;


    /** 节点名称 */
    @Column(name = "NODE_NAME")
    private String nodeName;
    
    @Transient

    private List<TreeNodeConfiguration> children;

   get/set省略,,,,



JPA获取数据:

public interface TreeNodeConfigurationRepository extends JpaRepository<TreeNodeConfiguration, Long>{


List<TreeNodeConfiguration> findByTreeName(String treeName);

TreeNodeConfiguration findByFatherNodeCodeIsNull();

TreeNodeConfiguration findByNodeCode(String nodeCode);

}

ServiceImpl:

public List<TreeNodeConfiguration> getTree(String treeName) {

return TreeNodeConfigurationRepository.findByTreeName(treeName);
}

controller的代码:

@RequestMapping(value = "/api/treeNodeConfiguration/tree",method = RequestMethod.GET)
public List<TreeNodeConfiguration> getTreeNodeConfiguration(){
List<TreeNodeConfiguration> tree = treeNodeConfigurationService.getTree("XXX");//XXX是树的名称
TreeNodeConfiguration root = treeNodeConfigurationService.getRoot();
TreeUtils.createTree(tree, root, "nodeCode", "fatherNodeCode", "children");//list->tree
List<TreeNodeConfiguration> returnList = new ArrayList<TreeNodeConfiguration>();
returnList.add(root);

return returnList;

        }

前端代码:

<el-cascader
    style="width:320px"
    :options="options"
    @change="handleChange"
    :props="props">
</el-cascader>
getTree(){
    let self = this;
    this.$axios.get('/api/treeNodeConfiguration/tree').then((res) => {
        this.options = res.data;
    })
}


这样给ElementUI传到前端的就是树形结构数据了,只不过是一次性加载的,数据量很大的时候性能肯定不好,ElementUI同样支持动态加载次级选项,有时间再研究偷笑


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值