閱讀(27.2k) 書簽贊(0) 我要糾錯

DWZ富客戶端框架使用手冊

2018-11-14 15:32 更新

概述

DWZ富客戶端框架(jQuery RIA framework), 是中國人自己開發(fā)的基于jQuery實(shí)現(xiàn)的Ajax RIA開源框架.

DWZ富客戶端框架設(shè)計(jì)目標(biāo)是簡單實(shí)用、擴(kuò)展方便、快速開發(fā)、RIA思路、輕量級

DWZ框架支持用html擴(kuò)展的方式來代替javascript代碼, 只要懂html語法, 再參考DWZ使用手冊就可以做ajax開發(fā).

開發(fā)人員不寫javascript的情況下, 也能用ajax做項(xiàng)目和使用各種UI組件. 基本可以保證程序員不懂javascript,也能使用各種頁面組件和ajax技術(shù). 如果有特定需求也可以擴(kuò)展DWZ做定制化開發(fā).

做ajax項(xiàng)目時需要寫大量的javascript才能達(dá)到滿意的效果. 國內(nèi)很多程序員javascript不熟, 大大影響了開發(fā)速度. 使用DWZ框架自動邦定javascript效果. 不需要開發(fā)人員去關(guān)心javascript怎么寫, 只要寫標(biāo)準(zhǔn)html就可以了. DWZ簡單擴(kuò)展了html標(biāo)準(zhǔn), 給HTML定義了一些特別的class 和attribute. DWZ框架會找到當(dāng)前請求結(jié)果中的那些特別的class 和attribute, 并自動關(guān)聯(lián)上相應(yīng)的js處理事件和效果.

DWZ基于jQuery可以非常方便的定制特定需求的UI組件, 并以jQuery插件的形式發(fā)布出來. 如有需要也可做定制化開發(fā).

歡迎大家提出建議, 我們將在下一版本中進(jìn)一步調(diào)整和完善功能．

DWZ富客戶端框架是開源項(xiàng)目, 可以免費(fèi)獲取源碼. 希望有多的開發(fā)人員使用, 共同推進(jìn)國內(nèi)整體ajax開發(fā)水平.

在線演示地址 http://j-ui.com/

在線文檔http://j-ui.com/doc/dwz-user-guide.pdf

Code下載: https://code.csdn.net/dwzteam/

設(shè)計(jì)思路

第一次打開頁面時載入界面到客戶端,之后和服務(wù)器的交互只是數(shù)據(jù)交互,不占用界面相關(guān)的網(wǎng)絡(luò)流量.

支持HTML擴(kuò)展方式來調(diào)用DWZ組件.

標(biāo)準(zhǔn)化Ajax開發(fā), 降低Ajax開發(fā)成本.

學(xué)習(xí)DWZ的建議

剛接觸DWZ的人可能感覺DWZ文檔太少、入門困難，原因都是沒有掌握正確的學(xué)方法。建議按下面的步驟來學(xué)習(xí)DWZ框架：

· 通讀DWZ文檔，很多新手提的問題文檔中都寫了。

· 看demo每個組件演示效果和代碼（留意組件html結(jié)構(gòu)）。

· 建議安裝firebug，用firebug看html結(jié)構(gòu)、CSS和調(diào)試JS都非常方便。見附錄一 firebug介紹。

· 對于初學(xué)者不建議看DWZ全部源碼，但還是非常有必要看看dwz.ui.js和dwz.ajax.js

· 可以從google code下載dwz_thinkphp版本，結(jié)合php后臺去理解DWZ和服務(wù)器端的交互方式

DWZ區(qū)別于其它JS框架，最大的優(yōu)點(diǎn)

· 完全開源，源碼沒有做任何混淆處理，方便擴(kuò)展

· CSS和js代碼徹底分離，修改樣式方便

· 簡單實(shí)用，擴(kuò)展方便，輕量級框架，快速開發(fā)

· 仍然保留了html的頁面布局方式

· 支持HTML擴(kuò)展方式調(diào)用UI組件，開發(fā)人員不需寫js

· 只要懂html語法不需精通js，就可以使用ajax開發(fā)后臺

· 基于jQuery，UI組件以jQuery插件的形式發(fā)布，擴(kuò)展方便

版權(quán)聲明

· DWZ框架的源代碼完全開放，在Apache License 2.0許可下, 可免費(fèi)應(yīng)用于個人或商業(yè)目的。

· 歡迎各大網(wǎng)站轉(zhuǎn)載下載版本。

· 禁止把DWZ框架包裝成另外一個UI框架出售。

DWZ團(tuán)隊(duì)介紹

DWZ團(tuán)隊(duì)核心成員目前是3人（杜權(quán)、吳平、張慧華）

杜權(quán)從事UI設(shè)計(jì)工作，有10年以上UI設(shè)計(jì)經(jīng)驗(yàn)。做過至少1500個網(wǎng)站的UI設(shè)計(jì)。

吳平主要做Java web開發(fā)，兼ajax開發(fā)。一直從事電子商務(wù)、企業(yè)建站平臺開發(fā)工作。目前就職于支付寶應(yīng)用架構(gòu)師職位。

張慧華主要做Java web開發(fā)，兼ajax開發(fā)。以前也是電子商務(wù)、企業(yè)建站平臺開發(fā)工作。從2009年4月開始從事建筑能效評估IT解決方案。目前從Java開發(fā)轉(zhuǎn)型做HTML5手機(jī)APP。

以前我們做的大部份java項(xiàng)目都用了Ajax，項(xiàng)目開發(fā)過程中經(jīng)常自己做一些UI組件和界面效果。我們對RIA非常感興趣，業(yè)余時間就做了DWZ富客戶端框架。DWZ框架中的UI組件都是從我們做過的大量web項(xiàng)目中總結(jié)出來的，都是一些非常實(shí)用的UI組件。

官方微博(歡迎加入) http://weibo.com/dwzui

合作電話：010-52897073 18600055221

技術(shù)服務(wù)：0571-88517625 17767167745

HTML擴(kuò)展

支持HTML擴(kuò)展方式來調(diào)用DWZ組件

Ajax鏈接擴(kuò)展

示例: <ahref="w_alert.html" target="ajax" rel="container">提示窗口</a>

當(dāng)前navTab中鏈接ajax post擴(kuò)展

或

Title為可選項(xiàng)，如果設(shè)置，點(diǎn)擊后將調(diào)用alertMsg.confirm與用戶交互確認(rèn)或取消，Title值為提示信息.Target值為ajaxTodo時會自動關(guān)聯(lián)如下JS。

