CascadeView级联组件实现思路详解(分离思想和单链

本文介绍自己最近做省市级联的类似的级联功能的实现思路,为了尽可能地做到职责分离跟表现与行为分离,这个功能拆分成了2个组件并用到了单链表来实现关键的级联逻辑,下一段有演示效果的gif图。虽然这是个很常见的功能,但是本文的实现逻辑清晰,代码好理解,脱离了省市级联这样的语义,考虑了表现与行为的分离,希望本文的内容能够为你的工作带来一些参考的价值,欢迎阅读和指正。

Cascade 级联操作

CascadeType. PERSIST 级联持久化 ( 保存 ) 操作

CascadeType. MERGE 级联更新 ( 合并 ) 操作

CascadeType. REFRESH 级联刷新操作,只会查询获取操作

CascadeType. REMOVE 级联删除操作

CascadeType. ALL 级联以上全部操作

Fetch 抓取是否延迟加载,默认情况一的方为立即加载,多的一方为延迟加载

mappedBy 关系维护

mappedBy= "parentid" 表示在children 类中的 parentid 属性来维护关系,这个名称必须和children 类中的 parentid属性名称完全一致才行。

另外需要注意,parent类中的集合类型必须是List或者Set,不能设置为ArrayList,否则会报错

演示效果(代码下载,注:该效果需要http才能运行,另外效果中的数据是模拟数据,并不是后台真实返回的,所以看到的省市县的下拉数据都是一样的):

CascadeView级联组件实现思路详解(分离思想和单链

注:本文用到了前面几篇相关博客的技术实现,如果有需要的话可以点击下面的链接前去了解:

1)详解Javascript的继承实现:提供一个class.js,用来定义javascript的类和构建类的继承关系;

2)jquery技巧之让任何组件都支持类似DOM的事件管理:提供一个eventBase.js,用来给任意组件实例提供类似DOM的事件管理功能;

3)对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache:提供ajax.js和ajaxCache.js,简化jquery的ajax调用,以及对请求进行客户端的缓存代理。

下面先来详细了解下这个功能的要求。

1. 功能分析

以包含三个级联项的级联组件来说明这个功能:

1)每个级联项可能需要一个用作输入提示的option:

CascadeView级联组件实现思路详解(分离思想和单链

这种情况每个级联项的数据列表中都能选择一个空的option(就是输入提示的那个):

CascadeView级联组件实现思路详解(分离思想和单链

也可能不需要用作输入提示的option:

这种情况每个级联项的数据列表中只能选数据option,选不到空的option:

CascadeView级联组件实现思路详解(分离思想和单链

2)如果当前这个页面是从数据库中查询出来跟级联组件对应的字段有值,那么就把查询出来的值回显到级联组件上:

CascadeView级联组件实现思路详解(分离思想和单链

如果查询出来的对应字段没有值,那么就按第1)点需求描述的2种情况显示。

3)各个级联项在数据结构上构成单链表的关系,后一个级联项的数据列表,跟前一个级联项所选择的数据有关联的。

4)考虑到性能方面的问题,各个级联项的数据列表都采用ajax异步加载显示。

5)在级联组件初始化完成以后,自动加载第一个级联项的列表。

6)当前一个级联项发生改变时,清空后面所有直接或间接关联的级联项的数据列表,同时如果前一个级联项改变后的值不为空则自动加载跟它直接关联的下一个级联项的数据列表。清空级联项的数据列表时要注意:如果级联项需要显示输入提示的option,在清空的时候得保留该option。

7)要充分考虑性能问题,避免重复加载。

8)考虑到表单提交的问题,当级联组件任意级联项发生改变后,得把级联组件所选的值体现到一个隐藏的文本域内,方便把级联组件的值通过该文本域提交到后台。

功能大致如上。

2. 实现思路

1)数据结构

级联组件跟别的组件不太一样的是,它跟后台的数据有一些依赖,我考虑的比较好实现的数据结构是:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgyzsp.html