DWZ使用笔记

最新推荐文章于 2020-12-15 14:09:38 发布
最新推荐文章于 2020-12-15 14:09:38 发布
阅读量2.7w 收藏 22
点赞数

DWZ使用笔记

一、前言

    在最近的一个项目中，引入了DWZ这个富客户端框架，算是一次尝试吧。期间也遇到不少问题，总算一一解决了。特以此文记之。
    本人用的是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时的默认处理）。
    客户端接收到的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
luquansen
关注
DWZ(J-UI)整合百度编辑器(UEditor)
06-26 1841
首先，在dwz.ui.js中找到if($.fn.xheditor){ $("textarea.editor",$p).each(function(){ var $this=$(this); var op={html5Upload:false,skin:'vista',tools:$this.attr("tools")||'full'}; var upAttrs=[["upLinkUrl","upL
连玉君 Markdown 笔记
Stata连享会
09-21 4890
连玉君 Markdown 笔记 连玉君 Markdown 笔记 Markdown 基础 标题 列表 无序列表 有序列表 列表的缩进和混排 记事列表 文字效果和分隔线 链接 文本链接 插入图片 脚注 尾注 参考文献 缩写名词 专有名词 索引条目 文字高亮和代码块 特殊字符 转义符 脚注 尚未完成 表格还没有搞明白 Markdown 进阶功能 数学公式 书签锚链接 目录
dwz富框架文档
03-22
设计思路 第一次打开页面时载入界面到客户端, 之后和服务器的交互只是数据交互, 不占用界面相关的网络流量. 支持HTML扩展方式来调用DWZ组件. 标准化Ajax开发, 降低Ajax开发成本. 学习DWZ的建议 刚接触DWZ的人可能感觉DWZ文档太少、入门困难，原因都是没有掌握正确的学方法。建议按下面的步骤来学习DWZ框架： · 通读DWZ文档，很多新手提的问题文档中都写了。 · 看demo每个组件演示效果和代码（留意组件html结构）。 · 建议安装firebug，用firebug看html结构、CSS和调试JS都非常方便。见附录一 firebug介绍。 · 对于初学者不建议看DWZ全部源码，但还是非常有必要看看dwz.ui.js和dwz.ajax.js · 可以从google code下载dwz_thinkphp版本，结合php后台去理解DWZ和服务器端的交互方式 DWZ区别于其它JS框架，最大的优点 · 完全开源，源码没有做任何混淆处理，方便扩展 · CSS和js代码彻底分离，修改样式方便 · 简单实用，扩展方便，轻量级框架，快速开发 · 仍然保留了html的页面布局方式 · 支持HTML扩展方式调用UI组件，开发人员不需写js · 只要懂html语法不需精通js，就可以使用ajax开发后台 · 基于jQuery，UI组件以jQuery插件的形式发布，扩展方便
DWZ框架学习
weixin_30482383的博客
11-06 416
对象结构图如下： DWZ最大的特点是使用html扩展的方式来代替javascript代码，而不是使用传统的面向对象来开发javascript库；html扩展方式的特点，简单、容易扩展、基于jQuery；javascript库特点，思维方式更接近应用程序，以组件的方式调用；但是实现复杂，扩展不方便； 核心JS介绍：dwz.core.js提供了程序入口；对jQuery做了针对DWZ的扩展，基础...
dwz框架及api文档
06-17
很好很实用的dwz框架里面还有api操作文档，免费下载
联想笔记本Office 2019家庭和学生版安装工具
05-29
笔记本自带office修复
easyUI笔记
05-30
### easyUI笔记知识点详解 #### 一、什么是jQuery EasyUI？ **jQuery EasyUI** 是一组基于 jQuery 的 UI 插件集合。它的目标是帮助 Web 开发者更容易地创建功能丰富且美观的用户界面。通过使用 **jQuery EasyUI**...
机器学习基础笔记总结
chunyun0716的专栏
06-28 266
最近在学习latex，将之前的机器学习基础知识相关的笔记用latex整理了以下，源地址如下： https://github.com/duankai/latex_book，感兴趣的可以自由下载，也可以随意使用latex的格式。 pdf 效果如下，文件可在http://dwz.date/bnzX 下载 ...
openwrt 开发笔记
12-15 519
这里写自定义目录标题openWRT开发笔记log管理功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 openWRT开发...
DWZ文件+文档
07-15
DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级 DWZ框架支持用html扩展的方式来代替javascript代码, 只要懂html语法, 再参考DWZ使用手册就可以做ajax开发. 开发人员不写javascript的情况下, 也能用ajax做项目和使用各种UI组件. 基本可以保证程序员不懂javascript, 也能使用各种页面组件和ajax技术. 如果有特定需求也可以扩展DWZ做定制化开化.
DWZ使用说明
02-01
DWZ使用说明DWZ使用说明DWZ使用说明DWZ使用说明DWZ使用说明
DWZ
PHP程序员 - muzihao2014
06-02 465
http://j-ui.com/
dwz....
gangbalisun的专栏
09-03 1万+
[置顶]J-Hi Lookup实现级联下拉的效果 描述：在DWZ版中lookup的处理机制与经典的完全不同，对于lookup有两种展现形式，一种是通过点击lookup图标弹出对话框后带回选中的值，另一种是通过在文本框中输入相应信息从而实现联机式的查找带回效果。从实现目的来看，无非是让lookup的实体的主键值带回到hidden的一个元素中，而其它值只是作为显示参考之用，与底层的数据库结构与数
DWZ框架使用
嗨皮螃的博客
09-25 1835
1，  全部资源文件放到根目录的Public下，更改js、css、xheditor等相关文件路径__PUBLIC__/dwz/.. 2，  注意更改dwz.frag.xml布局文件的路径是否正确。 3，  菜单的li标签内a的rel="page1"属性有无重名决定是否会发生覆盖页面内导航栏的任务标签。 4，  DWZ分页   在代码块的上方需要一个表单提交数据来更新分页内容   ...
dwz 获取当前页面中的dom节点
z363839586的专栏
04-14 391
     最近有朋友问到获取 DWZ dom节点 获取不到的问题，但发现一些网上出现错误的回答，为防止误导初学者，特发出正确解决方法。     DWZ 核心 就是同过 Ajax 获取 Html 片段，然后 append 到页面当中， 这样就会出现一个问题， 你在一个Html 片段中 为一个节点添加的ID 是唯一的，但是在整个页面中 不一定是唯一的，比如 你在一个dialog Html片段
DWZ富客户端框架使用手册
热门推荐
C & JAVA专栏
10-19 1万+
DWZ 富客户端框架(jQuery RIA framework), 是中国人自己开发的基于 jQuery 实现的 Ajax RIA 开源框架. DWZ 富客户端框架设计目标是 简单实用、扩展方便、快速开发、RIA  思路、轻量级 DWZ 框架支持用 html 扩展的方式来代替 javascript 代码, 只要懂 html 语法, 再参考 DWZ 使用手册就可以做 ajax 开发.
DWZ简介及其使用
T123012009065的专栏
12-12 3561
DWZ简介: DWZ富客户端框架(jQuery RIA framework)，是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。 DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级。　 　　DWZ框架支持用HTML扩展的方式来代替JavaScript代码，只要懂HTML语法， 再参考DWZ使用手册就可以做Ajax开发。 　　开发人员不写Jav...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值