《QUI框架V2.2系列新特性介绍.docVIP

QUI框架V2.2系列是继V2.1.5之后，我历时半年时间开发的新版本。新的系列并不是对以往简单的升级，而是从各个方面都做了重大改进和完善。可以说，当看了这个2.2系列，你会发现以往的版本和它完全不在一个层次了。下面我就来展示一下2.2系列企业版的一些特性： 1、组件使用方式极大地简化和一致性 所有表单元素组件都可以通过一句话实现创建。无需任何JS代码（异步上传控件除外）。例如 （1）通过下面的一句话： 其中，url里的路径用于从远程获取JSON数据。这样即可创建一个单选下拉框。效果如图： （2）通过下面的一句话： 即可创建一个树形下拉框。效果如图： （3）通过下面一句话： 即可创建一个树形多选下拉框：效果如下 （4）通过下面一句话： 即可创建一个自动完成框，效果如下： （5）通过下面一句话： 即可创建一个双向选择器，效果如下： （6）通过下面一句话： 即可创建一个树形双选器，效果如下： （7）通过下面一句话： 即可创建一个分页组件，效果如下： 除外还有很多组件都是这种方式。在这里就不一一举例了。 2、组件全面支持JSON 框架的所有与数据有关的组件均支持JSON数据。 通过上面的代码也可以看出，组件可以通过一个url获取JSON数据，这样组件的数据项就构建出来了。 除了表单元素和树组件支持JSON数据外，新版本推出了新的数据表格组件：quiGrid。是一款基于JSON数据的异步ajax表格。将在后面介绍。 3、组件获取数据方式取多样化 所有与数据相关的组件都可以通过多种方式获取数据。以单选下拉框为例，有如下几种获取方式 （1）url方式。代码如下 （2）url属性+参数方式，代码如下： （3）赋值给标签的data属性。代码如下： （4）使用本地数据源动态设置data 在组件标签中不写任何数据源，代码如下： 然后再JS代码中定义本地数据并复制给该组件，代码如下： 通过代码动态把数据赋给组件的data。最后调用render()方法重新渲染。 这种方式的好处是在把数据赋给组件之前，还可进一步处理，适合某些特殊场合。 （5）使用远程数据源动态设置data 与上一个类似，这是通过ajax请求从远程获取数据并赋给组件。JS代码如下： 这几种方式殊途同归。最终效果如下： 4、新增很多重要的组件和功能 （1）quiGrid。这是一款基于JSON数据的ajax表格。有了它，可以进行页面无刷新的翻页。也彻底解决了之前table的表头固定的偏差问题。效果如下： 除此之外，它还拥有很多特性。下图是V2.2.0中关于quiGrid示例的截图： （2）表单异步提交。框架新增了表单异步提交和异步编辑机制，可以进行页面无刷新的提交表单。表单编辑时，组件赋值方式也有多种，可以将初始值使用strus标签方式写到标签中，还可以用JSON方式进行填充。例如你可以通过下面的JSON为表单各个元素赋值。 下图是V2.2.0中关于综合表单示例的截图： （3）条件过滤器。框架新增了一些常用的表单元素组件，例如如下的条件过滤器，能方便的进行条件的选择。支持单选和多选。 实现起来也非常简单，只需要下面一句话： （4）异步表单上传和上传文件列表。框架新增的异步上传组件和163邮箱的非常相似，可批量上传文件, 还可限制文件类型、大小。效果如下： 5、已有组件的功能扩展 （1）对原组件封装不完全的地方进行完善。 例如原来要设置双向选择器尺寸时，需要写CSS进行设置，现在只需要在标签中添加listerWidth和listerHeight属性即可。 例如原来要设置树形下拉框的选中项，需要既要对数据做设置，又要设置组件的标签。现在只要为标签增加selectedValue=xxx即可。 还有很多，这里就不一一举例了 （2）为组件添加新的特性。 例如通过为弹出窗口添加一个属性可以让他变换样式。例如添加Style:simple，则窗口风格变为简洁样式，效果如下： 改为Style:shadowTip，则风格变为一个有阴影的提示框，效果如下： （3）组件美化。 对原来不够美观的组件进行美化。例如软键盘： （4）对开发者的提示。 当某个组件需要单独引入脚本，而开发者没有引入时，当打开这个页面框架会发出提示，用于提醒开发者正确的使用。例如： 6、模拟组件的应用场景 为了让开发者能更灵活的使用组件，特别对某些组件制作了特别的示例，用于模拟组件的应用场景。例如对于弹出式菜单，正常原本的弹出菜单有以下几种样式： 为了模拟真实的使用场景，增加了仿人人网效果的示例 还增加了仿京东网选择所在地区的示例 对于