国产jQuery UI框架 DWZ-RIA v1.3 Final版发布
fmms 13年前
<div id="p_fullcontent" class="detail"> <p>DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. </p> <p>DWZ富客户端框架设计目标是<b>简单实用、扩展方便、快速开发、RIA思路、轻量级</b> </p> <p>DWZ支持用html扩展的方式来代替javascript代码, 基本可以保证程序员不董javascript, 也能使用各种页面组件和ajax技术. 如果有特定需求也可以扩展DWZ做定制化开化. </p> <p>国内很多程序员javascript不熟, 大大影响了开发速度. 使用DWZ框架自动邦定javascript效果. 不需要开发人员去关心javascript怎么写, 只要写标准html就可以了. DWZ简单扩展了html标准, 给HTML定义了一些特别的class 和attribute. DWZ框架会找到当前请求结果中的那些特别的class 和attribute, 并自动关联上相应的js处理事件和效果. </p> <p>DWZ基于jQuery可以非常方便的定制特定需求的UI组件, 并以jQuery插件的形式发布. </p> <p>欢迎大家提出建议, 我们将在下一版本中进一步调整和完善功能。 </p> <p>DWZ富客户端框架完全开源，可以免费获取全部源码。团队中的每个人都是开源的拥护者，都希望为中国软件开源事业尽自己的一份力量。 <br /> <img title="国产jQuery UI框架 DWZ-RIA v1.3 Final版发布" border="0" alt="国产jQuery UI框架 DWZ-RIA v1.3 Final版发布" src="https://simg.open-open.com/show/95d205c2a1b44444ba41cf734d262fa0.png" width="150" height="50" /><br /> 项目地址：<a href="/misc/goto?guid=4958193787103917875">http://code.google.com/p/dwz/</a></p> <p>DWZ论坛 <a href="/misc/goto?guid=4958193787857666363" rel="nofollow">http://bbs.dwzjs.com</a> </p> <p>DWZ官方微博 <a href="/misc/goto?guid=4958193788599004575" rel="nofollow">http://weibo.com/dwzui</a> </p> <p>DWZ官方微群 <a href="/misc/goto?guid=4958193789332532189" rel="nofollow">http://q.weibo.com/587328/invitation=11TGXSt-148c2</a> </p> <p>在线演示地址 <a href="/misc/goto?guid=4958193790068040303" rel="nofollow">http://demo.dwzjs.com</a> </p> <p>视频教程 <a href="/misc/goto?guid=4958193790813950282" rel="nofollow">http://v.it-edu.cn/viewCourseDetail.do?courseId=50362</a> </p> <p><b>学习DWZ的建议</b> </p> <ul> <li>通读DWZ文档，很多新手提的问题文档中都写了</li> <li>看demo每个组件演示效果和代码（留意组件html结构）</li> <li>建议安装firebug，用firebug看html结构、CSS和调试JS都非常方便。见附录一 firebug介绍</li> <li>对于初学者不建议看DWZ全部源码，但还是非常有必要看看dwz.ui.js和dwz.ajax.js </li> <li>可以从google code下载dwz_thinkphp版本，结合php后台去理解DWZ和服务器端的交互方式</li> </ul> <p><b>DWZ区别于其它JS框架，最大的优点</b> </p> <ul> <li>完全开源，源码没有做任何混淆处理，方便扩展</li> <li>CSS和js代码彻底分离，修改样式方便</li> <li>简单实用，扩展方便，轻量级框架，快速开发</li> <li>仍然保留了html的页面布局方式</li> <li>支持HTML扩展方式调用UI组件，开发人员不需写js</li> <li>只要懂html语法不需精通js，就可以使用ajax开发后台</li> </ul> <p><br /> http://code.google.com/p/dwz/downloads/detail?name=dwz-ria-1.3Final.zip</p> <p><strong>Changelist：</strong></p> <p>1. 修复 combox 联动菜单重复发送 ajax 请求问题<br /> 2. 调整 layoutH=“xx”的高度根据含有 class=”layoutBox”的父容器 div 动态更新<br /> 3. 修复 navTab 打开外部页面和 iframe 方式打开时，浏览器前进后退问题</p> <ul> <li><a target="navTab" href="http://www.baidu.com">外部页面</a></li> <li><a target="navTab" href="url" external=”true”>iframe 方式打开</a></li> </ul> <p>4. 调整 lookup、suggest，添加联动效果。自定义查找带回主键 lookupPk, 可选项默认为 id。<br /> 5. 添加多选查找带回 multLookup</p> <p>6. 整理 lookup、suggest、主从结构文档，请参考1.3Final 版 dwz-ria/doc/dwz-user-guide.chm</p> <p><strong>升级注意：</strong></p> <ul> <li>index 页面中<div >添加 class“layoutBox”改成<div ></li> <li>然后更新 js、css、dwz.frag.xml</li> </ul> <p>-----------------------------------------------------------------------------------------------------------------</p> <p><strong>suggest+lookup+ 主从结构文档</strong></p> <p>dwz.database.js 主要功能是数据库操作相关的界面组件。主要分为2部分，分别是查找带回和主从结构。</p> <ul> <li>查找带回：lookup、suggest、lookup 附件(文件上传带回)、多选查找带回 multLookup 几个 jQuery 插件，以及$.bringBack、$.bringBackSuggest 两个配套查找带回工具方法</li> <li> 主从结构：itemDetail</li> </ul> <p>suggest+lookup+ 主从结构请参照 demo：界面组件 à 常用组件 à suggest+lookup+ 主从结构</p> <p><strong>查找带回</strong></p> <p>lookup、suggest 都支持联动效果，比如类似选省份、城市联动效果。支持自定义查找带回主键 lookupPk, 可选项默认为 id。</p> <p><strong>lookup </strong><strong>通过复选框选择多个值查找回</strong><strong>带示例：</strong></p> <p>请参照 dwz-ria 中 demo/database/ db_widge.html 和 demo/database/dwzOrgLookup2.html 页面</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">button </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="button"</span><span style="color:#ff0000;"> multLookup</span><span style="color:#0000ff;">="orgId"</span><span style="color:#ff0000;"> warn</span><span style="color:#0000ff;">="请选择部门"</span><span style="color:#0000ff;">></span>选择带回<span style="color:#0000ff;"></</span><span style="color:#800000;">button</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="checkbox"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="orgId"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="{id:'1'， orgName:'技术部'， orgNum:'1001'}"</span><span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="checkbox"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="orgId"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="{id:'2'， orgName:'人事部'， orgNum:'1002'}"</span><span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="checkbox"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="orgId"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="{id:'3'， orgName:'销售部'， orgNum:'1003'}"</span><span style="color:#0000ff;">/></span></pre> </div> <p><strong>主从结构</strong></p> <p>针对主表和从表的数据库结构设计，实现主从结构复合表单，动态添加、删除从表字段。</p> <p>请参照 dwz-ria 中 demo/database/ db_widge.html</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">table </span><span style="color:#ff0000;">addButton</span><span style="color:#0000ff;">="新建从表1条目"</span><span style="color:#ff0000;"> width</span><span style="color:#0000ff;">="100%"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">thead</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="items.itemString"</span><span style="color:#ff0000;"> size</span><span style="color:#0000ff;">="12"</span><span style="color:#ff0000;"> field</span><span style="color:#0000ff;">></span>从字符串<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="items.itemInt"</span><span style="color:#ff0000;"> size</span><span style="color:#0000ff;">="12"</span><span style="color:#ff0000;"> field</span><span style="color:#0000ff;">></span>从整数<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="items.itemFloat"</span><span style="color:#ff0000;"> size</span><span style="color:#0000ff;">="12"</span><span style="color:#ff0000;"> field</span><span style="color:#0000ff;">></span>从浮点<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="date"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="items.itemDate"</span><span style="color:#ff0000;"> size</span><span style="color:#0000ff;">="12"</span><span style="color:#0000ff;">></span>从日期<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="date"</span><span style="color:#ff0000;"> format</span><span style="color:#0000ff;">="yyyy-MM-dd HH:mm:ss"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="items.itemDataTime"</span><span style="color:#ff0000;"> size</span><span style="color:#0000ff;">="16"</span><span style="color:#0000ff;">></span>从日期时间<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="lookup"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="dwz.items.org.orgName"</span><span style="color:#ff0000;"> lookupGroup</span><span style="color:#0000ff;">="items.org"</span><span style="color:#ff0000;"> lookupUrl</span><span style="color:#0000ff;">="xxxUrl"</span><span style="color:#ff0000;"> suggestUrl</span><span style="color:#0000ff;">="xxxUrl"</span><span style="color:#ff0000;"> suggestFields</span><span style="color:#0000ff;">="orgName"</span><span style="color:#ff0000;"> size</span><span style="color:#0000ff;">="12"</span><span style="color:#0000ff;">></span>部门名称<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="enum"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="items.itemEnum"</span><span style="color:#ff0000;"> enumUrl</span><span style="color:#0000ff;">="xxxUrl"</span><span style="color:#ff0000;"> size</span><span style="color:#0000ff;">="12"</span><span style="color:#0000ff;">></span>从枚举<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="attach"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="dwz.items.attachment.fileName"</span><span style="color:#ff0000;"> lookupGroup</span><span style="color:#0000ff;">="items.attachment"</span><span style="color:#ff0000;"> lookupUrl</span><span style="color:#0000ff;">="xxxUrl"</span><span style="color:#ff0000;"> size</span><span style="color:#0000ff;">="12"</span><span style="color:#0000ff;">></span>从附件<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="del"</span><span style="color:#ff0000;"> width</span><span style="color:#0000ff;">="60"</span><span style="color:#0000ff;">></span>操作<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">thead</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tbody</span><span style="color:#0000ff;">></</span><span style="color:#800000;">tbody</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">table</span><span style="color:#0000ff;">></span></pre> </div> <p><table>标签中 class=”itemDetail” 必须用于关联主从结构 js 效果。addButton=”xxx”可选默认为”Add New”用来定义添加从表按钮的文字</p> <p><th>标签中：type 必填项，type 类型有 text、date、lookup、enum、attach、del</p> <p>name 必填项，定义子表字段名称</p> <p>size 可选项，默认 size=”12”，定义从表 input 字段的长度</p> <p>fieldClass 可选项，用来定义表 input 字段的 class</p> <p>lookupGroup 当 type=”lookup” 或 type=”attach”时必填</p> <p>lookupUrl 当 type=”lookup”时 lookupUrl 和 suggesUrl 至少填一项，当 type=”attach”时必填</p> <p>suggestUrl 当 type=”lookup”时 lookupUrl 和 suggesUrl 至少填一项</p> <p>suggestFields 当 type=”lookup”并且有 suggestUrl 时必填</p> <p>enumUrl 当 type=”enum”时必填</p> <p> </p> </div>