传统软件项目开发时，针对每个业务单据页面需要每控件一个一个的来设计，同时

需要在页面功能中对每个控件的属性进行判定处理，尤其是页面风格布 局样式需要

花去一大半的时间，并且后续要想修改也是非常麻烦繁琐，这样就导 致设计完成一

个功能页面需要很长时间。问题是正常情况下很多功能是非常通用 的，这就造成了

重复劳作；如何快速设计页面风格，如何快速的将常用功能集成 起来，供后续直接

调用使用，并且后续只要修改一个地方，凡是调用的地方就自动变更了，如何让设计

人员能通过可视化的简单配置或简单的JS 编写就能达到各种类型表单页面设计要求

如何提高开发效率，如何合理分配任务，如何快速维护响应...... 在这样的思路基础上，

结合软件项目开发经验，开发设计了可视化页面设计工具。通过页面设计能快速达到

以上效果，下面就来看看吧！

页面设计包含如下控件：

目录树 Tree 目录树 Tree 控件是将分层数据通过层次清晰的树形架构来显示出来；其属

性包含三部分：基本属性、控件样式、控件事件；目录树数据的加载采用通过数据集合

的方式来加载，当然也可以用户在自己的 JS 中自己定义数据来源来进行加载目录树；

一、基本属性

默认展开：定义目录树加载完数据后，展开子节点的模式；

选择按钮：设置目录树节点是否有选择按钮，一般用于目录树的选择；

数据集合：定义目录树的数据来源即绑定数据集合；

节点编码：定义目录树节点的编码所对应的字段（绑定字段）；即 Node 的 Code

节点标题：定义目录树节点的标题所对应的字段，一般是节点的显示标题；

所属上级：定义节点的上级编码字段；系统会自动根据上级来找下级；

排序字段：定义目录树节点数据的排序字段；

排序方法：定义排序字段的排序方法，通过此来获取有序的数据；

过滤条件：定义目录树数据的过滤条件，将不符合要求的剔除掉；

定位模式：表示控件在网页端的定位方式，一般使用绝对定位模式，但是系统也 支持相对定位

和静态模式；但是非绝对定位模式下，网页控件的布局 就会显得比较凌乱；所以一般建议使用

绝对定位模式；

是否隐藏：设置控件是否在网页上面显示；

宽度模式：设置控件的宽度是采用百分比还是绝对大小的方式；如果采用百分比 时；

控件的宽度计算方式为：当前控件的起点坐标与当前页面的宽度