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. oracle分组取每组第一条数据

    oracle分组后取每组第一条数据   '数据格式     分组取第一条的效果   [sql] SELECT * FROM (SELECT ROW_NUMBER() OVER(PARTITION BY ...

  2. 立足“快时尚”，联想笋尖S90怎样诠释“比美更美”？

        现现在."快时尚"已经成为广受年轻人追捧的消费观,从服装界的H&M.ZARA到餐饮界的绿茶.外婆家等等,我们都不难看出,快时尚已成为激发年轻人消费欲望的核心元素,并 ...

  3. Write Code As If You Had to Support It for the Rest of Your Life

    Write Code As If You Had to Support It for the Rest of Your Life Yuriy Zubarev YOU COULD ASK 97 PEOP ...

  4. js课程 1-5 js如何测试变量的数据类型

    js课程 1-5 js如何测试变量的数据类型 一.总结 一句话总结:用typeof()方法. 1.js如何判断变量的数据类型? 用typeof()方法. 13 v=10; 14 15 if(typeo ...

  5. node+mongodb+WP构建的移动社交应用源码 分享

    源码地址: https://github.com/kangkaisen/dreaming dreaming 详情介绍:http://www.bcmeng.com/dreaming/

  6. 【计算机视觉】OpenCV中直方图处理函数简述

    计算直方图calcHist 直方图是对数据集合的统计 ,并将统计结果分布于一系列提前定义的bins中.这里的数据不只指的是灰度值 ,统计数据可能是不论什么能有效描写叙述图像的特征. 如果有一个矩阵包括 ...

  7. js调用百度地图api

    <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">   ...

  8. 【codeforces 765A】Neverending competitions

    [题目链接]:http://codeforces.com/contest/765/problem/A [题意] 给你一个人的n个行程 行程都是从家到某个地方或从某个地方到家; 且是无序的,且如果到了非 ...

  9. erlang版本的protobuf

    这两天看了google protocol buffers的文档,protobuf非常不错,解决了一直以来遇到的消息版本不同的问题,对项目中的开发非常有帮助. 最近在学习erlang,官方只有java. ...

  10. 【a803】营救

    Time Limit: 10 second Memory Limit: 2 MB 问题描述 铁达尼号遇险了!它发出了求救信号.距离最近的哥伦比亚号收到了讯息,时间就是生命,必须尽快赶到那里.通过侦测, ...