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. solr源码导入eclipse 分类： H4_SOLR/LUCENCE 2014-07-14 14:11 550人阅读 评论(1) 收藏

    转载自:http://blog.csdn.net/vltic/article/details/19917377 (1)相应的开发环境准备          (1)jdk1.6+的安装和环境变量配置(命 ...

  2. iOS View自定义窍门——UIButton实现上显示图片，下显示文字

    “UIButton实现上显示图片,下显示文字”这个需求相信大家在开发中都或多或少会遇见.比如自定义分享View的时候.当然,也可以封装一个item,上边imageView,下边一个label.但是既然 ...

  3. sourceinsight4

    转载 http://bbs.pediy.com/thread-215669.htm 如果你觉得软件有用,请购买正版.发布这个纯属娱乐. 转载请注明出处,谢谢! 仅修改了程序中用于License签名验证 ...

  4. Bootstrapbutton

    Bootstrap 提供了一些选项来定义button的样式,详细例如以下表所看到的: 下面样式可用于<a>, <button>, 或 <input> 元素上: 类 ...

  5. Opencv Sift算子特征提取与匹配

    SIFT算法的过程实质是在不同尺度空间上查找特征点(关键点),用128维方向向量的方式对特征点进行描述,最后通过对比描述向量实现目标匹配. 概括起来主要有三大步骤: 1.提取关键点: 2.对关键点附加 ...

  6. [Angular] Subscribing to the valueChanges Observable

    For example we have built a form: form = this.fb.group({ store: this.fb.group({ branch: '', code: '' ...

  7. Kolya and Tandem Repeat

     Kolya and Tandem Repeat time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  8. python property属性

    能够检查參数,一直没注意这个语言特性,忽略了非常多细节,感谢 vitrox class Person( object ): def __init__( self, name ): if not isi ...

  9. js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...

  10. android通用適配器

    一.需求分析 在寻常的android开发过程中.ListView.GridView适配的编写是一件非常麻烦并且非常反复的事情,每次都须要考虑性能的优化.item的编写.获取网络图片时候信息的错乱等问题 ...