$("a[target=ajaxTodo]", $p).each(function(){

$(this).click(function(event){

var $this = $(this);

var title = $this.attr("title");

if (title) {

alertMsg.confirm(title, {

okCall: function(){

ajaxTodo($this.attr("href"));

}

});

} else {

ajaxTodo($this.attr("href"));

}

event.preventDefault();

});

dialog鏈接擴(kuò)展

A所指向頁面將會在dialog 彈出層中打開，rel標(biāo)識此彈出層的ID，rel為可選項(xiàng)。

Html標(biāo)簽擴(kuò)展方式示例:

或

<a href="demo_page1.html"target="dialog" [max=true, mask=true, maxable=true,minable=true, resizable=true,drawable=true] rel="dlg_page1"title="[自定義標(biāo)題]" width="800" height="480">打開窗口一</a>

Max 屬性表示此dialog打開時默認(rèn)最大化, mask表示打開層后將背景遮蓋. maxable: dialog 是否可最大化，

minable: dialog 是否可最小化，

maxable: dialog 是否可最大化

resizable: dialog 是否可變大小

drawable: dialog 是否可拖動

width: dialog 打開時的默認(rèn)寬度

height: dialog 打開時默認(rèn)的高度

width,height分別打開dialog時的寬度與高度．

fresh: 重復(fù)打開dialog時是否重新載入數(shù)據(jù)，默認(rèn)值true,

close: 關(guān)閉dialog時的監(jiān)聽函數(shù)，需要有boolean類型的返回值，

param: close監(jiān)聽函數(shù)的參數(shù)列表，以json格式表示，例{msg:’message’}

關(guān)閉窗口：

在彈出窗口頁面內(nèi)放置<button class="close" value="關(guān)閉"></button>即可。

JS調(diào)用方式示例:

$.pdialog.open(url, dlgId, title);

或

$.pdialog.open(url, dlgId, title, options);　

options:{width:100px,height:100px,max:true,mask:true,mixable:true,minable:true,resizable:true,drawable:true,fresh:true,close:”function”,param:”{msg:’message’}”}, 所有參數(shù)都是可選項(xiàng)。

關(guān)閉dialog層：

$.pdialog.close(dialog); 參數(shù)dialog可以是彈出層jQuery對象或者是打開dialog層時的dlgId.

或者

$.pdialog.closeCurrent(); 關(guān)閉當(dāng)前活動層。

$.pdialog.reload(url, {data:{}, dialogId:"",callback:null})

刷新dialogId指定的dialog，url：刷新時可重新指定加載數(shù)據(jù)的url, data：為加載數(shù)據(jù)時所需的參數(shù)。

navTab鏈接擴(kuò)展

示例:

<a href="url" target="navTab" rel="page1" title="自定義標(biāo)簽名" fresh="false">自定義頁面</a>

<a href="url" target="navTab" external="true">iframe方式打開</a>

target=navTab: 自動關(guān)聯(lián)調(diào)用navTab組件

rel: 為navtab的ID值，后續(xù)可以用來重載該頁面時使用，如當(dāng)前頁新增或刪除數(shù)據(jù)可以通過該ID進(jìn)行通知JS重載。注意rel的值區(qū)分大小寫.

fresh: 表示重復(fù)打開navTab時是否重新加載數(shù)據(jù)

external: 為external="true"或者h(yuǎn)ref是外網(wǎng)連接時，以iframe方式打開navTab頁面

Js調(diào)用

navTab.openTab(tabid, url, { title:”New Tab”, fresh:false, data:{} });

其中data:{} json格式的數(shù)據(jù)

Tab組件擴(kuò)展

開發(fā)人員不需寫任何javacsript,只要使用下面的html結(jié)構(gòu)就可以.

<ul>

</ul>

</div>

</div>

</div>

Accordion組件

</div>

內(nèi)容1

</div>

</div>

內(nèi)容2

</div>

</div>

內(nèi)容3

</div>

容器高度自適應(yīng)

容器高度自適應(yīng), 只要增加擴(kuò)展屬性layoutH=”xx”, 單位是像素.

LayoutH表示容器內(nèi)工具欄高度. 瀏覽器窗口大小改變時容器高度自適應(yīng), 但容器內(nèi)工具欄高度是固定的, 需要告訴js工具欄高度來計(jì)算出內(nèi)容的高度.

示例:

</div>

注意： layoutH=“150”的高度是根據(jù)含有class=”layoutBox”的父容器div動態(tài)更新的

CSS Table

原生html + CSS實(shí)現(xiàn)，無js處理效果、最簡單、最基本、性能最高的table。

在table標(biāo)簽上增加class="list", table外面包一個<div layoutH="xx">實(shí)現(xiàn)table固定高度

<thead>

<tr>

</tr>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>北京市政府咿呀喲</td>

</tr>

</tbody>

</table>

</div>

Table擴(kuò)展

在table標(biāo)簽上增加class="table"

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>北京市政府</td>

</tr>

</tbody>

</table>

在線編輯器

在textarea標(biāo)簽上增加class="editor"

示例:

分頁組件

分頁思路服務(wù)器返回當(dāng)前頁的數(shù)據(jù)，總條數(shù)，再由js來生成分頁標(biāo)簽。分頁是配合服務(wù)器端來處理的, 不是存js做的分頁。

因?yàn)槿绻麛?shù)據(jù)量很大，比如有好幾百頁，存js分頁就是悲劇了，存js分頁是必須一次載入所有數(shù)據(jù)，性能很慢。

分頁組件參數(shù)要由服務(wù)器傳過來targetType，totalCount，numPerPage，pageNumShown，currentPage

框架會自動把下面的form中pageNum修改后，ajax重新發(fā)請求。下面這個form是用來存查詢條件的

<!--【可選】其它查詢條件，業(yè)務(wù)有關(guān)，有什么查詢條件就加什么參數(shù)。

也可以在searchForm上設(shè)置屬性rel=”pagerForm”，js框架會自動把searchForm搜索條件復(fù)制到pagerForm中-->

……

</form>

分頁組件處理分頁流程：

1) pagerForm中緩存了當(dāng)前的查詢條件，加上一個pageNum字段

2) 點(diǎn)擊分頁時動態(tài)修改pageNum,重新提交pagerForm

分頁組件使用方法：

<divclass="pagination" targetType="navTab"totalCount="200" numPerPage="20"pageNumShown="10" currentPage="1"></div>

測試方法，currentPage從1改為2，就是第2頁了，把上面那句改為：

<divclass="pagination" targetType="navTab"totalCount="200" numPerPage="20"pageNumShown="10" currentPage="2"></div>

參數(shù)說明:

targetType: navTab或dialog，用來標(biāo)記是navTab上的分頁還是dialog上的分頁

totalCount: 總條數(shù)

numPerPage: 每頁顯示多少條

pageNumShown: 頁標(biāo)數(shù)字多少個

currentPage: 當(dāng)前是第幾頁

注意：

服務(wù)器端返回一個頁面碎片，其中包括pagerForm, table, 和分頁的div。只要把這個頁面碎片組裝好就行。

ajaxTodo擴(kuò)展

navTab頁面上a鏈接添加target="ajaxTodo" 后框架會自動綁定相應(yīng)的ajax處理。【參考dwz.ajax.js】

可選a鏈接擴(kuò)展屬性[title="xxx"] 提示確認(rèn)信息

示例：

框架自動綁定js

$("a[target=ajaxTodo]", $p).each(function(){

$(this).click(function(event){

ajaxTodo($(this).attr("href"));

event.preventDefault();

});

dwzExport列表數(shù)據(jù)導(dǎo)出

鏈接添加target="dwzExport" 后框架會自動綁定相應(yīng)的ajax處理。

targetType="navTab" 根據(jù)當(dāng)期navTab頁面中的pagerForm參數(shù)導(dǎo)出, 默認(rèn)

targetType="dialog" 根據(jù)當(dāng)期dialog頁面中的pagerForm參數(shù)導(dǎo)出

title="實(shí)要導(dǎo)出這些記錄嗎?" 確認(rèn)提示信息，可選項(xiàng)
示例：

<a href="doc/dwz-team.xls" target="dwzExport"targetType="dialog" title="實(shí)要導(dǎo)出這些記錄嗎?">導(dǎo)出EXCEL</a>

Input alt擴(kuò)展

示例：

Tree擴(kuò)展

<li><a href="#" target="navTab" rel="main" tname="name" tvalue="value" checked="true">第一級菜單項(xiàng) A</a>

<ul>

<li><a href="#" target="dialog" rel="dialog1" tname="name" tvalue="value" checked="true">第二級菜單項(xiàng) A </a></li>

<li><a href="#">第二級菜單項(xiàng) B </a></li>

<li><a href="#">第二級菜單項(xiàng) C </a>

<ul>

<li><a href="#">第三級菜單項(xiàng) A </a></li>

<li><a href="#">第三級菜單項(xiàng) B </a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">第一級菜單項(xiàng) B</a></li>

</ul>

樹結(jié)構(gòu)是按<ul>,<li>的嵌套格式構(gòu)成，將最頂級的<ul>以class=”tree”標(biāo)識即可。treeFolder, treeCheck, expand|collapse則為可選的。

treeFolder:在所有樹節(jié)點(diǎn)前加上Icon圖標(biāo)

treeCheck:在所有樹節(jié)點(diǎn)前加上checkbox，此時需要在<a> 加上三個擴(kuò)展屬性tname=””, tvalue=””, checked, 其中tname與tvalue對應(yīng)該checkbox的name 與value屬性

checked表示checkbox的默認(rèn)狀態(tài)是否checked.

expand與collapse：expand表示樹的所有第一級節(jié)點(diǎn)默認(rèn)是展開狀態(tài)，collapse則表示所有第一級節(jié)點(diǎn)默認(rèn)為折疊狀態(tài)，當(dāng)expand與collapse都沒有時默認(rèn)則會展開第一個節(jié)點(diǎn)。

擴(kuò)展屬性oncheck是自定義函數(shù), 用來接收點(diǎn)擊checkbox時返回值, 當(dāng)點(diǎn)擊非子樹節(jié)點(diǎn)checkbox時返回?cái)?shù)據(jù)格式為:{checked:true|false,items:{name:name, value:value}}, 當(dāng)點(diǎn)擊了樹節(jié)點(diǎn)checkbox時, 此子樹節(jié)點(diǎn)下所有的checkbox都將選中, 同時返回此子樹節(jié)點(diǎn)下所有的checkbox的值, 格式為{checked:true|false,items:{{name:name, value:value}, {name:name, value:value}……}}

Panel擴(kuò)展

<divclass="panel [close collapse]" [defH="200"|minH=”100”]>

<div>

內(nèi)容

</div>

頂層div 以class=”panel”標(biāo)識即可, 其中的<h1>為panel的標(biāo)題, <h1>后的<div>則是放置內(nèi)容的容器.

Class 中的close 與collapse為可選項(xiàng), close表示panel默認(rèn)為關(guān)閉狀態(tài), 沒有則默認(rèn)為打開狀態(tài).collapse 再表示此panel是否為可折疊的panel, 沒有則此panel不可折疊. 擴(kuò)展屬性defH則表示panel 內(nèi)容部分的固定高度, 沒有則panel內(nèi)容部分的高度為實(shí)際內(nèi)容的高度, minH可以指定panel內(nèi)容部分的最小高度.

日歷控件

日期格式：

* Field | Full Form | Short Form

* -------------+--------------------+-----------------------

