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方法。

 

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

posted @ 2012-02-09 11:18  Jolly-zhang  阅读(2071)  评论(0编辑  收藏  举报