DWZ使用 转帖

最新推荐文章于 2024-05-06 11:06:54 发布
最新推荐文章于 2024-05-06 11:06:54 发布
阅读量61 收藏
点赞数
文章标签： ui javascript json ViewUI
原文链接：http://www.cnblogs.com/mingf123/p/3820084.html
版权

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" οnsubmit= "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>)，
点击这个标签页后才会加载页面。div>
 
这篇就先写到这里了。
 
 
 
 
 
 




转载于:https://www.cnblogs.com/mingf123/p/3820084.html

weixin_30902251
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DWZ短网址最新官方版
04-03
DWZ短网址最新官方版，DWZ短网址系统是一款不错的开源网站系统，该系统采用了PHP语言编写而且，也是一款比较好的开源短网址解析软件 DWZ短网址系统，不但可以为用户提供进行网址缩短、网址还原、网址加密等功能，并提供一套管理后台，方便管理员进行管理。喜欢的朋友可以下载研究一下。 说明使用: 1.DWZ适合希望做短网址站的朋友，为网友提供短网址解析 2.DWZ适合有广告源的独立博客主们，为广告链接缩短，同时统计广告效应 3.DWZ适合拥有线下资源,特别是小型独立电商或者网店，进行产品推广，网址缩短的好处就不必说了 4.DWZ适合做淘宝客等类似站点提供独立的短地址压缩服务 安装说明 一、平台需求 1.Windows 平台： IIS/Apache/Nginx + PHP5 + + MySQL4/5 如果在windows环境中使用，建议用WAMPServer等相关服务器集成软件. 2.Linux/Unix 平台 Apache + PHP5 + MySQL4/5 (PHP必须在非安全模式下运行) 建议使用平台：Linux + Apache2.2 + PHP5.2/PHP5.3 + MySQL5.0 3.PHP必须环境或启用的系统函数： GD扩展库 MySQL扩展库 系统函数 —— phpinfo、dir 4.基本目录结构 / ..../install 安装程序目录，安装完后可删除[安装时必须有可写入权限] ..../Admin 后台管理项目(应用) ..../Web 前台显示项目(应用) ..../Public 公共文件夹 ..../Core ThinkPHP框架 ..../index.php 前台项目单一入口文件 ..../admin.php 后台项目单一入口文件 二、程序安装使用 1.下载程序解压到本地目录; 2.删除Admin/runtime 这个文件夹！ 3.上传程序目录到网站根目录 3.运行http://www.yourname.com/Install/index.php(yourname表示你的域名),按照安装提速说明进行程序安装
DWZ使用笔记
weixin_30340617的博客
07-27 319
DWZ使用笔记一、前言在最近的一个项目中，引入了DWZ这个富客户端框架，算是一次尝试吧。期间也遇到不少问题，总算一一解决了。特以此文记之。本人用的是dwz-ria-1.4.5+Asp.net webform，写这篇笔记时最新版本已经是1.4.6了。DWZ官方网址二、目录结构dwz-ria-1.4.5.zip解压后，目录结构见下图2.1。其中js：dwz的核心脚本代码；th...
DWZ(J-UI)整合百度编辑器(UEditor)
06-26 1778
首先，在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
dwz 获取当前页面中的dom节点
z363839586的专栏
04-14 327
     最近有朋友问到获取 DWZ dom节点 获取不到的问题，但发现一些网上出现错误的回答，为防止误导初学者，特发出正确解决方法。     DWZ 核心 就是同过 Ajax 获取 Html 片段，然后 append 到页面当中， 这样就会出现一个问题， 你在一个Html 片段中 为一个节点添加的ID 是唯一的，但是在整个页面中 不一定是唯一的，比如 你在一个dialog Html片段
