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

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、模拟组件的应用场景为了让开发者能更灵活的使用组件，特别对某些组件制作了特别的示例，用于模拟组件的应用场景。例如对于弹出式菜单，正常原本的弹出菜单有以下几种样式：为了模拟真实的使用场景，增加了仿人人网效果的示例还增加了仿京东网选择所在地区的示例对于前面提到的条件过滤器，增加了仿天猫的商品筛选示例对于自动完成框，增加了仿163邮箱的邮件搜索示例7、组件bug修复通过改变组件的构建机制，彻底解决以往用户提到的一些bug。例如单选下拉框的文本框和按钮对不齐，含有图标的button组件在表单中会造成表单重复提交等问题。8、所有组件支持动态渲染创建，动态改变属性新版本为每个组件提供一个render()方法。有了它，你可以动态创建组件，也可以动态改变属性。做法就是动态创建dom节点或使用xx.attr()来改变节点属性（attr是jquery语法），最后对该组件调用render()方法。以树形下拉框为例，下面的代码用于创建：类似的做法也可以为下拉框动态改变属性。另外组件内部还集成了添加项、删除项等方法。例如下面代码：最后效果如下：9、更多的布局模板并模拟常用的情景模式新版本新增了“常用情景模板”模块，如果开发者遇到了相应的情景，直接拿过来即可使用。最大程度的提高开发效率。举例：（1）组织机构维护，效果如下：通过ajax方式添加组织结构的树节点。点击某个节点可以修改它的描述。如下（2）用户管理，效果如下：（3）系统资源分配，效果如下：选择用户时，如果用户量不大可以用树形下拉框，如果用户量很大，涉及分页，可以采用弹窗。弹窗页效果如下：（4）横纵向tab布局，效果如下：其余的模板就不再一一举例了。下图是V2.2.0中关于情景模板示例的截图：10、新增JAVA版和.NET版示例工程除了个人版和企业版外，V2.2系列还将推出JAVA示例工程版和.NET示例工程版。对于每一个与后台有交互的情况都会做出典型的示例，这些示例会是前后台整合最合理的做法。这样开发者在做与后台整合时就不必担心多走弯路了。此外这两个版本还会增加一些特有的功能，例如EXCEL导入导出、系统锁屏、动态换肤、AJAX验证等。将具有很高的代码参考价值和实用价值。11、更方便的皮肤维护策略和更多个性化皮肤原来的版本将组件的风格样式和页面框架的皮肤都放在一个CSS文件里。但如果两套不同风格的蓝色系框架都使用同一风格的蓝色组件时，CSS中有大量的代码是不需要改的。这样就容易产生CSS冗余而且不方便维护。因为当更改一个蓝色组件的样式时，所有用蓝色系的CSS都要改一遍。新版本改变原来的机制，将组件风格单独提出来。这样所有蓝色系框架都可以共用一套蓝色组件皮肤，而它们的主页框架和框架皮肤是独立的。这样维护起来就很方便了。另外原来是通过同一个主页来实现多种皮肤风格，因为主页结构已经固定了，所以皮肤设计受到局限。新版本每一种皮肤将对应一个主页，这样易于制作出更多个性化的皮肤风格。在新版本中，除了保留原来的皮肤，还会提供更多的个性化皮肤。敬请期待。12、更多的主页模式新版框架将会提供更多的主页模式，例如桌面模式，效果如下此模式还将集成一个即时通讯的界面。目前正在开发中。13、jquery类库版本升级到最新版QUI框架V2.2系列框架使用的jquery类库已经升级到目前最新的1.7.2，并且该类库名称改为jquery.js，名称中不包含版本号。这样以后再升级时，直接替换该文件即可，无需再改变每个页面引入的脚本名称。14、独立的使用文档新版本会推出一个独立的文档版的使用手册。这样对组件使用方法和API的解释将会更彻底。与范例结合使用将会取得更好的效果。15、视频教程推出新版本后，我计划录制一些视频教程，讲解如何部署框架、各个组件的使用方法及注意事项、演示如果使用框架快速搭建界面，如何结合第三方工具来节约自己的劳动力…等等。敬请期待。目前新版本的所有类库和示例都已做好，其余还剩下撰写使用文档、新皮肤制作、框架全面测试等工作。JAVA示例版和.NET示例版也正在开发中。预计8月中旬先推出企业版和JAVA示例版会，8月底推出.NET示例版和个人版。