* Year | yyyy (4 digits) | yy (2 digits), y (2 or 4 digits)

* Month | MMM (name or abbr.)| MM (2 digits), M (1 or 2 digits)

* | NNN(abbr.) |

* Day of Month | dd (2 digits) | d (1 or 2 digits)

* Day of Week | EE (name) | E (abbr)

* Hour (1-12) | hh (2 digits) | h (1 or 2 digits)

* Hour (0-23) | HH (2 digits) | H (1 or 2 digits)

* Hour (0-11) | KK (2 digits) | K (1 or 2 digits)

* Hour (1-24) | kk (2 digits) | k (1 or 2 digits)

* Minute | mm (2 digits) | m(1 or 2 digits)

* Second | ss (2 digits) | s(1 or 2 digits)

* AM/PM | a |

定義日期范圍屬性minDate,maxDate靜態(tài)格式y(tǒng)-M-d或y-M或y，支持以下幾種寫法:

minDate="2000-01-15"maxDate="2012-12-15"

minDate="2000-01"maxDate="2012-12"

minDate="2000"maxDate="2012"

定義日期范圍屬性minDate,maxDate動態(tài)態(tài)格式%y-%M-%d或%y-%M或%y，支持以下幾種寫法:

minDate="{%y-10}-%M-%d"maxDate="{%y}-%M-{%d+1}"

minDate="{%y-10}-%M"maxDate="{%y+10}-%M"

minDate="{%y-10}"maxDate="{%y+10}"

示例：

<p>

</p>

<p>

<label>定義日期范圍：</label>

</p>

<p>

<label>自定義日期格式：</label>

</p>

<p>

<label>自定義日期格式：</label>

</p>

<p>

<label>動態(tài)參數(shù)minDate：</label>

</p>

<p>

<label>自定義日期格式：</label>

<span class="info">yyyyMMdd</span>

</p>

<p>

<label>自定義日期格式：</label>

<span class="info">yyyy年MM月dd日</span>

</p>

<p>

<label>自定義日期格式：</label>

<span class="info">y年M月d日</span>

</p>

<label>自定義日期格式：</label>

</div>

<label>自定義日期格式：</label>

</div>

<label>自定義日期格式：</label>

</div>

<label>自定義日期格式：</label>

<span class="info">y年M月d日 H點(diǎn)</span>

</div>

<label>自定義日期格式：</label>

</div>

<label>自定義只有時間：</label>

</div>

<label>自定義時間：</label>

</div>

url變量替換

HTML擴(kuò)展方式navTab, dialog, ajaxTodo 的url支持變量替換。例如：__URL__/edit/id/{xxx}

大括號內(nèi)的xxx就是變量名，主要功能是結(jié)合table組件一起使用，下面是dwz_thinkphp中用戶列表的示例：

下圖中的刪除、編輯、修改密碼都是用了url變量替換：

刪除、編輯、修改密碼使用了變量{sid_user}

當(dāng)選中一行時,tr上的rel值會自動替換到url變量中.

注意url變量名{sid_user}和tr的target="sid_user"保持一致.

代碼示例：

<aclass="delete" href="__URL__/foreverdelete/id/{sid_user}/navTabId/__MODULE__"target="ajaxTodo" title="你確定要刪除嗎？" warn="請選擇用戶"><span>刪除</span></a>

<aclass="edit" href="__URL__/edit/id/{sid_user}"target="dialog" mask="true"warn="請選擇用戶"><span>編輯</span></a>

<aclass="icon" href="__URL__/password/id/{sid_user}"target="dialog" mask="true"warn="請選擇用戶"><span>修改密碼</span></a>

<tableclass="list" width="100%"layoutH="116">

<thead>

<tr>

<th>Email</th>

</tr>

</thead>

<tbody>

<td>{$vo['account']}</td>

<td>{$vo['nickname']}</td>

<td>{$vo['email']}</td>

<td>{$vo['create_time']|date="Y-m-d",###}</td>

<td>{$vo['last_login_time']|date="Y-m-dH:i:s",###}</td>

<td>{$vo['login_count']}</td>

<td>{$vo['status']|showStatus=$vo['id']}</td>

</tr>

</volist>

</tbody>

</table>

checkbox全選、反選

checkbox全選、反選。（demo à 表單組件 à多選框/單選框）

<input type="checkbox"class="checkboxCtrl" group="c1" />全選

uploadify多文件上傳

<input id="testFileInput" type="file" name="image"

uploader="uploadify/scripts/uploadify.swf"

cancelImg="uploadify/cancel.png"

script="ajaxDone.html"

scriptData="{PHPSESSID:'xxx', ajax:1}"

folder="/folder"

fileQueue="fileQueue"

[onComplete="uploadifyComplete"]

[onAllComplete="uploadifyAllComplete"] />

參數(shù)說明：

uploader： flash組件uploadify.swf的訪問路徑

cancelImg:取消按鈕使用的圖片路徑

script: 服務(wù)器端處理上傳文件的路徑

scriptData:上傳文件時需要傳遞給服務(wù)器的其他參數(shù)，是json格式

folder: 是服務(wù)器存儲文件的目錄

fileQueue：是上傳進(jìn)度顯示區(qū)域

onAllComplete：可選參數(shù)，單個文件上傳完時觸發(fā)，參數(shù)有：

event： event 事件對象

Id：上傳進(jìn)度隊(duì)列的id

fileObj: 是一個包含上傳文件信息的對象，包括的信息有：

name: 文件名

filePath: 上傳文件在服務(wù)器端的路徑

size: 文件的大小

creationDate:文件創(chuàng)建的時間

modificationDate：文件最后更改的時間

type：是以"."開始的文件擴(kuò)展名

response:服務(wù)器端處理完上傳文件后返回的文本

data: 包含有兩個參數(shù)的對象，

fileCount:上傳隊(duì)列中還剩下的文件數(shù)

speed:以KB/s為單位的文件上傳平均速度

uploadifyAllComplete：可選參數(shù)，全部文件上傳完成時調(diào)用的函數(shù)，參數(shù)有：

event:event事件對象

data:是一個包含以下信息的對象,

filesUploaded: 已經(jīng)上傳的文件總數(shù)

errors: 上傳出錯的文件總數(shù)

allBytesLoaded：已經(jīng)上傳文件的總大小

speed: 以KB/s為單位的上傳文件的平均速度

以下3個方法是dwz.ajax.js中定義的用于文件上傳的會調(diào)函數(shù)：

function uploadifyAllComplete(event, data){

if (data.errors) {

var msg = "The totalnumber of files uploaded: "+data.filesUploaded+"\n"

+ "The totalnumber of errors while uploading: "+data.errors+"\n"

+ "The totalnumber of bytes uploaded: "+data.allBytesLoaded+"\n"

+ "The averagespeed of all uploaded files: "+data.speed;

alert("event:" +event + "\n" +msg);

}

function uploadifyComplete(event, queueId, fileObj, response, data){

DWZ.ajaxDone(DWZ.jsonEval(response));

}

function uploadifyError(event, queueId, fileObj, errorObj){

alert("event:" +event + "\nqueueId:" +queueId + "\nfileObj.name:"

+ fileObj.name + "\nerrorObj.type:"+ errorObj.type + "\nerrorObj.info:"+ errorObj.info);

}

combox組件

在傳統(tǒng)的select 用class 定義：class=”combox”, html 擴(kuò)展：保留原有屬性name, 增加了屬性：ref。

ref 屬性則是為了做級聯(lián)定義的，ref所指向的則是當(dāng)前combox值改變成引起聯(lián)動的下一級combox，ref用下一級combox的id屬性來賦值。

注意：一般combox沒必要設(shè)置id屬性，只要級聯(lián)時需要設(shè)置子級id等于父級ref，不同navTab和dialog中combox組件id必須唯一

以下是級聯(lián)示例：

</select>

</select>

</select>

服務(wù)器端返回json格式：

[

["all", "所有城市"],

["bj", "北京市"]

]

suggest+lookup+主從結(jié)構(gòu)

dwz.database.js主要功能是數(shù)據(jù)庫操作相關(guān)的界面組件。主要分為2部分，分別是查找?guī)Щ睾椭鲝慕Y(jié)構(gòu)。

· 查找?guī)Щ兀簂ookup、suggest、lookup附件(文件上傳帶回)、多選查找?guī)Щ豰ultLookup幾個jQuery插件，以及$.bringBack、$.bringBackSuggest兩個配套查找?guī)Щ毓ぞ叻椒?/p>

· 主從結(jié)構(gòu)：itemDetail

suggest+lookup+主從結(jié)構(gòu) 請參照demo：界面組件 à 常用組件 à suggest+lookup+主從結(jié)構(gòu)

查找?guī)Щ?/h3>
lookup、suggest都支持聯(lián)動效果，比如類似選省份、城市聯(lián)動效果。支持自定義查找?guī)Щ刂麈IlookupPk, 可選項(xiàng)默認(rèn)為id。

