Dwz手册的补充说明和常见问题
1、我如何在项目中使用dwz?
手册中有如下说明:
设计思路
第一次打开页面时载入界面到客户端, 之后和服务器的交互只是数据交互, 不占用界面相关的网络流量. 支持HTML扩展方式来调用DWZ组件. 标准化Ajax开发, 降低Ajax开发成本.
也就是说,只需要在一个页面(通常是起始页,如index.aspx/index.php)包含框架,这里的框架是指demo中index.html页面的所有元素(<div class=”page”可自定义),完整的html结构。其它的页面只需要页面碎片,就是<body></body>中的部分。
2、怎样初始化dwz?
Dwz是通过init函数初始化,index.html的初始化函数如下:
DWZ.init("dwz.frag.xml", {
// loginUrl:"loginsub.html", loginTitle:"登录", // 弹出登录对话框
loginUrl:"login.html", // 跳到登录页面
statusCode:{ok:200, error:300, timeout:301}, //【可选】
pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可选】
debug:false, // 调试模式 【true|false】
callback:function(){
initEnv();
$("#themeList").theme({themeBase:"themes"});
}
});
Dwz.init(pathToDwz_frag_xml, options);
pathToDwz_frag_xml: js方式能访问到的dwz.frag.xml,一定要保证通过这个地址能访问到dwz.frag.xml文件,最好用serverPath+dwz.frag.xml的绝对路径方式。
Options是一个对象方式的参数:
loginUrl:当ajax 的json返回timeout的时候会跳转到此页面
statusCode:自定义的json错误代码,如果不指定将使用图片所示的默认规则。
pageInfo:这里可以为pagerForm指定别名,比如pageNum:”currentPage”。
Callback:指定初始化完成后的回调函数。有人问如何在打开dwz的时候在我的主页加载另一个页面或者打开一个navTab,就可以在callback里使用navTab.open(“main”), $.pdialog.open等等。
3、我如何解析json数据来重绘表格/页面?
很多人不明白dwz的工作方式,认为dwz的navTab的页面看起来是ajax方式解析的,那就要从服务器传回json再手动解析。Dwz事实上就是这样工作的,只是他传回的不是一部分数据,而是整个页面,然后通过loadUrl加载到navTab上,这个过程对使用者是透明的,也即你不需要关心页面的数据处理,以前怎么写的页面,现在还是怎么写页面。Dwz会将普通请求转换为ajax方式(前提是正确使用dwz提供的接口)。
4、如果不是传输数据,dwz的json是用于哪里?
Dwz的服务器端响应上提到一个服务器端响应json,很多初学者问这个json如何传递数据,用于自己拼接页面等。如第3点所说,dwz的页面是不需要手动处理ajax的,这个json结构是对打开navTab,dialog, ajax表单提交、ajax post链接(ajaxTodo)状态的响应,而不涉及具体的页面数据。
5、提交表单或者ajax post链接后,如何刷新本navTab?
一定要记住在返回的json中加上要刷新的navTabId。
6、如何在ajax连接扩展中使用回调函数?
手册上没有写,其实从1.2RC1开始,ajax link就有了callback属性,用于指定回调函数,如<a target=”ajaxTodo” callback=”MyOwnFunction”。
7、如何使用table和css table的排序功能?
Table的排序功能是手册中没有提到的,其实dwz的排序功能相当强大,这里我简单介绍一下流程:
1、 给要排序的表格<table中加上asc=”asc” desc=”desc”,指定排序别名。
2、 给要排序的表格表头th加上orderField=”fieldName”属性,这样点击该表头才能出发提交事件。Th的class=”asc”/class=”desc”会分别显示向上和向下的箭头,这个不是只显示这么简单,往下看。
3、 在pageForm加上orderField和orderDirection,点击排序后提交的依然是pagerForm,orderField会绑定点击的th的orderField,而orderDirection则会反向绑定th的class,这是dwz智能的地方,也就是你不用手动记住状态来反向(感谢细心的作者),class=”asc”就会提交orderDirection = desc。注意每次要将orderDirection绑定回th的class。
8、如何使用table和css table的分页功能?
分页功能是大家用得比较多,也是不容易理解的一点。这里我凭着自己的理解给初学者讲讲。
手册上讲得很清楚,dwz不是客户端分页,而是服务器端分页,结合本文第3点可以知道dwz的分页就是每次将分页数据提交回后台,后台生成分页数据显示到页面上。需要注意的是以下几点:
1、 分页只需要pagerForm与pagination两个dwz组件,点击分页提交的是pagerForm。
2、 pagerForm用于带查询的分页数据的缓存,说缓存是因为这里的参数都需要自己手动从后台读取绑定(pageNum除外)。
3、 Pagination可以理解为一个页码生成器,他需要totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"几个参数来显示,每次后台需要绑定这几个参数,dwz不会帮你做什么事情,也就是你想他显示第几页就是第几页。
4、 点击分页,dwz将pagination的currentPage绑定到pagerForm的pagerNum,然后提交pagerForm到后台。
5、 初学者可以做这件事情来帮助理解:页面只放pagerForm和一个div和pagination,div每次显示当前的pageNum和pagination,点击分页来好好体验以下这个过程,这对第三点的理解也有帮助。
9、如何使用输入表单客户端验证?
客户端表单验证也是手册上的js库介绍中的dwz.regional.zh.js一节有介绍。结合demo中的demo_page4.html,简单明了。
10、如何使用combox的ajax联动?
手册上提及的联动方式,稍微扩展一下就可以达到ajax联动的目的。在select的change时间中,根据当前选择请求下一级的数据就可以了。注意要使用同步ajax方式。
11、如何做局部刷新?
1.3版中已经具有局部刷新功能,手册解释如下:
DWZ局部刷新怎样做?
API调用方式: $("#xxxId").loadUrl(url,data, callback); html扩展链接方式: <a href="url" target="ajax" rel="xxxId"></a>
1.2版可用loadUrl方式。
12、如何去掉dwz调用ajax方法出现的等待图片
这是作者给出的解决方式:
dwz.ui.js var ajaxbg = $("#background,#progressBar");
ajaxbg.hide();
$(document).ajaxStart(function(){
ajaxbg.show();
}).ajaxStop(function(){
ajaxbg.hide();
});
也可以把自己的$.ajax的globle设置为false来屏蔽ajaxStart方法。
13、最后谈谈我的看法
Dwz作为一个开源的ajax前端框架,为广大的web开发者提供了极大的方便,这点对初学者可能还没有这么深刻,不过一些老程序员可是感动得一塌糊涂。可以看出,这个框架倾注了作者极大的心血,而大家的热情就是对这种奉献精神的最好回报。本人接触dwz不过区区1个月,但是一直坚持和大家一起讨论问题,就是希望有越来越多的人能够使用dwz,这样才能使其具有长久的生命力。
对于web开发老手来说,dwz很容易上手,对于新手,我想提几条建议:
1、 先要有基础的web知识,手上常备js手册和dwz手册。
2、 遇到问题先试着从手册和demo里寻找解决办法,尽量不要问手册中已经存在的问题,相信没有人会喜欢一遍一遍回答诸如navTab是什么,navTabId是什么之类的问题。
3、 相信dwz能够用于项目,现在已经有人成功了。所以放手去做吧。
4、 尽量使用最新版本,作为一个开源项目,dwz更新是平凡的,通过这种更新来消除bug,同时引入新的特性。所以请升级你的版本到最新稳定版本或RC版本。
坚持下去,你就会成功。
转自官方文档。
Dwz手册的补充说明和常见问题的更多相关文章
- Lua语言中文手册 转载自网络
Programming in LuaCopyright ® 2005, Translation Team, www.luachina.net Programming in LuaProgramming ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...
- sigaction 函数
本文主要参考<unix环境高级编程> sigaction函数的功能是检查或修改与指定信号相关联的处理动作(可同时两种操作). int sigaction(int signo,con ...
- OD常用断点
OD常用断点 很全很全 常用断点 拦截窗口: bp CreateWindow 创建窗口 bp CreateWindowEx(A) 创建窗口 bp ShowWindow 显示窗口 bp UpdateWi ...
- 常用汇编命令&&OD命令总结
汇编32位CPU所含有的寄存器有: 4个数据寄存器(EAX.EBX.ECX和EDX)对低16位数据的存取,不会影响高16位的数据.这些低16位寄存器分别命名为:AX.BX.CX和DX,它和先前的CPU ...
- java代码示例(6-4)
创建ChangePassword.java /** * 需求分析:修改用户密码 * @author chenyanlong * 日期:2017/10/15 */ package com.hp.test ...
- MySQL单表数据不超过500万:是经验数值,还是黄金铁律?
今天,探讨一个有趣的话题:MySQL 单表数据达到多少时才需要考虑分库分表?有人说 2000 万行,也有人说 500 万行.那么,你觉得这个数值多少才合适呢? 曾经在中国互联网技术圈广为流传着这么一个 ...
- MySQL单表最大记录数不能超过多少?
MySQL单表最大记录数不能超过多少? 很多人困惑这个问题.其实,MySQL本身并没有对单表最大记录数进行限制,这个数值取决于你的操作系统对单个文件的限制本身. 从性能角度来讲,MySQL单表数据不要 ...
- MySQL单表数据不要超过500万行:是经验数值,还是黄金铁律?
本文阅读时间大约3分钟. 梁桂钊 | 作者 今天,探讨一个有趣的话题:MySQL 单表数据达到多少时才需要考虑分库分表?有人说 2000 万行,也有人说 500 万行.那么,你觉得这个数值多少才合适呢 ...
随机推荐
- day5模块学习--shutil模块
shutil模块 高级的 文件.文件夹.压缩包 处理模块 os模块提供了对目录或者文件的新建/删除/查看文件属性,还提供了对文件以及目录的路径操作.比如说:绝对路径,父目录…… 但是,os文件的操作 ...
- springboot之使用@ConfigurationProperties注解
springboot之使用@ConfigurationProperties注解 代码已经上传至github https://github.com/gittorlight/springboot-exam ...
- 湖南联通发福利了C#为你月赚150M流量回家过年不再愁
回家过年没流量怎么能行,这里教大家一个月赚150流量的方法,哈哈,首先下载联通客户端,本人只有android手机一台,没办法只能用 android的了,里面有一个悦分享,上几张图,图有有我赚的流量. ...
- LoadRunner对不同协议的选择
LoadRunner对不同协议的选择 大家常用的是Loadrunner测试web(Http/Html),但其实协议多种多样.在B/S结构的网站多种业务的特点需要选择不同的协议,协议如何选择呢,寻找了相 ...
- nginx一些细节知识点补充
1.upstream 配置代理 upstream local_tomcat { server localhost:8080; } server{ location / { proxy_pass htt ...
- MyISAM InnoDB 区别(转载)
MyISAM 和 InnoDB 讲解 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基本的差别为:MyISAM类型不支持事务处理等高级处 ...
- 基于spring-boot的应用程序的单元+集成测试方案
目录 概述 概念解析 单元测试和集成测试 Mock和Stub 技术实现 单元测试 测试常规的bean 测试Controller 测试持久层 集成测试 从Controller开始测试 从中间层开始测试 ...
- React Native之DeviceEventEmitter发送和接收消息完成事件处理
今天在Demo这样一个项目的时候,首先遇到的第一个问题就是,每次通过dialog选择[本周.本月.本天]时,伴随着内容重新渲染的时候,tab navigator每次都重新创建和渲染,造成性能浪费和用户 ...
- windows上springboot打war部署tomcat小记
web项目,需要部署到云主机里去,现在windows里试一下. springboot项目,主要流程就只是打成war包后扔到tomcat里去,但是由于是springboot项目,有一些需要注意的地方,这 ...
- luoguP3480 [POI2009]KAM-Pebbles 阶梯Nim
将序列差分并翻转之后,变成了阶梯\(Nim\)的模板题 QAQ #include <cstdio> #include <cstring> #include <iostre ...