可拖拽树形数据服务器端的一种实现

可拖拽树形数据服务器端的一种实现

介绍

树形结构的数据常用于部门管理等有层次结构的场景。目前对于树形结构的UI操作已经有相当多的库了,如ztreejsTree;一些出名的组件库也都内置的相应的组件,如element-ui。但就目前关于树拖拽操作的后台逻辑实现却少有人提及,特别是在像mysql这种关系型数据下的实现。正好公司前些日子需要这个功能,形成了一个实现方案,整理后放出。

观前提示

  • 非Java警告:案例使用kotlin+springboot写成
  • 非传统ORM警告:ORM框架选用ktorm。别问,问就是开心就好

不了解kotlin基本语法可能看着会有点恼火,毕竟它的糖实在是太多了。查询使用的语句比较简单,不了解ktorm,应该影响不大。

案例代码:gitee

业务需求

部分新用户一次性导入大量的部门信息,需要调整部门间层级关系。原有的编辑框操作繁琐也不直观,所以想能不能通过拖拽实现层级关系调整。

经过调查,用户导入的部门数量最大在四位数的量级,部门层级最多在5级之内。由于有权限的设定,所以也有查询某部门下所有子部门的需求。

总的来说,拖拽功能是较低频的操作,而查询某部门下所有子部门是高频操作。因此功能设计的总体目标也就出来:拖拽可以慢点,查询需要快

数据库设计

在关系型数据存储树形结构通常考虑四种方法:

  • 邻接表(Adjacency List):保存pId值
  • 路径枚举(Path Enumerations):记录此节点经过的路径
  • 嵌套表(Nested Sets):比较麻烦,记录左值、右值,计算方式有点麻烦
  • 闭包表(Closure Table):用另一张表辅助记录

此次采用前两方式混合。即

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue树形表格可拖拽是指用户可以通过拖动树形表格中的节点,改变节点的顺序或者将节点移动到其他位置。为了实现这种功能,我们可以使用Vue中的拖拽插件,例如`vue-draggable`或者`vuedraggable`。 使用拖拽插件的第一步是安装插件并将其导入到Vue项目中。然后,在需要应用拖拽功能的组件中,使用插件提供的指令将节点包裹起来。 接下来,我们需要为每个可拖拽的节点添加一个唯一的标识,例如节点的id或者其他属性。这样,在拖拽节点时,我们可以根据标识来确定拖动的节点是哪个。 实现拖拽功能的关键是绑定拖拽事件。我们可以使用插件提供的`@start`、`@end`和`@change`等事件来监听拖拽开始、结束以及拖拽中的操作。在拖拽开始时,我们可以获取拖动节点的信息并将其保存起来。在拖拽结束时,我们可以根据拖动的位置确定节点的新位置,并更新节点的顺序。 为了展示树形结构,通常会使用递归组件来渲染树形表格。在渲染节点的过程中,我们可以根据节点的层级和顺序来确定节点的缩进和位置。 除了拖拽节点,我们还可以实现节点的跨级拖动。这意味着用户可以将一个节点移动到另一个节点的子级或父级中。 实现Vue树形表格可拖拽需要一些基本的HTML、CSS和Vue知识,以及拖拽插件的使用。通过合理运用这些知识和技术,我们可以实现一个功能强大的、交互友好的Vue树形表格可拖拽组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值