lookup 通過復(fù)選框選擇多個值查找回帶示例：
請參照dwz-ria中 demo/database/ db_widge.html和demo/database/dwzOrgLookup2.html頁面
<button type="button" multLookup="orgId" warn="請選擇部門">選擇帶回</button>

<input type="checkbox" name="orgId" value="{id:'1', orgName:'技術(shù)部', orgNum:'1001'}"/>
<input type="checkbox" name="orgId" value="{id:'2', orgName:'人事部', orgNum:'1002'}"/>
<input type="checkbox" name="orgId" value="{id:'3', orgName:'銷售部', orgNum:'1003'}"/>

主從結(jié)構(gòu)

針對主表和從表的數(shù)據(jù)庫結(jié)構(gòu)設(shè)計(jì)，實(shí)現(xiàn)主從結(jié)構(gòu)復(fù)合表單，動態(tài)添加、刪除從表字段。

請參照dwz-ria中 demo/database/ db_widge.html

<thead>

<tr>

<th type="date" format="yyyy-MM-dd HH:mm:ss" name="items.itemDataTime" size="16">從日期時間</th>

</tr>

</thead>

</table>

<table>標(biāo)簽中class=”itemDetail” 必須用于關(guān)聯(lián)主從結(jié)構(gòu)js效果。addButton=”xxx”可選默認(rèn)為”Add New”用來定義添加從表按鈕的文字。

<th>標(biāo)簽中：type必填項(xiàng)，type類型有text、date、lookup、enum、attach、del

name必填項(xiàng)，定義子表字段名稱

size可選項(xiàng)，默認(rèn)size=”12”，定義從表input字段的長度

fieldClass可選項(xiàng)，用來定義表input字段的class

lookupGroup當(dāng)type=”lookup” 或type=”attach”時必填

lookupUrl當(dāng)type=”lookup”時lookupUrl和suggesUrl至少填一項(xiàng)，當(dāng)type=”attach”時必填

suggestUrl當(dāng)type=”lookup”時lookupUrl和suggesUrl至少填一項(xiàng)

suggestFields當(dāng)type=”lookup”并且有suggestUrl時必填

enumUrl當(dāng)type=”enum”時必填

Ajax表單

Ajax表單相關(guān)的操作封裝在dwz.ajax.js中。表單查詢、分頁、表單提交js方法都已經(jīng)封裝在里面了。開發(fā)人員自己不需寫js，按標(biāo)準(zhǔn)使用就可以了。

表單查詢

DWZ中定義表單查詢和分頁都是用這個pagerForm來臨時存查詢條件。所以需要在查詢頁面上放下面的form

<formid="pagerForm" action="xxx" method="post">

</form>

ajax表單查詢

或

修改每頁顯示行數(shù)

</select>

