DWZ使用笔记.docx

DWZ使用笔记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代码，不是像平常那样写成htmlhead/body//html这