DWZ富客户端框架应用，以及改良（一）

如果你还不知道DWZ是什么，请先看http://j-ui.com/

 

下面引用下作者的解释：

 

DWZ富客户端框架设计目标是简单实用、扩展方便灵活、快速开发、RIA思路、轻量级

设计思路

第一次打开页面时载入界面到客户端, 之后和服务器的交互只是数据交互, 不占用界面相关的网络流量.

支持HTML扩展方式来调用DWZ组件.

基于jQuery标准化Ajax开发, 降低Ajax开发成本.

学习DWZ的建议

• 通读DWZ文档，很多问题文档中都写了，初学者最好先读一遍文档。
• 看demo每个组件演示效果和代码（留意组件html结构）。
• 建议安装firebug，用firebug看html结构、CSS和调试JS都非常方便。见附录一 firebug介绍。
• 对于初学者不建议看DWZ全部源码，但还是非常有必要看看dwz.ui.js和dwz.ajax.js
• 可以从google code下载dwz_thinkphp版本或dwz4j(Java版本)，结合后台程序去理解DWZ和服务器端的交互方式

DWZ区别于其它JS框架，最大的优点

• 完全开源，源码没有做任何混淆处理，方便扩展
• CSS和js代码彻底分离，修改样式方便
• 简单实用，扩展方便，轻量级框架，快速开发
• 仍然保留了html的页面布局方式
• 支持HTML扩展方式调用UI组件，开发人员不需写js
• 只要懂html语法不需精通js，就可以使用ajax开发后台
• 基于jQuery，UI组件以jQuery插件的形式发布，扩展方便

目前最新版本是：1.4.1

 

从使用几天的感觉看，该框架整体还是很不错的，基本能够满足后台管理平台。

 

但在使用中也发现一些问题：

1：第一次加载的时候有点慢，我觉得这个可以改良下，可以借鉴easyUi的思想，当需要用某个组件时，才加载对应那块的js代码（如果已经加载了，就不再加载）；

2：在IE8下DWZ提供的校验无效

3：个别组件还存在一些bug和需要改进

4：分页性能不是很好，非局部刷新，这个我觉得可以用jquery.flexigrid.js替换

5：。。。。。

 

以下介绍下使用心得：

 

首先说下如何解决，在IE8下DWZ提供的校验无效的问题：

首先用最新版的jquery.validate.js替换掉DWZ中的js，

然后修改jquery.validate.js中的中的validate方法，修改为以下内容，就可以解决问题
validate: function( options ) {

// if nothing is selected, return nothing; can't chain anyway
if (!this.length) {
options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
return;
}

// check if a validator for this form was already created
var validator = $.data(this[0], 'validator');
if ( validator ) {
return validator;
}

// Add novalidate tag if HTML5.
this.attr('novalidate', 'novalidate');

validator = new $.validator( options, this[0] );
$.data(this[0], 'validator', validator);

return validator;
}

 

navTab扩展两个方法：

/** add by jolly ----start--- **/
 switchTab:function(tabid){
     this._switchTab(this._indexTabId(tabid));
 },
 reflash:function(){
     var $tab = this._getTabs().eq(this._currentIndex);
     this._reload($tab,true);
 },
 /** add by jolly ---end---- **/

这两个方法都是比较有用的，第一个是根据tabid切换到指定的tab页。

第二个方法是刷新当前tab页。

 

改进dwz.ajax.js中navTabAjaxDone和dialogAjaxDone方法

在使用系统的时候经常会有一种场景，就是当你翻页到第n页的时候，要修改该页中的一条记录，修改完以后还是保存在该页，并且刷新了修改的内容。

具体见我写的第二篇文章：http://www.cnblogs.com/wliang22/archive/2012/02/13/2349268.html

 

如果你想改变原有框架的布局，请修改dwz.ui.js中的initLayout方法。

 

先写这些，以后慢慢更新~~~~

转载于:https://www.cnblogs.com/wliang22/archive/2012/02/09/2343667.html