/**

* 處理navTab彈出層上的查詢, 會重新載入當(dāng)前navTab

* @param{Object} form

function navTabSearch(form){

navTab.reload(form.action, $(form).serializeArray());

return false;

}

/**

* 處理dialog彈出層上的查詢, 會重新載入當(dāng)前dialog

* @param{Object} form

function dialogSearch(form){

$.pdialog.reload(form.action, $(form).serializeArray());

return false;

}

/**

* 處理navTab中的分頁和排序

* @paramargs {pageNum:"n",numPerPage:"n", orderField:"xxx"}

function navTabPageBreak(args){

var form = _getPagerForm(navTab.getCurrentPanel(), args);

if (form) navTab.reload(form.action, $(form).serializeArray());

}

/**

* 處理dialog中的分頁和排序

* @paramargs {pageNum:"n",numPerPage:"n", orderField:"xxx"}

function dialogPageBreak(args){

var form = _getPagerForm($.pdialog.getCurrent(), args);

if (form) $.pdialog.reload(form.action, $(form).serializeArray());

}

ajax表單查詢完整示例：

<c:forEach var="item" items="${model.resourceTypes}">

</c:forEach>

</select>

</div>

<ul>

</ul>

</div>

</form>

</div>

普通Ajax表單提交

DWZ框架Ajax無刷新表單提交處理流程是：

1. ajax表單提交給服務(wù)器

2. 服務(wù)器返回一個固定格式j(luò)son結(jié)構(gòu)

3. js會調(diào)函數(shù)根據(jù)這個json數(shù)據(jù)做相應(yīng)的處理

注意：

DWZ框架默認(rèn)的ajax表單提交都是返回json數(shù)據(jù)，告訴客戶端操作是否成功，成功或失敗提示信息，以及成功后的處理方式（刷新某個navTab或關(guān)閉某個navTab或navTab頁面跳轉(zhuǎn)）。

表單提交后服務(wù)器操作失敗了，客戶端接收statusCode和message后給出錯誤提示，表單頁面是不動的。這樣可以方便用戶看到出錯原因后直接修改表單數(shù)據(jù)再次提交，而不用重填整個表單數(shù)據(jù)。當(dāng)然如果你還是喜歡表單提交后直接載入html頁面也是沒有問題的，參照dwz.ajax.js自己擴(kuò)展一下也是沒問題的。

DWZ 表單提交dwz.ajax.js

· Ajax 表單提交后自動調(diào)用默認(rèn)回調(diào)函數(shù), 操作成功或失敗提示.

Form標(biāo)簽上增加onsubmit="return validateCallback(this);

· Ajax 表單提交后如果需要重新加載某個navTab或關(guān)閉dialog，可以使用dwz.ajax.js中事先定義的方法navTabAjaxDone/dialogAjaxDone

注意：如果表單在navTab頁面上使用navTabAjaxDone，表單在dialog頁面上使用dialogAjaxDone

Form標(biāo)簽上增加onsubmit="return validateCallback(this, navTabAjaxDone)"

或onsubmit="return validateCallback(this, dialogAjaxDone)"

· Ajax 表單提交后如果需要做一些其它處理也可以自定義一個回調(diào)函數(shù)xxxAjaxDone。例如下面表單提交成功后關(guān)閉當(dāng)前navTab, 或者重新載入某個tab.

Form標(biāo)簽上增加onsubmit="return validateCallback(this, xxxAjaxDone)"

服務(wù)器端響應(yīng)

Ajax表單提交后服務(wù)器端需要返回以下json代碼：

{

"statusCode":"200",

"message":"操作成功",

"navTabId":"",

"rel":"",

"callbackType":"closeCurrent",

"forwardUrl":""

}

以下是dwz.ajax.js中定義的navTabAjaxDone和dialogAjaxDone代碼片段：

/**

* navTabAjaxDone是DWZ框架中預(yù)定義的表單提交回調(diào)函數(shù)．

* 服務(wù)器轉(zhuǎn)回navTabId可以把那個navTab標(biāo)記為reloadFlag=1, 下次切換到那個navTab時會重新載入內(nèi)容.

* callbackType如果是closeCurrent就會關(guān)閉當(dāng)前tab

* 只有callbackType="forward"時需要forwardUrl值

* navTabAjaxDone這個回調(diào)函數(shù)基本可以通用了，如果還有特殊需要也可以自定義回調(diào)函數(shù).

* 如果表單提交只提示操作是否成功, 就可以不指定回調(diào)函數(shù). 框架會默認(rèn)調(diào)用DWZ.ajaxDone()

* <form action="/user.do?method=save" onsubmit="return validateCallback(this,navTabAjaxDone)">

* form提交后返回json數(shù)據(jù)結(jié)構(gòu)statusCode=DWZ.statusCode.ok表示操作成功, 做頁面跳轉(zhuǎn)等操作. statusCode=DWZ.statusCode.error表示操作失敗, 提示錯誤原因.

* statusCode=DWZ.statusCode.timeout表示session超時，下次點(diǎn)擊時跳轉(zhuǎn)到DWZ.loginUrl

* {"statusCode":"200","message":"操作成功","navTabId":"navNewsLi","forwardUrl":"","callbackType":"closeCurrent"}

* {"statusCode":"300","message":"操作失敗"}

* {"statusCode":"301","message":"會話超時"}

function navTabAjaxDone(json){

DWZ.ajaxDone(json);

if (json.statusCode == DWZ.statusCode.ok){

if (json.navTabId){ //把指定navTab頁面標(biāo)記為需要“重新載入”。注意navTabId不能是當(dāng)前navTab頁面的

navTab.reloadFlag(json.navTabId);

} else { //重新載入當(dāng)前navTab頁面

navTabPageBreak();

}

if ("closeCurrent" ==json.callbackType) {

setTimeout(function(){navTab.closeCurrentTab();}, 100);

} else if ("forward" ==json.callbackType) {

navTab.reload(json.forwardUrl);

}

/**

* dialog上的表單提交回調(diào)函數(shù)

* 服務(wù)器轉(zhuǎn)回navTabId，可以重新載入指定的navTab. statusCode=DWZ.statusCode.ok表示操作成功, 自動關(guān)閉當(dāng)前dialog

* form提交后返回json數(shù)據(jù)結(jié)構(gòu),json格式和navTabAjaxDone一致

function dialogAjaxDone(json){

DWZ.ajaxDone(json);

if (json.statusCode == DWZ.statusCode.ok){

if (json.navTabId){

navTab.reload(json.forwardUrl, {}, json.navTabId);

}

$.pdialog.closeCurrent();

}

示例:

<p>

</p>

<p>

</p>

</div>

<ul>

<li>

</li>

<li>

</li>

</ul>

</div>

</form>

文件上傳表單提交

因?yàn)锳jax不支持enctype="multipart/form-data" 所以用隱藏iframe來處理無刷新表單提交.

或

服務(wù)器端響應(yīng)

DWZ-v1.2版本開始服務(wù)器返回和validateCallback格式保持一致：

{

"statusCode":"200",

"message":"操作成功",

"navTabId":"",

"rel":"",

"callbackType":"closeCurrent",

"forwardUrl":""

}

DWZ-v1.2以前版本使用隱藏iframe來處理無刷新表單提交時，服務(wù)器端需要返回以下js代碼：

var statusCode="200";

var message="操作成功";

var navTabId="";

var forwardUrl="";

var callbackType="closeCurrent"

var response = {statusCode:statusCode,

message:message,

navTabId:navTabId,

forwardUrl:forwardUrl,

callbackType:callbackType

};

if(window.parent.donecallback) window.parent.donecallback(response);

</script>

Java服務(wù)器端表單處理示例

public class NewsAction extends BaseAction {

private NewsManager manager = bf.getManager(BeanManagerKey.newsManager);

private News news = manager.newNews();

private Collection<News> newsList;

public String add() {

return INPUT;

}

public String insert() {

manager.createNews(news);

return ajaxForwardSuccess(getText("msg.operation.success"));

}

public String edit() {

news = manager.getNews(this.getNewsId());

return INPUT;

}

public String update() {

News m = manager.getNews(newsId);

m.copyProperties(news);

manager.updateNews(m);

return ajaxForwardSuccess(getText("msg.operation.success"));

}

public String publish() {

manager.publishNews(newsId);

return ajaxForwardSuccess(getText("msg.operation.success"));

}

public String disable() {

manager.disableNews(newsId);

return ajaxForwardSuccess(getText("msg.operation.success"));

}

public String delete() {

manager.removeNews(newsId);

return ajaxForwardSuccess(getText("msg.operation.success"));

}

// BaseAction 代碼片段

public class BaseAction extends ActionSupport {

private int statusCode = 200;

private String message = null;

private String forwardUrl = null;

private String ajaxForward(int statusCode) {

this.statusCode = statusCode;

return OPERATION_DONE;

}

protectedString ajaxForwardSuccess(String message) {

this.message = message;

return ajaxForward(200);

}

protectedString ajaxForwardError(String message) {

this.message = message;

return ajaxForward(300);

}

public int getStatusCode() {

return statusCode;

}

public String getMessage() {

return message;

}

public String getForwardUrl() {

return forwardUrl;

}

public void setForwardUrl(String forwardUrl) {

this.forwardUrl = forwardUrl;

}

// 工具類判斷是否ajax請求

public class ServerInfo {

public static boolean isAjax(HttpServletRequest request) {

if (request != null

&& "XMLHttpRequest".equalsIgnoreCase(request

.getHeader("X-Requested-With")))

return true;

return false;

}

DWZ js庫介紹

DWZ框架初始化

在<head> 引入必要的js庫

DWZ框架初始化會自動讀取dwz.frag.xml中的頁面組件碎片代碼.

dwz.frag.xml中定義了一些dwz組件碎片和提示信息, 需要初始化到DWZ環(huán)境中.

注意dwz.frag.xml路徑問題.

假設(shè)dwz.frag.xml放在根目錄下, 在<head>標(biāo)簽中調(diào)用DWZ.init("dwz.frag.xml")

$(function(){

DWZ.init("dwz.frag.xml",{

loginUrl:"login.html",

callback:function(){

initEnv();

$("#themeList").theme({themeBase:"themes"});

}

});

</script>

dwz.core.js

DWZ核心庫主要功能是DWZ初始化, Javascript String增加了一些擴(kuò)展方法.

定義dwz ajax 加載擴(kuò)展loadUrl(url, data, callback)和ajaxUrl(options)

dwz.ui.js

頁面效果初始化，html擴(kuò)展綁定js效果

dwz.ajax.js

ajax表單提交封裝

dwz.alertMsg.js

? 確認(rèn)提示框

alertMsg.confirm("您修改的資料未保存，請選擇保存或取消！", {

okCall:function(){

$.post(url,{accountId: accountId}, DWZ.ajaxDone, "json");

}

});

? 成功提示框 alertMsg.correct('您的數(shù)據(jù)提交成功！')

? 錯誤提示框 alertMsg.error('您提交的數(shù)據(jù)有誤，請檢查后重新提交！')

? 警告提示框 alertMsg.warn('您提交的數(shù)據(jù)有誤，請檢查后重新提交！')

? 信息提示框 alertMsg.info('您提交的數(shù)據(jù)有誤，請檢查后重新提交！')

dwz.jDialog.js

彈出層組件庫

dwz.accordion.js

滑動面板組件庫

dwz.barDrag.js

DWZ左邊的活動面板

dwz.navTab.js

導(dǎo)航tab組件庫

navTab API

打開一個標(biāo)簽頁 navTab.openTab(tabid, title,url, [data])

重新載入標(biāo)簽頁，如果無tabid參數(shù)，就載入當(dāng)前標(biāo)簽頁navTab.reload(url,data, [tabid])

獲取當(dāng)前標(biāo)簽頁容器 navTab.getCurrentPanel()

關(guān)閉一個標(biāo)簽頁navTab.closeTab(tabid)

關(guān)閉當(dāng)前標(biāo)簽頁navTab.closeCurrentTab()

關(guān)閉全部標(biāo)簽頁navTab.closeAllTab()

dwz.scrollCenter.js

頁面容器自動居中組件

dwz.stable.js

table組件庫

dwz.cssTable.js

簡單table組件庫

dwz.tree.js

tree組件庫

dwz.theme.js

切換界面主題風(fēng)格

dwz.validate.method.js

這是jquery.validate.js表單驗(yàn)證擴(kuò)展方法

dwz.validate.zh.js

表單驗(yàn)證本地化

dwz.contextmenu.js

自定義鼠標(biāo)右鍵菜單, 先在dwz.frag.xml加入菜單項(xiàng)定義，下面是navTab和dialog兩個組件的菜單項(xiàng)定義：

<_PAGE_ id="navTabCM"><![CDATA[

<ulid="navTabCM">

</ul>

]]></_PAGE_>

<_PAGE_ id="dialogCM"><![CDATA[

<ulid="dialogCM">

<li rel="closeCurrent">關(guān)閉彈出窗口</li>

<li rel="closeOther">關(guān)閉其它彈出窗口</li>

<li rel="closeAll">關(guān)閉全部彈出窗口</li>

</ul>

]]></_PAGE_>

示例：

$("body").contextMenu('navTabCM', {

bindings:{

closeCurrent:function(t){

// TODO

closeOther:function(t){

// TODO

closeAll:function(t){

// TODO

}

ctrSub:function(t,m){

var mCur = m.find("[rel='closeCurrent']");

var mOther = m.find("[rel='closeOther']");

var mAll = m.find("[rel='closeAll']");

// TODO

}

});

dwz.pagination.js

分頁組件庫

<divclass="pagination" targetType="navTab"totalCount="200" numPerPage="20"pageNumShown="10" currentPage="1"></div>

開發(fā)人員只要用程序動態(tài)生成這個<div>,不用寫js, 框架自動綁定處理事件。

dwz.database.js

suggest自動完成的提示框組件

lookup查找?guī)Щ亟M件

itemDetail 主從結(jié)構(gòu)組件

selectedTodo批量選擇操作組件(批量刪除, 批量審核…)

dwz.datepicker.js

DWZ日歷控件庫

dwz.combox.js

combox下拉菜單組件，支持多級聯(lián)動

dwz.checkbox.js

checkbox全選、反選。（demo à 表單組件à多選框/單選框）

dwz.uitl.date.js

日期處理工具類

dwz. regional.zh.js

DWZ本地化

dwz.validate.method.js

jquery.validate.js 擴(kuò)展

class:

required <inputtype="text" name="name" class=”required”/>

email <input type="text" name="name" class=”email”/>

url <input type="text"name="name" class=”url”/>

date <input type="text"name="name" class=”date”/>

number <input type="text" name="name" class=”number”/>

digits <input type="text" name="name" class=”digits”/>

creditcard <input type="text" name="name" class=”creditcard”/>

attribute:

equalTo：selector <input type="text" name="name"equalTo="#name"/>

maxlength: <input type="text"name="name" maxlength="20"/>

minlength: <input type="text"name="name" minlength="2"/>

實(shí)現(xiàn)長度范圍時是同時寫上minlength 與 maxlength，此時的提示將是rangelength的提示。

max: <input type="text"name="name" max="2"/>

min: <input type="text"name="name" min="2"/>

實(shí)現(xiàn)值范圍時是同時寫上min與 max，此時提示將是range的提示。

提示內(nèi)容更改在文件dwz.regional.zh.js。

參考文檔 http://docs.jquery.com/Plugins/Validation

Javascript混淆和壓縮

Javascript混淆并用gzip壓縮后，可以把300K的js壓縮到40K左右．

DWZ混淆和壓縮方法：

1) 打開bin/gzjs.bat修改第一行路徑為本地文件系統(tǒng)絕對路徑

2) 執(zhí)行批處理文件bin/gzjs.bat

Javascript混淆

DWZ混淆工具 bin/ESC.wsf

壓縮級別分為5種，從0到4

Level 0 :: No compression

Level 1 :: Comment removal

Level 2 :: Whitespace removal

Level 3 :: Newline removal

Level 4 :: Variable substitution

在WINDOWS命令行下執(zhí)行

cscript ESC.wsf -ow menu2.jsmenu.js將會把menu.js按照js壓縮級別2來壓縮（默認(rèn)js壓縮級別為2）為menu2.js

cscript ESC.wsf -l 3 -owmenu3.js menu.js將會把menu.js按照js壓縮級別3來壓縮為menu3.js

需要注意的是，js壓縮級別4會把變量名修改，如果你的js中用到了全局變量或者類的話，就不能使用該壓縮級別了，否則其它使用你的js的文件可能會無法正常運(yùn)行。

Javascript 用gzip壓縮

動態(tài)的壓縮會導(dǎo)致服務(wù)器CPU占用率過高,現(xiàn)在我想到的解決辨法是通過提供靜態(tài)壓縮(就是將js預(yù)先通過gzip.exe壓縮好)

傳統(tǒng)的JS壓縮(刪除注釋,刪除多余空格等)提供的壓縮率有時還是不盡不意,幸虧現(xiàn)在的瀏覽器都支持壓縮傳輸(通過設(shè)置http header的Content-Encoding=gzip), 可以通過服務(wù)器的配置(如apache)為你的js提供壓縮傳輸．

Apache配制

在httpd.conf中加入配制，這樣瀏覽器可以自動解壓縮.gzjs

LoadModule mime_modulemodules/mod_mime.so

AddEncoding x-gzip .gzjs .gzcss

DWZ如何中使用打包的js

在index.html中移除全部dwz.*.js，引入下面2個js庫

dwz.*.js打包到dwz.min.js步驟：

1) 打開bin/gzjs.bat 修改第一行路徑為本地文件系統(tǒng)絕對路徑

2) 執(zhí)行批處理文件bin/gzjs.bat

使用時引入以下js：

javascripts/speedup.js 【可選】js加速

javascripts/jquery-1.4.4.js 【必須】jQuery庫

javascripts/jquery.cookie.js 【可選】js操作cookie, 目前用于記住用戶選擇的theme風(fēng)格

javascripts/jquery.validate.js 【必須】表單驗(yàn)證

javascripts/jquery.bgiframe.js 【可選】用于IE6彈出層不能蓋住select問題

xheditor/xheditor-zh-cn.min.js 【可選】xheditor在線編輯器

uploadify/scripts/swfobject.js 【可選】用于文件批量上傳

uploadify/scripts/jquery.uploadify.v2.1.0.js 【可選】用于文件批量上傳

bin/dwz.min.js 【必須】 DWZ框架js壓縮包

javascripts/dwz.regional.zh.js【可選】用于國際化

常見問題及解決

DWZ中如何整合第三方j(luò)Query插件

jQuery插件一般是$(document).ready()中初始化

$(document).ready(function(){

// 文檔就緒,初始化jQuery插件

});

//或者或縮寫形式

$(function(){

// 文檔就緒,初始化jQuery插件

});

因?yàn)镈WZ RIA是富客戶端思路，第一次打開時加載界面到瀏覽器端，之后和服務(wù)器的交互是存數(shù)據(jù)交互，不占用界面相關(guān)的網(wǎng)絡(luò)流量。

也就是說，只需要在一個完整的頁面（通常是起始頁，如index.aspx/index.php/index.jsp等），只有這個頁面包含完整的html結(jié)構(gòu)(<head><body>)，<head>中引入全部css、js 。其它的頁面只需要頁面碎片，就是<body></body>中的部分。

因?yàn)閍jax加載基本原理是：ajax加載一段html代碼片段放到當(dāng)前頁面的某個容器中（通常是一個div）。當(dāng)然也可以是xml結(jié)構(gòu)、json結(jié)構(gòu)，只是在插入到當(dāng)前頁面之前也要轉(zhuǎn)化成html代碼片段。如果你ajax加載一個完整的頁面(就是包括<head><body>標(biāo)簽的)，插入的當(dāng)前document就有問題了，因?yàn)橐粋€document不可能有多個<head><body>標(biāo)簽。

理解了富客戶端思路你也就明白了為什么DWZ框架中整合第三方j(luò)Query插件不能在<head>中通過$(document).ready()初始化。

DWZ1.5.2之后版本初始化第三方j(luò)Query插件方式：

V1.5.2版本調(diào)整DWZ插件注冊和初始化機(jī)制。方便DWZ和其它第三方j(luò)Query插件整合，不需要修改dwz.ui.js源碼，可以按照DWZ插件注冊機(jī)制引入外部js。建議把第三方j(luò)Query插件注冊相關(guān)代碼放到外部js文件中，方便以后DWZ版本升級。

第三方j(luò)Query插件注冊示例：

DWZ.regPlugins.push(function($p){

// $p 是作用域， jQuery選擇器從$p這個父容器中選擇，如果沒寫會引起第三方插件被重復(fù)初始化問題
$("img.lazy", $p).lazyload({effect : "fadeIn"});

// $("xxxSeletor", $p).xxxPlugin();

});

Error loading XML document:dwz.frag.xml

直接用IE打開index.html彈出一個對話框：Error loading XML document: dwz.frag.xml

原因：dwz.frag.xml是一個核心文件，需要加載才可以正常使用。IE ajax laod本地文件有限制, 是ie安全級別的問題, 不是框架的問題.

解決方法：放到apache或iis下就可以了. 如果不想安裝apache或iis用firefox打開就正常了。

IIS不能用Ajax訪問*.html后綴的頁面

Ajax訪問*.html后綴的頁面在Apache很好的工作,但在IIS不行,IIS下firebug調(diào)試報(bào)錯ajax 405Method Not Allowed。

Http405原因是IIS不允許ajax post方式訪問*.html后綴的頁。

IIS在使用Ajax post方式請求頁面時,一定要動態(tài)網(wǎng)頁后綴的或者用改用get方式！這是IIS的問題，不是框架bug。

也可以試試修改IIS配置，添加擴(kuò)展名（.html）的腳本映射。

多個navTab頁面或dialog頁面ID沖突，解決方法

如果多個navTab頁面或dialog頁面有相同的ID，假設(shè)這個ID為：xxxId

$("#xxxId",navTab.getCurrentPanel()); //獲取當(dāng)前navTab中的xxxId

$("#xxxId",$.pdialog.getCurrent()); // 獲取當(dāng)前dialog中的xxxId

jQuery1.4.2和jquery.validate.js在IE的兼容問題

jQuery1.4.2和jquery.validate.js在IE有兼容問題，ajax表單提交在IE不能觸發(fā)formonsubmit事件。

導(dǎo)致form提交后跳轉(zhuǎn)到了一個白頁面。

升級jQuery1.4.2注意事項(xiàng)

jQuery1.4.2對json要求非常嚴(yán)格key、value都要用引號抱起來，否則就無法解析。jQuery1.3.2以前版本沒有這種限制。

{"statusCode":"200","message":"操作成功"}

$.ajax()發(fā)送ajax請求成功后調(diào)用success方法,success根據(jù)dataType來解析返回的內(nèi)容httpData()。

分析jQuery1.4.2源碼發(fā)現(xiàn)dataType=”json”的處理方式完全不一樣了。1.3.2之前版本是用window.eval()來解析JSON結(jié)構(gòu),1.4.2版本添加了paseJSON()方法來解析。

估計(jì)是window.eval()存在安全漏洞，1.4.2版本進(jìn)行了改進(jìn)，對JSON格式也要求更嚴(yán)格了。

ECMAScript 5發(fā)布有段時間了，其中就包括了解析JSON的原生API-JSON.parse。許多瀏覽器已經(jīng)支持了。

主流js庫如JQuery，Ext，Prototype都優(yōu)先使用JSON.parse，不支持該方法的瀏覽器則使用newFunction或eval。

為何優(yōu)先使用JSON.parse，我想一個就是性能，原生的總是要快一些吧。此外JSON.parse較eval也更安全。

這里也當(dāng)然不能落后了，優(yōu)先使用JSON.parse，不行再用newFunction方式。最后失敗了會給failure的第二個參數(shù)msg賦值為"parsejson error"

parseJSON: function( data ) {

if ( typeof data !== "string"|| !data ) {

return null;

}

data = jQuery.trim( data );

if ( /^[\],:{}\s]*$/.test(data.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@")

.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]")

.replace(/(?:^|:|,)(?:\s*\[)+/g, "")) ) {

return window.JSON && window.JSON.parse ?

window.JSON.parse( data ) :

(new Function("return " +data))();

} else {

jQuery.error( "Invalid JSON: " + data );

}

weblogic訪問xml問題

weblogic訪問xml文件，需要在web.xml中加入下面的聲明

<mime-mapping>

<mime-type>text/xml</mime-type>

</mime-mapping>

這時再次訪問時weblgoic就給加上contentType了

如何自定義DWZ分頁參數(shù)參數(shù)

pagerForm默認(rèn)使用的當(dāng)前頁參數(shù)是pageNum, 每頁顯示條數(shù)numPerPage,查詢排序字段名orderField, 升序降序orderDirection, 更改其它參數(shù)需要設(shè)置DWZ.init(pageFrag,options)的options[“pageInfo”]:

</form>

$(function(){

DWZ.init("dwz.frag.xml",{

loginUrl:"login.html", // 跳到登錄頁面

statusCode:{ok:200, error:300, timeout:301}, //【可選】

pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage",orderField:"orderField",orderDirection:"orderDirection"}, //【可選,這里自定義分頁參數(shù)】

debug:false, // 調(diào)試模式【true|false】

callback:function(){

initEnv();

$("#themeList").theme({themeBase:"themes"});

}

});

</script>

如何關(guān)閉loading

dwz的ajax方法每次調(diào)用都會出現(xiàn)讀取數(shù)據(jù)的loading，怎么修改可選的？我自己寫了一個局部更新的ajax函數(shù)，結(jié)果loading太煩人怎么關(guān)掉好？

dwz.ui.js中注冊了ajax全局事件：

var ajaxbg = $("#background,#progressBar");

ajaxbg.hide();

$(document).ajaxStart(function(){

ajaxbg.show();

}).ajaxStop(function(){

ajaxbg.hide();

});

$.ajax() 有個參數(shù)global (Boolean) : (默認(rèn): true) 是否觸發(fā)全局 AJAX 事件.設(shè)置為 false 將不會觸發(fā)全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

DWZ局部刷新怎樣做?

API調(diào)用方式：

$("#xxxId").loadUrl(url,data, callback);

html擴(kuò)展鏈接方式：

DWZ版本升級

版本升級如果無特殊說明只要把高版本中的dwz.*.js全部覆蓋、還有dwz.frag.xml和theme目錄下的css就可完成升級。

如果新添加了js庫，需要在index.html頁面head標(biāo)簽中引入。

V1.5.3

1) Tree組件葉子節(jié)點(diǎn)添加自定義圖標(biāo)

2) 添加?xùn)鸥裣到y(tǒng)(參照Bootstrap)

3) 添加initEnvAfter 自定義事件，框架initEnv() 完成時執(zhí)行

V1.5.2

1）調(diào)整DWZ插件注冊和初始化機(jī)制。方便DWZ和其它第三方j(luò)Query插件整合，不需要修改dwz.ui.js源碼，可以按照DWZ插件注冊機(jī)制引入外部js。建議把第三方j(luò)Query插件注冊相關(guān)代碼放到外部js文件中，方便以后DWZ版本升級。

第三方j(luò)Query插件注冊示例：

DWZ.regPlugins.push(function($p){

//$p 是作用域， jQuery選擇器從$p這個父容器中選擇，如果沒寫會引起第三方插件被重復(fù)初始化問題
$("img.lazy", $p).lazyload({ effect : "fadeIn" });

});

2）修復(fù)dwz export插件bug

3）添加百度地圖示例

4）升級注意事項(xiàng)：如果修改過dwz.ui.js需要仔細(xì)比對一下

V1.5.1

jQuery更新到1.9.1，xheditor更新到1.2.2

V1.4.7

解決dwz.tree.js 那個選中父節(jié)點(diǎn)下單個子節(jié)點(diǎn)獲取不到值問題

V1.4.6

解決sortDrag 排序出現(xiàn)滾動條的話滾動出現(xiàn)的部分拖動一點(diǎn)就跑上面去了

解決DWZ IE10 表單驗(yàn)證頁面兼容問題，刪除index頁面<meta http-equiv="X-UA-Compatible"content="IE=7" />

升級xheditor 到v1.2.1版

V1.4.5

uploadify 從2.1版本升級到v3.2版本, 調(diào)整dwz中uploadify 2種demo（自動上傳方式；選擇文件后再點(diǎn)擊Upload按鈕上傳方式）

修正navTab, dialog組件session超時處理流程，自動關(guān)閉當(dāng)前navTab或dialog

解決speedup.js（用于IE加速）IE10中報(bào)錯問題

修正dwz.database.js主從結(jié)構(gòu)中含有日期控件時，dateFmt格式不一致問題

修正dwz.database.js主從結(jié)構(gòu)上傳附件，彈出的窗口上傳文件之后，帶回的文件名不顯示出來，原因是該控件中的items[#index#]中的#index#沒有被替換，導(dǎo)致js找不到控件，而無從替換

V1.4.4

修復(fù)使用xheditor插件IE下兼容問題：IE下打開一個含有編輯器的頁面，然后關(guān)閉，再打開不能錄入問題

修復(fù)多文件上傳插件uploadify的html擴(kuò)展方式，java讀取不到數(shù)據(jù)流問題：原因是以前沒有把input="file" 的name屬性填充到插件uploadify的fileDataName中

保持navTab有pagerForm的列表頁面reload查詢條件（比如第5頁上要修改一條記錄修改完了刷新頁數(shù)還在第五頁）

日歷控件添加動態(tài)參數(shù) (具體細(xì)節(jié)請參考本手冊：HTML擴(kuò)展 -> 日歷控件)

添加圖表示例

V1.4.3

修復(fù)表單驗(yàn)證插件jquery.validate.js1.9版本，在IE下重復(fù)提交2次問題。

V1.4.2

升級表單驗(yàn)證插件jquery.validate.js到最新1.9版本，解決上jUI上一版本中jQuery1.7.1和jquery.valiate1.7 在IE下兼容問題

V1.4.1

調(diào)整suggest+lookup，見文檔: HTML擴(kuò)展à suggest+lookup+主從結(jié)構(gòu)

添加拖動排序組件sortDrag

升級注意更新dwz.frag.xml、js、css和表單提交返回的json結(jié)構(gòu)添加confirmMsg這是navTabAjaxDone中 forwardConfirm時的提示信息，具體細(xì)節(jié)可以看dwz.ajax.js源碼和里面的注釋

V1.3 Final

升級注意：

· index頁面中<div class="navTab-panel tabsPageContent">添加class“l(fā)ayoutBox”改成<div class="navTab-panel tabsPageContent layoutBox">

· 然后更新js、css、dwz.frag.xml

Changelist：

1. 修復(fù)combox聯(lián)動菜單重復(fù)發(fā)送ajax請求問題s

2. 調(diào)整layoutH=“xx”的高度根據(jù)含有class=”layoutBox”的父容器div動態(tài)更新

3. 修復(fù)navTab 打開外部頁面和iframe方式打開時，瀏覽器前進(jìn)后退問題

a. <a target="navTab"href="http://www.baidu.com">外部頁面</a>

b. <a target="navTab"href="url" external=”true”>iframe 方式打開</a>

4. 調(diào)整Lookup、suggest，添加聯(lián)動效果。自定義查找?guī)Щ刂麈IlookupPk, 可選項(xiàng)默認(rèn)為id。

5. 添加多選查找?guī)Щ豰ultLookup

V1.3 RC4

1. 修改combox代碼還原onchane事件寫法，不用change param分開寫了，修改級聯(lián)菜單。（請參考本手冊“HTML擴(kuò)展 à combox組件”）

2. 修改dwz.ajax.js 中ajax分頁、局部刷新相關(guān)接口

3. 添加 jUI組件組合應(yīng)用局部刷新分頁demo

V1.3 RC3

1. 修復(fù)當(dāng)左邊菜單折疊，然后再展開時，table的縱向滾動條會消失問題

2. taskBar彈出框任務(wù)欄添加hover加亮效果

3. 添加dwzExport列表數(shù)據(jù)導(dǎo)出html擴(kuò)展，具體介紹請參見本手冊html擴(kuò)展部分

<a href="doc/dwz-team.xls" target="dwzExport">導(dǎo)出EXCEL</a>

4. 簡化index.html頁面，以下代碼片段移入dwz.frag.xml中

o taskBar

o resizable

o Shadow (陰影層)

o <div id="alertBackground"class="alertBackground"></div>

o <div id="dialogBackground" class="dialogBackground"></div>

o <div id='background' class='background'></div>

o <div id='progressBar' class='progressBar'>數(shù)據(jù)加載中，請稍等...</div>

V1.3 RC2

1. 解決loadUrl插件IIS不能用Ajax訪問*.htm或是*.html后綴的頁面

2. 日歷組件class="date"并且自定義pattern 時和驗(yàn)證沖突問題，pattern 改成 format

3. session超時，彈出登錄框，登錄后還能保存當(dāng)前操作到的狀態(tài)

V1.3 RC1

1. 添加橫向?qū)Ш綑? 參考示例index_menu.html

2. 添加主從結(jié)構(gòu)組件 , 參考示例db_widget.html和dwz.database.js

3. 添加suggest自動完成的提示框組件

4. 修復(fù)table組件當(dāng)把左邊欄收縮后拖動下邊的滾動條，內(nèi)容和題錯位問題

5. 高級table擴(kuò)展的拖動有BUG，單擊一下就直接往前縮小了一部分

6. 修復(fù)nav Tab組件關(guān)于[頁面一(外部頁面)]，在tab標(biāo)簽上右鍵刷新，就會出現(xiàn)[數(shù)據(jù)加載中，請稍等...]的loading的效果，但不會自動關(guān)掉。所有運(yùn)用iframe的頁面同樣出現(xiàn)此問題的bug

V1.2 Final

1. 添加新主題風(fēng)格azure

2. 添加lookup調(diào)用的dialog設(shè)置resizable和maxable

3. green和purple主題的tree和formBar樣式不正確

4. 一個頁面多個combox，在加載的時有幾率使兩個combox變?yōu)橄嗤瑔栴}

5. combox不能用validation驗(yàn)證問題

6. 解決在form表單的<p></p>中使用如果使用combox會造成位置不正確

V1.2 RC1

1. 使用隱藏iframe來處理無刷新表單提交時，服務(wù)器端返回json格式和普通DWZ 普通ajax 表單提交保持一致（即validateCallback和iframeCallback服務(wù)器端返回json格式一致）。具體細(xì)節(jié)請參考“文件上傳表單提交”部分

2. 新增關(guān)聯(lián)對象查找?guī)Щ亟M件lookup

3. 修改了dwz.stable.js解決了table表格組件的標(biāo)題，拉動后，會和下面的記錄錯位問題。

4. 新增表格組件多選批量刪除功能

5. 新增表格組件點(diǎn)擊表頭數(shù)據(jù)庫排序功能

6. 調(diào)整table表格組件默認(rèn)寬進(jìn)和普通的html table保持一致。

7. table表格組件添加TD內(nèi)容超大時是否多行顯示控制, nowrapTD="false" 時TD可以自動換行

8. 解決切換主題后，左邊的菜單，左右拉動IE下失效問題。

9. 修復(fù)日歷控件當(dāng)日期格式不匹配時初始化失敗問題，格式錯誤時默認(rèn)為當(dāng)前日期。

10. 解決在ie下頁面有xheditor編輯器時，經(jīng)過多次編輯后，文本框失效，不能輸入問題。

V1.1.6 Final

DWZ中jQuery版本從1.4.2升級到1.4.4

navTab組件重復(fù)打開同一個頁面時是否重新加載數(shù)據(jù)控制: navTab.openTab(tabid, url,{ title:”New Tab”, fresh:false, data:{} });

解決dwz.combox.js中的select把jquery中的select沖突問題

V1.1.6 RC3

日歷控件添加自定義選擇時間控制功能。

組件navTab支持打開外部連接，navTab組件自動判斷如果是外部連接就用iframe方式打開。

修復(fù)tab組件和inputAlert組件沖突問題。

xhEditor升級到最新版本。

V1.1.6 RC2

解決Input alt擴(kuò)展和必填字段class=”required”沖突問題

修復(fù)uploadify打開多個navTab時出現(xiàn)多個upload按鈕

修復(fù)table組件數(shù)據(jù)量多的時候調(diào)整這個列寬時, IE下提示“是否停止腳本運(yùn)行”

checkbox全選、反選示例。（demo à 表單組件 à多選框/單選框）

Tree組件優(yōu)化，增加checkbox屬性checked，表示checkbox默認(rèn)狀態(tài)是否checked，

修改select combox組件的默認(rèn)樣式

V1.1.6RC1

此版本對應(yīng)的dwz_thinkphp-1.0RC1,可以結(jié)合dwz_thinkphp版本去理解DWZ和服務(wù)器端的交互方式

DWZ.init() 方法添加debug狀態(tài)，用于DWZ.debug()

添加jquery.uploadify文件上傳HTML擴(kuò)展

HTML擴(kuò)展方式navTab, dialog, ajaxTodo 的url支持變量替換。例如：__URL__/edit/id/{sid_user}

Table組件修復(fù)切換navTab延時問題

添加dwz.checkbox.js用于checkbox全選、反選

添加combox下拉菜單組件(支持多級聯(lián)動)

V1.1.5 Final

解決jQuery1.4.2與jquery.validate.js在IE6下兼容問題，jQuery版本升級到1.4.2

修復(fù)dialog內(nèi)容無法復(fù)制問題

dialog彈出后默認(rèn)居中

添加session超時控制選擇，跳轉(zhuǎn)到“登錄頁面”或彈出帶屏蔽層的“登錄對話框”

navTab的openTab(tabid, title, url, [data])接口添加data參數(shù)，并調(diào)換title和url位置

V1.1.5 RC3

navTab右鍵菜單添加“刷新標(biāo)簽頁”

修復(fù)google瀏覽器中日歷控件icon錯位問題，和button字體錯位問題

修復(fù)在彈出窗口再彈出一個窗口是，新彈出的窗口被遮住問題

V1.1.5 RC2

修復(fù)IE6下ajaxTodo 成功后關(guān)閉當(dāng)前navTab時js出錯問題

添加CSS Table：原生html + CSS實(shí)現(xiàn)，無js處理效果、最簡單、最基本、性能最高的table。

添加國際化dwz.regional.zh.js，刪除dwz.validate.zh.js

DWZ打包JS，dwz.min.js

V1.1.5 RC1

修復(fù)panel折疊效果IE下錯位問題

修復(fù)DWZ日歷控件IE6下被input和select覆蓋問題

V1.1.5 Beta1

添加panel折疊效果

添加DWZ日歷控件

V1.1.4 Final

Tree添加控制默認(rèn)展開/收縮控制。

jQuery1.4.2和jquery.validate.js在IE有兼容問題，ajax表單提交在IE不能觸發(fā)form onsubmit事件。導(dǎo)致form提交后跳轉(zhuǎn)到了一個白頁面，還原到j(luò)Query1.3.2

解決v1.1.3 dialog上的分頁問題。

V1.1.3

修復(fù)了一些v1.1.2版本ajax載入bug

添加了分頁組件

V1.1.2

修改框架初始化方法，添加回調(diào)函數(shù)來保證，在初始化UI組件之前先載入dwz.frag.xml

DWZ.init("dwz.frag.xml", function(){

initEnv();

$("#themeList").theme({themeBase:"themes"});

});

修復(fù)IE6下alertMsg問題

當(dāng)前dialog添加reload方法：$.pdialog.reload(url,params)

V1.1.1

增加當(dāng)前navTab中鏈接ajax post擴(kuò)展功能ajaxTodo

修復(fù)dialog在IE下托動，dialog中內(nèi)容自動全選問題

修復(fù)tree組件折疊圖標(biāo)bug

修復(fù)當(dāng)前navTab上分頁通用方法navTabPageBreak問題

修復(fù)當(dāng)前navTab上分頁跳轉(zhuǎn)通用方法navTabPageJump問題

修復(fù)navTab中的table HTML擴(kuò)展問題

v1.1.0

增加自定義鼠標(biāo)右鍵菜單庫dwz.contextment.js

右鍵菜單定義在dwz.frag.xml文件中

navTab 右鍵菜單功能

<_PAGE_ id="navTabCM"><![CDATA[

<ulid="navTabCM">

</ul>

]]></_PAGE_>

taskbar右鍵菜單功能

<_PAGE_ id="dialogCM"><![CDATA[

<ulid="dialogCM">

<li rel="closeCurrent">關(guān)閉彈出窗口</li>

<li rel="closeOther">關(guān)閉其它彈出窗口</li>

<li rel="closeAll">關(guān)閉全部彈出窗口</li>

</ul>

]]></_PAGE_>

v1.0.6

增加Javascript混淆和gzip壓縮

增加銀灰色主題風(fēng)格

修復(fù)左邊活動面板滑動問題

v1.0.5

增加Dialog 默認(rèn)大小設(shè)置功能.

Html標(biāo)簽擴(kuò)展方式

<a class="button" href="demo_page1.html" target="dialog" rel="dlg_page1" title="[自定義標(biāo)題]" width="800" height="480">打開窗口一</a>

JS調(diào)用方式

$.pdialog.open(url, dlgId, title, {width: 500, height: 300});

navTab瀏覽器前進(jìn)后退按鈕控制

ajax前進(jìn)后退控制,DWZ navTab瀏覽器前進(jìn)后退功能控制.

增加文件上傳表單提交方式演示頁面

典型頁面 à文件上傳表單提交示例

以上內(nèi)容是否對您有幫助：

DWZ富客戶端框架（jUI）-簡介 →

寫筆記

我要補(bǔ)充