6、敏捷开发框架 树形页面模型开发 TreePage

经过前面的学习咱们应该熟练掌握了 

QueryPage  查询页面模型

EditPage 编辑页面模型

同时也掌握了，并非一个页面就只能是一个模型，能够是组合使用的状况

能够是 查询+编辑的组合    也开是  查询+查询的组合

 

难道咱们只有这两种页面模型吗？

今天咱们一块儿来学习咱们开发中遇到的第三种页面模型

树形结构页面开发模型 TreePage

 

找个你们都看到过的页面，直观的感觉一下

以下图：

其实这是一个组合的页面模型，左侧是树形结构，右面是一个编辑模型（EditPage）

 

好咱们先从最简单的开始入手

咱们要开发这样的画面

敏捷框架经过抽象总结，设计了类  TreePage来专门解决这种页面的开发。

代码怎么写

如上图：上面是视图部分

代码部分，就一行

 

继续增长代码：

咱们来实现对左侧树的 【所有展开】，【所有折叠】功能

 

 

下面开发：

你只要在页面中增长：以下的HTML便可

具体到里面某一个功能，那须要针对性的开发实现具体的功能

就好比说，我要实现调用后台API 对选择的 功能点进行重置顺序

   TreePage模型 提供了 getId方法 帮咱们自动获取到当前你右键选中的节点。

    这样在后续的开发中就很是方便了。

    例如上面的代码，得到 功能点ID 而后调用  functionResetSEQ  API 实现 顺序重置功能

 

=============================================================

到此结束，基本树形页面功能就开发的差很少了。是否是很简单。

 

开始实现：以下的画面

  

分析一下：左侧是树形页面，右侧是编辑画面模型

二者的联动，是点击左侧的某个节点，右侧加载，而后在右侧实现、新增、修改等功能

稍微复杂点就是，若是右侧有修改内容，左侧树要能马上看到效果。

代码如何实现：

 

 

 分析下上面的代码：

 咱们初始化了 treePage  和 EditPage 

 在TreePage的 options 里面设置了 onClick 回调函数

   page.keyValue=node.id

   page.load(   )              

      注意在里面咱们调用的是 load 是根据主键查询加载数据

      记得前面的编辑页面模型开发的时候 调用的是 tryLoad 

      为何要tryLoad(  ) 由于这个页面多是编辑、也多是新增 因此 tryLoad 但愿经过这样的解释加深记忆

  经过这两行代码，就实现右侧数据的展现。

    EditPage 同时咱们还注册了  loaded事件

    由于，默认右侧的 div是不显示，当点击了之后才能够显示出来

   

    默认是这样的

点击后

 

 

这样这个页面整体上就OK了。貌似没有遇到特殊的障碍。

那加大点难度

 

和上面的功能管理有啥差异呢,貌似就是在右侧多个

 列表页面模型

 这个列表模型 虽然没有查询条件 其实隐含了查询条件(  当前点击的组织结构 )

                      虽然没有查询按钮,其实它的查询触发点是 点击组织机构

 

那咱们看看代码的实现

视图开发,为了方便开发, 这里使用 第 五 课 讲的 组件 开发 方式 将 视图代码 单独文件存放.

如上:红色框线DOM 和蓝色框线 DOM  实现的效果

 

 

打开 EmployeeArea.html 看看

典型的 查询页面 DOM结构

Ｊｓ代码：

咱们实例化了一个  QueryPage  API是查询员工信息

配置了 editUrl  editTitle 为了完成[编辑]按钮的弹出

配置了 deleteApi,配合完成删除操做

 

 

   树控件 点击  加载 组织机构

 

 

组织机构加载完毕后, page.search

page

就是上面实例化的员工查询 QueryPage 

这样就将员工数据都查询出来了.

 

员工列表行上提供了三个操做按钮

行上按钮,前面有介绍过,这里拿这个真实的场景来介绍下如何控制按钮是否能够点击.

这个场景是,员工若是有分配用户才能点击[ 编辑用户 ]

【详细】按钮就是编辑员工信息 直接调用 page.edit(this) 就完成了，不用额外写代码

【删除】直接调用 page.delete(this)就完成了，不用额外写代码

 

  editUser 是打开员工对应的用户信息，这属于业务非标准功能，须要研发人员本身开发实现 

  看下代码怎么写

  

同样，经过 EciAction 动做模型，这个前面已经学习过，再次加深下映像，将来这个 page.Action无处不在

 

点击【编辑用户】实现的效果

 

==============================================================

至此，这个复杂页面开发整体也是开发完成了。

开发须要适时的总结

你们有没有发现，复杂的页面也是经过简单的部件组合而来的。

这样全部是事情就都变成简单是事情了。

 

要看透事物的本质，看透了，也就能抽象

也就是那几个抽象模型

 

抽象是为了提取共性，同时框架还要预留个性。

两者的完美结合，才能所向披靡，无所不能。