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. 多校 hdu

    欢迎參加--每周六晚的BestCoder(有米!) Solve this interesting problem Time Limit: 2000/1000 MS (Java/Others)    M ...

  2. ITFriend创业阶段的服务器环境搭建手册

    创业阶段,进一步实践了Linux环境搭建和维护,下面是一些常用软件的搭建步骤和参考资料,仅供自己和诸位参考. 我个人还是比较倾向"一站式Web开发"的,自己想做点事,需要太多的技能 ...

  3. [Grid Layout] Place grid items on a grid using grid-column and grid-row

    It’s possible to position a grid item anywhere on a grid track. To do this, let’s specify some grid- ...

  4. [React] Test friendly approach

    Add functional function such as change state, this should have tests covered. For example, in a comp ...

  5. AndroidStudio实现JNI的示例详解

    1. NDK简介 Android NDK 是在SDK前面又加上了“原生”二字,即Native Development Kit,因此又被Google称为“NDK” 1.1 NDK产生的背景 Androi ...

  6. Install .NET Core SDK on Linux CentOS / Oracle x64 | .NET

    原文:Install .NET Core SDK on Linux CentOS / Oracle x64 | .NET Linux发行版  CentOS / Oracle添加dotnet产品Feed ...

  7. [Ramda] Convert Object Methods into Composable Functions with Ramda

    In this lesson, we'll look at how we can use Ramda's invoker and constructNfunctions to take methods ...

  8. CEO 系列之一：如何当好创业公司 CEO？（不要用战术的勤奋掩盖战略的懒惰，在创业过程中，最核心问题，就是能把创业情怀变成具体问题。这个问题越具体越好）

    1. 创业公司要先定一个目标,要善于把目标简化, 分解成一个, 一个更具体,更简单的问题2. 针对简单的问题进行聚焦, 做深做强3. 在做的过程中, 把断地推出自己的产品到市场上去试错, 要用事实来证 ...

  9. TimeUnit用法

    TimeUnit是java.util.concurrent包下面的一个类,表示给定单元粒度的时间段 1.主要作用 时间颗粒度转换 延时 2.常用的颗粒度 TimeUnit.DAYS //天 TimeU ...

  10. Eclipse Che安装入门和使用（一）

    Eclipse Che序列博文如下: 安装和调试篇:Eclipse Che安装入门和使用(一) Web进阶篇:Eclipse Che开发Spring Web应用(入门) (二) 本文摘要: Eclip ...