利用DWZ进行系统后台开发
樊亿的专栏
04-30 252
最近在做人民网无线综合业务管理平台项目，在做后台系统时，利用了国内的DWZ框架，这个基于jQuery的富客户端框架非常好用。 在开发中也遇到了一些问题，比如如何在局部页面中嵌入外部页面，发现好像并不支持frameset框架集，只好用iframe代替。 ...
DWZ使用说明
02-01
DWZ使用说明DWZ使用说明DWZ使用说明DWZ使用说明DWZ使用说明
dwz使用问题
04-26
dwz使用中的几点问题 二、 二级标签刷新的几种方式
DWZ富客户端框架使用手册
07-22
资源名称：DWZ富客户端框架使用手册资源目录：概述. 4 学习DWZ 的建议...... 4 DWZ 区别于其它 JS 框架，最大的优点 4 设计思路 .... 4 版权声明 .... 5 DWZ 研发组介绍 ....... 5 HTML 扩展...... 6 Ajax 链接扩展...
dwz使用手册
04-22
dwz使用手册，非常好的使用手册，方便新手学习，老手参考使用。是一套简单好用的富客户框架
dwz使用文档
03-11
dwz使用文档，能让你dwz掌握非常好，不容错过啊
DWZ框架中的一个问题
MrShen_XC的博客
01-11 378
使用DWZ框架的过程中会碰到同时打个多个页面来操作，如果要操作的form表单id一样，操作其中一个窗口的时候会影响到另一个窗口的问题。 多个 navTab 页面或 dialog 页面 ID 冲突，解决方法 如果多个 navTab 页面或 dialog 页面有相同的 ID，假设这个 ID 为：xxxId $("#xxxId", navTab.getCurrentPanel()); // 获取
鸿蒙launcher浅析
xianrenli38的博客
04-28 736
launcher的ui加载 是这样的，使用的不是UIAbility，而是没见过的ServiceExtension.,如此，添加的UI。product 业务形态层：区分不同产品、不同屏幕的各形态桌面，含有桌面窗口、个性化业务，组件的配置，以及个性化资源包。之前做过Android launcher，所以对鸿蒙的launcher挺好奇的，看看和普通鸿蒙应用有何区别。feature 公共特性层：抽象的公共特性组件集合，可以被各桌面形态引用。common 公共能力层：基础能力集，每个桌面形态都必须依赖的模块。
在UI界面中播放视频_unity基础开发教程
成长之路，任重道远，期待你的关注！
05-01 668
之前我写过一篇在场景中播放视频的文章，但是在开发中有时候也会在UI的界面中播放视频，这期我们做一下在UI的界面中播放视频。操作步骤比较简单，到这里就完成了，如果有问题的话可以在评论区留言，下期见，拜拜！
构建第一个ArkTS应用之@管理应用拥有的状态概述
最新发布
二当家的
05-06 81
上一个章节中介绍的装饰器仅能在页面内，即一个组件树上共享状态变量。如果开发者要实现应用级的，或者多个页面的状态数据共享，就需要用到应用级别的状态管理的概念。
移植 SquareLine 导出的 UI 源码到 HMI-Board
嵌入式小菜鸟一枚~
04-28 1044
移植 SquareLine Studio 设计 UI 到 HMI-Board
UE5 UMG
zaizai1007的博客
05-05 238
ue5 UMG
border 是渐变色怎么设置 圆角 radius?
左不言的博客
04-29 240
border 是渐变色怎么设置 圆角 radius?
Cisco IOS XE Web UI 权限提升漏洞复现(CVE-2023-20198)
0xSec
05-01 542
当Cisco IOS XE 软件的web UI暴露于互联网或不受信任的网络时，未经身份验证的远程攻击者可以利用该漏洞在受影响的系统上创建具有15级访问权限的帐户。攻击者可以利用该帐户来控制受影响的系统。 利用条件：需要启用HTTP Server或者HTTPS Server。
远程为ubuntu安装teamviwer（无UI界面） - 简书
m0_51788349的博客
04-30 305
远程为ubuntu安装teamviwer（无UI界面） - 简书。
gru网络python代码
05-12
以下是一个简单的 GRU 网络的 Python 代码示例，用于序列到序列的预测任务： ```python import numpy as np ...在训练模型时，我们可以使用反向传播来计算权重的梯度，并使用梯度下降来更新权重。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值