當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

DWZ使用笔记

發布時間：2025/3/8 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 DWZ使用笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

DWZ使用筆記

一、前言

在近期的一個項目中，引入了DWZ這個富client框架，算是一次嘗試吧。期間也遇到不少問題，總算一一攻克了。特以此文記之。本人用的是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時的默認處理）。 client接收到的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"
οnsubmit="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>)，點擊這個標簽頁后才會載入頁面。

這篇就先寫到這里了。

原文地址：http://www.cnblogs.com/wordmy/p/3219760.html

總結

以上是生活随笔為你收集整理的DWZ使用笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

笔记
DWZ

上一篇： Eclipse jetty和plugin
下一篇： OSSIM学习-英汉对照注释