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文件都是在這里加載。
頁面布局：
|
div id="header"。頁面的標題部分
|
|
|
div id="leftside"
主菜單部分
|
div id="container"
主體部分，多標簽頁形式顯示
|
|
div id="footer"。頁腳部分
|
|
navTab/dialog頁面的html代碼，不是像平常那樣寫成<html><head/><body/></html>這樣的格式，
而是像下圖所示的格式那樣。
下面說下項目中使用的幾種典型界面
4.1，查詢畫面
<
h2
class=
"contentTitle">xxxx列表</
h2>
<cc1:PagingForm
ID=
"pagerForm"
runat=
"server" ActionUrl=
"xxx" />
<
div
class=
"pageHeader">
<
form
id=
"Form1" onsubmit=
"return navTabSearch(this);"
action=
"xxxx"
method=
"post"
runat=
"server">
<
div
class=
"searchBar">
<
table
class=
"searchContent">
<
tr>
<
td>
編號：<
input
type=
"text"
name=
"xxxx"
value=
"xxxx" />
</
td>
<
td>
名稱：<
input
type=
"text"
name=
"xxxxx"
value=
"xxxx"/>
</
td>
</
tr>
</
table>
<
div
class=
"subBar">
<
ul>
<
li><
div
class=
"buttonActive"><
div
class=
"buttonContent"><button
type=
"submit">檢索</button></
div></
div></
li>
</
ul>
</
div>
</
div>
</
form>
</
div>
<
div
class=
"pageContent">
<asp:Repeater
ID=
"Repeater1"
runat=
"server" OnItemDataBound=
"Repeater1_ItemDataBound">
<
HeaderTemplate>
<
table
class=
"table"
width=
"100%" layoutH=
"208">
<
thead>
<
tr>
<
th
width=
"40">序號</
th>
<
th
width=
"120">編號</
th>
<
th
width=
"150">名稱</
th>
<
th
width=
"80">操作</
th>
</
tr>
</
thead>
<
tbody>
</
HeaderTemplate>
<
ItemTemplate>
<
tr>
<
td><asp:Literal
runat=
"server"
ID=
"lblRownumber" /> </
td>
<
td><%#NvStr(Eval(
"Code"))%> </
td>
<
td><%#NvStr(Eval(
"Name"))%> </
td>
<
td><asp:Literal
runat=
"server"
ID=
"lbtCommand" />
</
td>
</
tr>
</
ItemTemplate>
<
FooterTemplate>
</
tbody>
</
table>
</
FooterTemplate>
</asp:Repeater>
<cc1:PagingFoot
runat=
"server"
ID=
"pagingFoot"/>
</
div>
4.2，單表的新增/編輯畫面
代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="xxxx.aspx.cs" Inherits="xxxx" %>
<
div
class=
"pageContent">
<
form
method=
"post"
id=
"xxxx"
class=
"pageForm required-validate"
onsubmit=
"return validateCallback(this, navTabAjaxDone);">
<
div
class=
"pageFormContent" layoutH=
"56">
<
p>
<label>名稱：</label>
<
input
name=
"name"
class=
"required"
type=
"text"
size=
"30" />
</
p>
<
p>
<label>總計：</label>
<
input
name=
"total"
type=
"text"
size=
"30"
class=
"required number" />
</
p>
</
div>
<
div
class=
"formBar">
<
ul>
<
li
class=
"continue">
<
input
type=
"checkbox"
checked=
"checked"
class=
"checked"
id=
"continue"/>繼續添加
</
li>
<
li><
div
class=
"buttonActive">
<
div
class=
"buttonContent">
<button
type=
"button"
name=
"btnSave"
onclick=
"">添加</button>
</
div>
</
div></
li>
<
li>
<
div
class=
"button">
<
div
class=
"buttonContent">
<button
type=
"button"
class=
"close">關閉</button>
</
div>
</
div>
</
li>
</
ul>
</
div>
<
script
type=
"text/javascript">
$().ready(function () {
xxxx.initDetailFormData(null);
});
</
script>
</
form>
<iframe
class=
"T_iframe"></iframe>
</
div>
a，<button
type=
"button"
class=
"close">，dwz會為class=close的添加一個關閉頁面的動作。
b，<iframe
class=
"T_iframe">，這個是為了解決IE6，
select框覆蓋彈出層的bug，參照了“IE6 select遮擋div問題”這篇文章
4.3，主子表的新增/編輯畫面
<
h2
class=
"contentTitle">xx填報</
h2>
<
div
class=
"pageContent">
<
div
class=
"panel" defH=
"200">
<
h1>基本信息</
h1>
<
div
class=
"pageFormContent">
<
p>
<label>編號：</label>
<
input
name=
""
readonly=
"readonly"
type=
"text"
size=
"30" />
</
p>
<
p>
<label>名稱：</label>
<
input
name=
""
class=
"required"
type=
"text"
size=
"30"
style=
"ime-mode:active;" />
</
p>
<
p>
<label>項目負責人：</label>
<
input
name=
""
type=
"text"
size=
"30"
style=
"ime-mode:active;" />
</
p>
</
div>
</
div>
<
div
class=
"divider"></
div>
<
div
class=
"panelBar">
<
ul
class=
"toolBar">
<
li><
a
class=
"button"
onclick=
""><
span>添加</
span></
a></
li>
</
ul>
</
div>
<asp:Repeater
ID=
"Repeater1"
runat=
"server" OnItemDataBound=
"Repeater1_ItemDataBound">
<
HeaderTemplate>
<
table
class=
"table"
width=
"100%" layoutH=
"385"
id=
"xxxx" nowrapTD=
"false">
<
thead>
<
tr>
<
th
width=
"200">名稱</
th>
<
th
width=
"150">型號規格</
th>
<
th
width=
"100">數量</
th>
<
th
width=
"120">單價(元)</
th>
<
th
width=
"150">總計(元)</
th>
<
th
width=
"100">操作</
th>
</
tr>
</
thead>
<
tbody>
</
HeaderTemplate>
<
ItemTemplate>
<
tr
class =
"unitBox"
data-
tt-
id=
""
data-
tt-parent-
id=
""
ondblclick=
"">
<
td>xxx</
td>
<
td>xxx</
td>
<
td>xxx</
td>
<
td>xxx</
td>
<
td>xxx</
td>
<
td>xxx</
td>
</
tr>
</
ItemTemplate>
<
FooterTemplate>
</
tbody>
</
table>
</
FooterTemplate>
</asp:Repeater>
<
div
class=
"formBar">
<
ul>
<
li>
<
div
class=
"buttonActive">
<
div
class=
"buttonContent"><button
type=
"button"
onclick=
"">保存</button>
</
div>
</
div>
</
li>
</
ul>
</
div>
</
div>
a，主表的輸入項最外層套了個<div class="panel" defH="200">，早先是沒寫這個，就<div class="pageFormContent">（這個和子表的<table>平級，現在是<div class="panel" defH="200">和<table>平級）。那樣寫，當pageFormContent里有select控件時，在IE6下顯示位置會錯亂，后來加上這個panel就好了。
b，<tr class = "unitBox" data-tt-id="" data-tt-parent-id="">這個寫法是用到了TreeTable這個Jquery控件。
4.4，主子表+多標簽頁的新增/編輯畫面
與前一節的區別是，我用多標簽頁的形式顯示子表的數據。
<
h2
class=
"contentTitle">xxxx填報</
h2>
<
div
class=
"pageContent">
<
div
class=
"panel" defH=
"220">
<
h1>基本信息</
h1>
<
div
class=
"pageFormContent">
<
p>
<label>編號：</label>
<
input
name=
""
readonly=
"readonly"
type=
"text"
size=
"30" />
</
p>
<
p>
<label>名稱：</label>
<
input
name=
""
class=
"required"
type=
"text"
size=
"30"
style=
"ime-mode:active;" />
</
p>
<
p>
<label>負責人：</label>
<
input
name=
""
type=
"text"
size=
"30"
style=
"ime-mode:active;" />
</
p>
</
div>
</
div>
<
div
class=
"divider"></
div>
<
div
class=
"tabs" currentIndex=
"0" eventType=
"click">
<
div
class=
"tabsHeader">
<
div
class=
"tabsHeaderContent">
<
ul>
<
li><
a
id=
""
href=
"javascript:;"><
span>客戶列表</
span></
a></
li>
<
li><
a
id=
""
href=
"x1.aspx"
class=
"j-ajax"><
span>材料列表</
span></
a></
li>
<
li><
a
id=
""
href=
"x2.aspx"
class=
"j-ajax"><
span>xx列表</
span></
a></
li>
<
li><
a
id=
""
href=
"x3.aspx"
class=
"j-ajax"><
span>xx列表</
span></
a></
li>
<
li><
a
id=
""
href=
"x4.aspx"
class=
"j-ajax"><
span>xx列表</
span></
a></
li>
<
li><
a
id=
""
href=
"x5.aspx"
class=
"j-ajax"><
span>xx列表</
span></
a></
li>
<
li><
a
id=
""
href=
"x6.aspx"
class=
"j-ajax"><
span>xx列表</
span></
a></
li>
</
ul>
</
div>
</
div>
<
div
class=
"tabsContent" layoutH=
"420">
<
div>
<
div
class=
"panelBar">
<
ul
class=
"toolBar">
<
li><
a
class=
"button"
onclick=
""><
span>添加</
span></
a></
li>
</
ul>
</
div>
<asp:Repeater
ID=
"Repeater1"
runat=
"server" OnItemDataBound=
"Repeater1_ItemDataBound">
<
HeaderTemplate>
<
table
class=
"list"
width=
"100%" layoutH=
"420"
id=
"tbAllocatedUnits" nowrapTD=
"false">
<
thead>
<
tr>
<
th
width=
"200">客戶名稱</
th>
<
th
width=
"120">xxxx</
th>
<
th
width=
"200">xxxx</
th>
<
th
width=
"120">操作</
th>
</
tr>
</
thead>
<
tbody>
</
HeaderTemplate>
<
ItemTemplate>
<
tr
ondblclick=
"">
<
td>xxx</
td>
<
td>xxx</
td>
<
td>xxx</
td>
<
td>xxx</
td>
</
tr>
</
ItemTemplate>
<
FooterTemplate>
</
tbody>
</
table>
</
FooterTemplate>
</asp:Repeater>
</
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
</
div>
<
div
class=
"tabsFooter">
<
div
class=
"tabsFooterContent"></
div>
</
div>
</
div>
<
div
class=
"formBar">
<
ul>
<
li><
div
class=
"buttonActive">
<
div
class=
"buttonContent"><button
type=
"button"
onclick=
"ScienceBudget.saveBudget();">保存</button>
</
div>
</
div>
</
li>
</
ul>
</
div>
</
div>
a，<div class="tabsHeaderContent">內的標簽數目要和<div class="tabsContent">里的子div個數一致。一個標題對應<div class="tabsContent">里的一個div。
b， <
div
class=
"tabs" currentIndex=
"0" eventType=
"click">中currentIndex指定了初始顯示第一個標簽頁的內容。
c，其他標簽頁的標題都是這樣寫的<
a
id=
""
href=
"x1.aspx"
class=
"j-ajax">，用ajax方式加載
href
頁面的html，
所以在<
div
class=
"tabsContent"
>里，除了第一個子div里寫了內容，其他幾個子div都是空的(<div></div>)，
點擊這個標簽頁后才會加載頁面。