DWZ使用筆記
一、前言
在最近的一個項目中，引入了DWZ這個富客戶端框架，算是一次嘗試吧。期間也遇到不少問題，總算一一解決了。特以此文記之。
本人用的是dwz-ria-1.4.5+Asp.net webform，寫這篇筆記時最新版本已經是1.4.6了。DWZ官方網址
二、目錄結構
dwz-ria-1.4.5.zip解壓後，目錄結構見下圖2.1。
其中js：dwz的核心腳本代碼；themes：css樣式，提供了default、azure、green、purple、silver等皮膚；
uploadify：文件上傳控件。
圖2.1
三、JS說明
3.1，dwz.core.js：dwz的基石。用的比較多的是String的擴展方法，ajaxError（ajax error時的默認處理）、ajaxDone（ajax success時的默認處理）。
客戶端接收到的asp.net webmethod返回值，多了層d。dwz中ajax方法接受的返回值是{statusCode:xx,message:'xxxx'}這樣的格式，在後臺webmethod返回這樣的格式，前臺js接收到的{d:{statusCode:xx,message:'xxxx'}}。
obj2str、jsonEval是dwz提供的序列化/反序列化json的函數，在使用中發現存在bug，建議使用json2.js的。
3.2，dwz.ajax.js：dwz提供的ajax函數。有分頁處理（navTabAjaxDone、dialogPageBreak）、ajax success時的回調函數（navTabAjaxDone、dialogAjaxDone）。
navTab、dialog是兩種頁面顯示方式，navTab：以標籤頁顯示的畫面，dialog：彈出式的畫面。
3.3，dwz.ui.js：畫面的初始化處理。function initUI(_box)就是對一系列的dwz標籤進行初始化，第三方控件的初始化也要放在這裏。Jquery的ready事件執行後，纔會執行initUI，我在項目中用了editable-select、treetable兩個控件，一開始是放在ready事件裏初始化的，碰巧他們的class和dwz的重名，調試時怎麼也出不來那個效果，後來看調試代碼才發現不能寫在ready裏。
3.4，dwz.barDrag.js：左邊活動面板的隱藏、顯示
3.5，dwz.stable.js、dwz.cssTable.js：dwz提供的兩種表格。對應的標籤分別是class='table'/class='list'。
csstable只支持排序；
stable功能多些，支持排序，列幅的調整等。它實際上是把原先的一個表格變成了2個，一個是包含列標題的表格，一個就只有數據行的表格，拖動列標題時，會相應調整另一個表格的列寬。使用過程中發現生成的表格，主要是數據行的那個沒有id/name了，沒法往裏面動態添加數據了，所以修改了下源代碼。
從顯示效果看，csstable行與行之間沒有細線分隔，stable的就有。對比兩者的css，在 \themes\css\core.css文件，
/* CSS Table */
table.list td 這行增加border-bottom: solid 1px #ededed;
設置td底部邊框的線型、寬度、顏色。
不足的地方：stable動態生成了表頭列（表格），在右側添加了縱向滾動條，所以會調整html中設置好的列寬。遇到多行表頭、空數據行（新增畫面，初始時沒有數據行，運行時添加數據）這樣的場景，表頭列和數據列會錯位。這時改用csstable或修改stable源代碼（我是改用csstable了）。
3.6，dwz.dialog.js：彈出畫面用的。$.pdialog.getCurrent()：獲取當前的彈出畫面
3.7，dwz.navTab.js：標籤頁畫面用的。navTab.getCurrentPanel()：獲取當前的標籤頁對象
四、UI佈局
通常在login.aspx頁面登錄後，進入index.aspx（dwz-ria-1.4.5.zip中的index.html）頁面，這個是主頁面，項目中要引用的js，css文件都是在這裏加載。
頁面佈局：