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"

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>)，
点击这个标签页后将加载页面。

 
这将先写到这里。
原文地址：http://www.cnblogs.com/wordmy/p/3219760.html

DWZ使用注意事项的更多相关文章

  1. 将j-ui(dwz)套用到thinkphp注意事项

    目前我用的 thinkphp 版本是  3.1.3 J-UI  dwz 版本好像是 1.4 现在 j-ui有 thinkphp的例子了,请尽量以他们原创为主,我这里都是一些自己搜集和自己钻研的土办法, ...

  2. DWZ中关于iframeCallback和validateCallback的注意事项

    在DWZ上传中..如果要上传图片.则一定只能使用iframeCallback. 并且要表单中注明enctype="multipart/form-data"

  3. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  4. Windows Server 2012 NIC Teaming介绍及注意事项

    Windows Server 2012 NIC Teaming介绍及注意事项 转载自:http://www.it165.net/os/html/201303/4799.html Windows Ser ...

  5. TODO：Golang指针使用注意事项

    TODO:Golang指针使用注意事项 先来看简单的例子1: 输出: 1 1 例子2: 输出: 1 3 例子1是使用值传递,Add方法不会做任何改变:例子2是使用指针传递,会改变地址,从而改变地址. ...

  6. app开发外包注意事项，2017最新资讯

    我们见过很多创业者,栽在这app外包上.很多创业者对于app外包这件事情不是特别重视,以为将事情交给app外包公司就完事了,实际上不是的.无论是从选择app外包公司还是签订合同.售后维护等各方面都有许 ...

  7. favicon.ioc使用以及注意事项

    1.效果 2.使用引入方法 2.1 注意事项:(把图标命名为favicon.ico,并且放在根目录下,同时使用Link标签,多重保险) 浏览器默认使用根目录下的favicon.ico 图标(如果你并没 ...

  8. ORACLE分区表梳理系列（二）- 分区表日常维护及注意事项（红字需要留意）

    版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...

  9. 【原】Masonry+UIScrollView的使用注意事项

    [原]Masonry+UIScrollView的使用注意事项 本文转载请注明出处 —— polobymulberry-博客园 1.问题描述 我想实现的使用在一个UIScrollView依次添加三个UI ...

随机推荐

  1. 监听text等的改变事件

    oninput事件是html5的标准事件,支持ie9和以上以及其他的火狐啊谷歌啊等浏览器 ie9以下的可以用onpropertychange <head>     <script t ...

  2. windows 空闲超时 非管理员如何破解

    windows 空闲超时 非管理员如何破解

  3. 新版Sublime text3注册码被移除的解决办法

    Sublime Text是风靡世界的文本编辑器,支持多种编程语言,启动时间短,打开文件速度快,插件丰富,让很多程序员爱不释手.但是,对于未注册的Sublime Text, 经常在保存的时候会弹出一个烦 ...

  4. [SCSS] Organize Styles with SCSS Nesting and the Parent Selector

    SCSS nesting can produce DRYer code by targeting child elements without having to write the parent c ...

  5. [Grid Layout] Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

    What about the situation in which we aren’t specifying the number of columns or rows to be repeated? ...

  6. Delphi程序的自我修改

    前言:     对于Delphi在编译时对代码所做的工作,大部分使用Object Pascal之类的高级语言的程序员并不是很熟悉.如果你对汇编程序以及EXE文件格式有一点基本认识,那么源代码里包含的注 ...

  7. 数据存储常用5种方式plist、Preference、NSCoding、SQLite3、Core Data

    数据存储 iOS应用数据存储的常用方式 XML属性列表(plist)归档 Preference(偏好设置) NSKeyedArchiver归档(NSCoding) SQLite3 Core Data ...

  8. WPF 使用鼠标拖动一个控件的实现[2018.7.15]

    原文:WPF 使用鼠标拖动一个控件的实现[2018.7.15] Q:已经把一个Shape和一个TextBlock组合起来放到了一个Grid中,现在想要实现用鼠标拖动这个Grid到任意位置的功能,如何做 ...

  9. 检索 04 --Stack栈 Queue队列 Hashtable哈希表

    //Stack 先进后出 没有索引 Stack st = new Stack(); st.Push(12); st.Push(11); st.Push(22); st.Push(34); st.Pus ...

  10. Android Studio打包apk，aar，jar包

    转载请标明出处:一片枫叶的专栏 文本我们将讲解android studio打包apk,aar,jar包的相关知识.apk包就是android系统的安装包,这里没什么好说的,aar包是android中独 ...