建网站公司销售,多个网站备案,成都住建局官网蓉e办,wordpress数据库重置密码DWZ使用笔记 一、前言 在近期的一个项目中#xff0c;引入了DWZ这个富client框架#xff0c;算是一次尝试吧。期间也遇到不少问题#xff0c;总算一一攻克了。特以此文记之。本人用的是dwz-ria-1.4.5Asp.net webform#xff0c;写这篇笔记时最新版本号已经是1.4.6了。DWZ官… DWZ使用笔记 一、前言 在近期的一个项目中引入了DWZ这个富client框架算是一次尝试吧。期间也遇到不少问题总算一一攻克了。特以此文记之。 本人用的是dwz-ria-1.4.5Asp.net webform写这篇笔记时最新版本号已经是1.4.6了。DWZ官方网址 二、文件夹结构 dwz-ria-1.4.5.zip解压后文件夹结构见下图2.1。 当中jsdwz的核心脚本代码 themescss样式提供了default、azure、green、purple、silver等皮肤 uploadify文件上传控件。 图2.1 三、JS说明 3.1dwz.core.jsdwz的基石。用的比較多的是String的扩展方法ajaxErrorajax error时的默认处理、ajaxDoneajax success时的默认处理。 client接收到的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.2dwz.ajax.jsdwz提供的ajax函数。有分页处理navTabAjaxDone、dialogPageBreak、ajax success时的回调函数navTabAjaxDone、dialogAjaxDone。 navTab、dialog是两种页面显示方式navTab以标签页显示的画面dialog弹出式的画面。 3.3dwz.ui.js画面的初始化处理。function initUI(_box)就是对一系列的dwz标签进行初始化第三方控件的初始化也要放在这里。Jquery的ready事件运行后才会运行initUI我在项目中用了editable-select、treetable两个控件一開始是放在ready事件里初始化的碰巧他们的class和dwz的重名调试时怎么也出不来那个效果后来看调试代码才发现不能写在ready里。 3.4dwz.barDrag.js左边活动面板的隐藏、显示 3.5dwz.stable.js、dwz.cssTable.jsdwz提供的两种表格。相应的标签各自是classtable/classlist。 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.6dwz.dialog.js弹出画面用的。$.pdialog.getCurrent()获取当前的弹出画面 3.7dwz.navTab.js标签页画面用的。navTab.getCurrentPanel()获取当前的标签页对象 四、UI布局 通常在login.aspx页面登录后进入index.aspxdwz-ria-1.4.5.zip中的index.html页面这个是主页面项目中要引用的jscss文件都是在这里载入。 页面布局 div idheader。页面的标题部分 div idleftside 主菜单部分 div idcontainer 主体部分多标签页形式显示 div idfooter。页脚部分 navTab/dialog页面的html代码不是像寻常那样写成htmlhead/body//html这种格式 而是像下图所看到的的格式那样。 以下说下项目中使用的几种典型界面 4.1查询画面 h2 classcontentTitlexxxx列表/h2 cc1:PagingForm IDpagerForm runatserver ActionUrlxxx / div classpageHeader form idForm1 onsubmitreturn navTabSearch(this); actionxxxx methodpost runatserver div classsearchBar table classsearchContent tr td 编号input typetext namexxxx valuexxxx / /td td 名称input typetext namexxxxx valuexxxx/ /td /tr /table div classsubBar ul lidiv classbuttonActivediv classbuttonContentbutton typesubmit检索/button/div/div/li /ul /div /div /form /div div classpageContent asp:Repeater IDRepeater1 runatserver OnItemDataBoundRepeater1_ItemDataBound HeaderTemplate table classtable width100% layoutH208 thead tr th width40序号/th th width120编号/th th width150名称/th th width80操作/th /tr /thead tbody /HeaderTemplate ItemTemplate tr tdasp:Literal runatserver IDlblRownumber / /td td%#NvStr(Eval(Code))% /td td%#NvStr(Eval(Name))% /td tdasp:Literal runatserver IDlbtCommand / /td /tr /ItemTemplate FooterTemplate /tbody /table /FooterTemplate /asp:Repeater cc1:PagingFoot runatserver IDpagingFoot/ /div 4.2单表的新增/编辑画面 代码 % Page LanguageC# AutoEventWireuptrue CodeBehindxxxx.aspx.cs Inheritsxxxx % div classpageContent form methodpost idxxxx classpageForm required-validate οnsubmitreturn validateCallback(this, navTabAjaxDone); div classpageFormContent layoutH56 p label名称/label input namename classrequired typetext size30 / /p p label总计/label input nametotal typetext size30 classrequired number / /p /div div classformBar ul li classcontinue input typecheckbox checkedchecked classchecked idcontinue/继续加入 /li lidiv classbuttonActive div classbuttonContent button typebutton namebtnSave onclick加入/button /div /div/li li div classbutton div classbuttonContent button typebutton classclose关闭/button /div /div /li /ul /div script typetext/javascript $().ready(function () { xxxx.initDetailFormData(null); }); /script /form iframe classT_iframe/iframe /div abutton typebutton classclosedwz会为classclose的加入一个关闭页面的动作。 biframe classT_iframe这个是为了解决IE6select框覆盖弹出层的bug參照了“IE6 select遮挡div问题”这篇文章 4.3主子表的新增/编辑画面 h2 classcontentTitlexx填报/h2 div classpageContent div classpanel defH200 h1基本信息/h1 div classpageFormContent p label编号/label input name readonlyreadonly typetext size30 / /p p label名称/label input name classrequired typetext size30 styleime-mode:active; / /p p label项目负责人/label input name typetext size30 styleime-mode:active; / /p /div /div div classdivider/div div classpanelBar ul classtoolBar lia classbutton onclickspan加入/span/a/li /ul /div asp:Repeater IDRepeater1 runatserver OnItemDataBoundRepeater1_ItemDataBound HeaderTemplate table classtable width100% layoutH385 idxxxx nowrapTDfalse thead tr th width200名称/th th width150型号规格/th th width100数量/th th width120单位价格(元)/th th width150总计(元)/th th width100操作/th /tr /thead tbody /HeaderTemplate ItemTemplate tr class unitBox data-tt-id data-tt-parent-id ondblclick tdxxx/td tdxxx/td tdxxx/td tdxxx/td tdxxx/td tdxxx/td /tr /ItemTemplate FooterTemplate /tbody /table /FooterTemplate /asp:Repeater div classformBar ul li div classbuttonActive div classbuttonContentbutton typebutton onclick保存/button /div /div /li /ul /div /div a主表的输入项最外层套了个div classpanel defH200早先是没写这个就div classpageFormContent这个和子表的table平级如今是div classpanel defH200和table平级。那样写当pageFormContent里有select控件时在IE6下显示位置会错乱后来加上这个panel就好了。 btr class unitBox data-tt-id data-tt-parent-id这个写法是用到了TreeTable这个Jquery控件。 4.4主子表多标签页的新增/编辑画面 与前一节的差别是我用多标签页的形式显示子表的数据。 h2 classcontentTitlexxxx填报/h2 div classpageContent div classpanel defH220 h1基本信息/h1 div classpageFormContent p label编号/label input name readonlyreadonly typetext size30 / /p p label名称/label input name classrequired typetext size30 styleime-mode:active; / /p p label负责人/label input name typetext size30 styleime-mode:active; / /p /div /div div classdivider/div div classtabs currentIndex0 eventTypeclick div classtabsHeader div classtabsHeaderContent ul lia id hrefjavascript:;span客户列表/span/a/li lia id hrefx1.aspx classj-ajaxspan材料列表/span/a/li lia id hrefx2.aspx classj-ajaxspanxx列表/span/a/li lia id hrefx3.aspx classj-ajaxspanxx列表/span/a/li lia id hrefx4.aspx classj-ajaxspanxx列表/span/a/li lia id hrefx5.aspx classj-ajaxspanxx列表/span/a/li lia id hrefx6.aspx classj-ajaxspanxx列表/span/a/li /ul /div /div div classtabsContent layoutH420 div div classpanelBar ul classtoolBar lia classbutton onclickspan加入/span/a/li /ul /div asp:Repeater IDRepeater1 runatserver OnItemDataBoundRepeater1_ItemDataBound HeaderTemplate table classlist width100% layoutH420 idtbAllocatedUnits nowrapTDfalse thead tr th width200客户名称/th th width120xxxx/th th width200xxxx/th th width120操作/th /tr /thead tbody /HeaderTemplate ItemTemplate tr ondblclick tdxxx/td tdxxx/td tdxxx/td tdxxx/td /tr /ItemTemplate FooterTemplate /tbody /table /FooterTemplate /asp:Repeater /div div/div div/div div/div div/div div/div div/div /div div classtabsFooter div classtabsFooterContent/div /div /div div classformBar ul lidiv classbuttonActive div classbuttonContentbutton typebutton onclickScienceBudget.saveBudget();保存/button /div /div /li /ul /div /div adiv classtabsHeaderContent内的标签数目要和div classtabsContent里的子div个数一致。一个标题相应div classtabsContent里的一个div。 b div classtabs currentIndex0 eventTypeclick中currentIndex指定了初始显示第一个标签页的内容。 c其它标签页的标题都是这样写的a id hrefx1.aspx classj-ajax用ajax方式载入href页面的html 所以在div classtabsContent里除了第一个子div里写了内容其它几个子div都是空的(div/div) 点击这个标签页后才会载入页面。 这篇就先写到这里了。 原文地址http://www.cnblogs.com/wordmy/p/3219760.html
