DWZ学习

1.当前navTab 中链接ajax post 扩展

<a href="user.do?method=remove" target="ajaxTodo">删除</a>

2.dialog 链接扩展
<a href=”xxx” target=“dialog” [rel=“dialogId”]>

A 所指向页面将会在dialog 弹出层中打开，rel 标识此弹出层的ID，rel 为可选项

3.navTab 链接扩展
<a href=”xxx” target=“navTab” [rel=“tabId”]>

4.Tab 组件扩展
开发人员不需写任何javacsript, 只要使用下面的html 结构就可以.
<div class="tabs">
<div class="tabsHeader">
<div class="tabsHeaderContent">
<ul>
<li class="selected"><a href="#"><span>标题1</span></a></li>
<li><a href="#"><span>标题2</span></a></li>
</ul>
</div>
</div>
<div class="tabsContent" style="height:150px;">
<div>内容1</div>
<div>内容2</div>
</div>
<div class="tabsFooter">
<div class="tabsFooterContent"></div>
</

5.Accordion 组件
<div class="accordion" [fillSpace=”xxxKey”]>
<div class="accordionHeader">
<h2><span>icon</span>面板1</h2>
</div>
<div class="accordionContent" style="height:200px">
内容1
</div>
<div class="accordionHeader">
<h2><span>icon</span>面板2</h2>
</div>
<div class="accordionContent">
内容2
</div>
<div class="accordionHeader">
<h2><span>icon</span>面板3</h2>
</div>
<div class="accordionContent">
内容3
</div>
</div>

6.容器高度自适应
容器高度自适应, 只要增加扩展属性layouth=”xx”, 单位是像素.
Layouth 表示容器内工具栏高度. 浏览器窗口大小改变时容器高度自适应, 但容器内工具栏高度是固定的, 需要
告诉js 工具栏高度来计算出内容的高度.
示例: <div layouth=“150”>内容</div>

7.CSS Table

<div id="w_list_print">
    <table class="list"

8.Table 扩展
在table 标签上增加class="table"

9.在线编辑器
在textarea 标签上增加class="editor"
示例:
<textarea class="editor" name="description" rows="15" cols="80">内容</textarea>

10.分页组件

分页组件参数要由服务器传过来targetType，totalCount，numPerPage，pageNumShown，currentPage
框架会自动把下面的form 中pageNum 修改后，ajax 重新发请求。下面这个form 是用来存查询条件的

<form id="pagerForm" action="xxx" method="post">
    <input type="hidden" name="pageNum" value="1" />/><!--【必须】value=1可以写死-->
    <input type="hidden" name="numPerPage" value="20" /><!--【可选】每页显示多少条-->
   <input type="hidden" name="orderField" value="xxx" /><!--【可选】查询排序-->
    <!--【可选】其它查询条件，业务有关，有什么查询条件就加什么参数-->
    <input type="hidden" name="status" value="active" />
</form>

分页组件使用方法：
<div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10"
currentPage="1"></div>
测试方法，currentPage 从1 改为2，就是第2 页了，把上面那句改为：
<div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10"
currentPage="2"></div>
参数说明:
targetType: navTab 或dialog，用来标记是navTab 上的分页还是dialog 上的分页
totalCount: 总条数
numPerPage: 每页显示多少条
pageNumShown: 页标数字多少个
currentPage: 当前是第几页
注意：
服务器端返回一个页面碎片，其中包括pagerForm, table, 和分页的div。只要把这个页面碎片组装好就行。

11.Tree 扩展
<ul class="tree [treeFolder treeCheck [expand|collapse]]" oncheck="kkk">
<li><a href="#" target="navTab" rel="main" tname="name" tvalue="value"
checked="true">第一级菜单项 A</a>
<ul>
<li><a href="#" target="dialog" rel="dialog1" tname="name"
tvalue="value" checked="true">第二级菜单项 A </a></li>
<li><a href="#">第二级菜单项 B </a></li>
<li><a href="#">第二级菜单项 C </a>
<ul>
<li><a href="#">第三级菜单项 A </a></li>
<li><a href="#">第三级菜单项 B </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">第一级菜单项 B</a></li>
</ul>
树结构是按<ul>,<li>的嵌套格式构成，将最顶级的<ul>以class=”tree”标识即可。treeFolder, treeCheck,
expand|collapse 则为可选的。
treeFolder:在所有树节点前加上Icon 图标

treeCheck:在所有树节点前加上checkbox，此时需要在<a> 加上三个扩展属性tname=””, tvalue=””, checked, 其
中tname 与tvalue 对应该checkbox 的name 与value 属性
checked 表示checkbox 的默认状态是否checked.
expand 与collapse：expand 表示树的所有第一级节点默认是展开状态，collapse 则表示所有第一级节点默认
为折叠状态，当expand 与collapse 都没有时默认则会展开第一个节点。
扩展属性oncheck 是自定义函数, 用来接收点击checkbox 时返回值, 当点击非子树节点checkbox 时返回数据
格式为:{checked:true|false,items:{name:name, value:value}}, 当点击了树节点checkbox 时, 此子树节点下所有的
checkbox 都将选中, 同时返回此子树节点下所有的checkbox 的值, 格式为{checked:true|false,
items:{{name:name, value:value}, {name:name, value:value}……}}

12Panel 扩展
<div class="panel [close collapse]" [defH="200"|minH=”100”]>
<h1>标题</h1>
<div>
内容
</div>
</div>
顶层div 以class=”panel”标识即可, 其中的<h1>为panel 的标题, <h1>后的<div>则是放置内容的容器.
Class 中的close 与collapse 为可选项, close 表示panel 默认为关闭状态, 没有则默认为打开状态. collapse 再表
示此panel 是否为可折叠的panel, 没有则此panel 不可折叠. 扩展属性defH 则表示panel 内容部分的固定高度,
没有则panel 内容部分的高度为实际内容的高度, minH 可以指定panel 内容部分的最小高度.

13日历控件
<input type="text" name="xxx" class="date" [pattern="yyyy-MM-dd"] [yearstart="-80"]
[yearend="5"]/>

14.Ajax 表单

ajax 表单查询
<form action="xxx" method="post" onsubmit="return navTabSearch(this)">
或
<form action="xxx" method="post" onsubmit="return dialogSearch(this)">

普通Ajax 表单提交

DWZ 表单提交dwz.ajax.js
 Ajax 表单提交后自动调用默认回调函数, 操作成功或失败提示.
Form 标签上增加 onsubmit="return validateCallback(this);
 Ajax 表单提交后如果需要重新加载某个navTab 或关闭dialog，可以使用dwz.ajax.js 中事先定义的方法
navTabAjaxDone/dialogAjaxDone
注意：如果表单在navTab 页面上使用navTabAjaxDone，表单在dialog 页面上使用dialogAjaxDone
Form 标签上增加onsubmit="return validateCallback(this, navTabAjaxDone)"
或onsubmit="return validateCallback(this, dialogAjaxDone)"
 Ajax 表单提交后如果需要做一些其它处理也可以自定义一个回调函数xxxAjaxDone。例如下面表单提
交成功后关闭当前navTab, 或者重新载入某个tab.
Form 标签上增加onsubmit="return validateCallback(this, xxxAjaxDone)"