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

《QUI框架V2.2系列新特性介绍》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、QUI框架V2.2系列是继V2.1.5之后，我历时半年时间开发的新版本。新的系列并不是对以往简单的升级，而是从各个方面都做了重大改进和完善。可以说，当看了这个2.2系列，你会发现以往的版本和它完全不在一个层次了。下面我就来展示一下2.2系列企业版的一些特性：1、组件使用方式极大地简化和一致性所有表单元素组件都可以通过一句话实现创建。无需任何JS代码（异步上传控件除外）。例如（1）通过下面的一句话：其中，url里的路径用于从远程获取JSON数据。这样即可创建一个单选下拉框。效果如图：（2）通过下面的一句话：即可创建一个树形下拉框。效果如图：（3）通过下面一句话：即可

2、创建一个树形多选下拉框：效果如下（4）通过下面一句话：即可创建一个自动完成框，效果如下：（5）通过下面一句话：即可创建一个双向选择器，效果如下：（6）通过下面一句话：即可创建一个树形双选器，效果如下：（7）通过下面一句话：即可创建一个分页组件，效果如下：除外还有很多组件都是这种方式。在这里就不一一举例了。2、组件全面支持JSON框架的所有与数据有关的组件均支持JSON数据。通过上面的代码也可以看出，组件可以通过一个url获取JSON数据，这样组件的数据项就构建出来了。除了表单元素和树组件支持JSON数据外，新版本推出了新的数据表格组件：quiGrid。是一款基于J

3、SON数据的异步ajax表格。将在后面介绍。3、组件获取数据方式取多样化所有与数据相关的组件都可以通过多种方式获取数据。以单选下拉框为例，有如下几种获取方式（1）url方式。代码如下（2）url属性+参数方式，代码如下：（3）赋值给标签的data属性。代码如下：（4）使用本地数据源动态设置data在组件标签中不写任何数据源，代码如下：然后再JS代码中定义本地数据并复制给该组件，代码如下：通过代码动态把数据赋给组件的data。最后调用render()方法重新渲染。这种方式的好处是在把数据赋给组件之前，还可进一步处理，适合某些特殊场合。（5）使用远程数据源动态设置da

4、ta与上一个类似，这是通过ajax请求从远程获取数据并赋给组件。JS代码如下：这几种方式殊途同归。最终效果如下：4、新增很多重要的组件和功能（1）quiGrid。这是一款基于JSON数据的ajax表格。有了它，可以进行页面无刷新的翻页。也彻底解决了之前table的表头固定的偏差问题。效果如下：除此之外，它还拥有很多特性。下图是V2.2.0中关于quiGrid示例的截图：（2）表单异步提交。框架新增了表单异步提交和异步编辑机制，可以进行页面无刷新的提交表单。表单编辑时，组件赋值方式也有多种，可以将初始值使用strus标签方式写到标签中，还可以用JSON方式进行填充。

5、例如你可以通过下面的JSON为表单各个元素赋值。下图是V2.2.0中关于综合表单示例的截图：（3）条件过滤器。框架新增了一些常用的表单元素组件，例如如下的条件过滤器，能方便的进行条件的选择。支持单选和多选。实现起来也非常简单，只需要下面一句话：（4）异步表单上传和上传文件列表。框架新增的异步上传组件和163邮箱的非常相似，可批量上传文件,还可限制文件类型、大小。效果如下：5、已有组件的功能扩展（1）对原组件封装不完全的地方进行完善。例如原来要设置双向选择器尺寸时，需要写CSS进行设置，现在只需要在标签中添加listerWidth和listerHeight属性即可。

6、例如原来要设置树形下拉框的选中项，需要既要对数据做设置，又要设置组件的标签。现在只要为标签增加selectedValue=xxx即可。还有很多，这里就不一一举例了（2）为组件添加新的特性。例如通过为弹出窗口添加一个属性可以让他变换样式。例如添加Style:"simple"，则窗口风格变为简洁样式，效果如下：改为Style:"shadowTip"，则风格变为一个有阴影的提示框，效果如下：（3）组件美化。对原来不够美观的组件进行美化。例如软键盘：（4）对开发者的提示。当某个组件需要单独引入脚本，而开发者没有引入时，当打开这个页面框架会发出提示，用于提醒开发者正确的使用

7、。例如：6、模拟组件的应用场景为了让开发者能更灵活的使用组件，特别对某些组件制作了特别的示例，用于模拟组件的应用场景。例如对于弹出式菜单，正常原本的弹出菜单有以下几种样式：为了模拟真实的使用场景，增加了仿人人网效果的示例还增加了仿京东网选择所在地区的示例对于前面提到的条件过滤器，增加了仿天猫的商品筛选示例对于自动完成框，增加了仿163邮箱的邮件搜索示例7、组件bug修复通过改变组件的构建机制，彻底解决以往用户提到的一些bug。例如单选下拉框的文本框和按钮对不齐，含有图标的button组件在表单中会造成表单重复提交等问题。8、所有组件支持动态渲染创建，动态改变属性新

8、版本为每个