上海企业网站建站,天津市住房和城乡建设厅官网,企业做网站系统,评论优化1、我如何在项目中使用dwz? 手册中有如下说明#xff1a; 设计思路第一次打开页面时载入界面到客户端, 之后和服务器的交互只是数据交互, 不占用界面相关的网络流量.支持HTML扩展方式来调用DWZ组件.标准化Ajax开发, 降低Ajax开发成本. 也就是说#xff0c;只需要在一个页面… 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文件最好用serverPathdwz.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点击排序后提交的依然是pagerFormorderField会绑定点击的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可以理解为一个页码生成器他需要totalCount200 numPerPage20 pageNumShown10 currentPage1几个参数来显示每次后台需要绑定这几个参数dwz不会帮你做什么事情也就是你想他显示第几页就是第几页。 4、 点击分页dwz将pagination的currentPage绑定到pagerForm的pagerNum然后提交pagerForm到后台。 5、 初学者可以做这件事情来帮助理解页面只放pagerForm和一个div和paginationdiv每次显示当前的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版本。 原文地址: http://www.cnblogs.com/xiaosuiba/archive/2011/06/13/2079840.html 转载于:https://my.oschina.net/HuifengWang/blog/232968
