DWX框架的HTML扩展(3)

2018-11-17 14:31 更新

6. ajaxTodo扩展

navTab页面上a链接添加target="ajaxTodo" 后框架会自动绑定相应的ajax处理。【参考dwz.ajax.js】
可选a链接扩展属性[title="xxx"] 提示确认信息
示例：

<a href="/news.do?method=remove&id=${item.id}"target="ajaxTodo" title="确定要删除吗?">>删除</a>
<a href="/news.do?method=publish&id=${item.id}"target="ajaxTodo">发表</a>

框架自动绑定js

$("a[target=ajaxTodo]", $p).each(function(){
    $(this).click(function(event){
       ajaxTodo($(this).attr("href"));
       event.preventDefault();
    });
});

dwzExport列表数据导出

链接添加target="dwzExport" 后框架会自动绑定相应的ajax处理。

targetType="navTab" 根据当期navTab页面中的pagerForm参数导出, 默认
targetType="dialog" 根据当期dialog页面中的pagerForm参数导出
title="实要导出这些记录吗?" 确认提示信息，可选项

示例：

<a href="doc/dwz-team.xls" target="dwzExport"targetType="dialog" title="实要导出这些记录吗?">导出EXCEL</a>

Input alt扩展
示例：

<input name="xxx" alt="请输入客户名称"/>

Tree扩展

<ul class="tree [treeFoldertreeCheck [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}……}}

7. Panel扩展

<divclass="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内容部分的最小高度.

7.1日历控件

<input type="text" name="xxx" class="date" [dateFmt="yyyy-MM-dd"] [minDate="{%y-80}"][maxDate="{%y+5}"]/>

日期格式：

* Field        | Full Form          | Short Form
 * -------------+--------------------+-----------------------
 * Year         | yyyy (4 digits)    | yy (2 digits), y (2 or 4 digits)
 * Month        | MMM (name or abbr.)| MM (2 digits), M (1 or 2 digits)
 *             | NNN(abbr.)        |
 * Day of Month | dd (2 digits)      | d (1 or 2 digits)
 * Day of Week  | EE (name)          | E (abbr)
 * Hour (1-12)  | hh (2 digits)      | h (1 or 2 digits)
 * Hour (0-23)  | HH (2 digits)      | H (1 or 2 digits)
 * Hour (0-11)  | KK (2 digits)      | K (1 or 2 digits)
 * Hour (1-24)  | kk (2 digits)      | k (1 or 2 digits)
 * Minute       | mm (2 digits)     | m(1 or 2 digits)
 * Second       | ss (2 digits)     | s(1 or 2 digits)
 * AM/PM        | a                 |

定义日期范围属性minDate,maxDate静态格式y-M-d或y-M或y，支持以下几种写法:

minDate="2000-01-15"maxDate="2012-12-15"
minDate="2000-01"maxDate="2012-12"
minDate="2000"maxDate="2012"

定义日期范围属性minDate,maxDate动态态格式%y-%M-%d或%y-%M或%y，支持以下几种写法:

minDate="{%y-10}-%M-%d"maxDate="{%y}-%M-{%d+1}"
minDate="{%y-10}-%M"maxDate="{%y+10}-%M"
minDate="{%y-10}"maxDate="{%y+10}"

示例：

<p>
    <label>默认格式：</label>
    <input type="text" name="date1" class="date" readonly="true"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
    <span class="info">yyyy-MM-dd</span>
</p>
<p>
    <label>定义日期范围：</label>
    <input type="text" name="date2" value="2000-01-15" class="date" minDate="2000-01-15" maxDate="2012-12-15" readonly="true"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
</p>
<p>
    <label>自定义日期格式：</label>
    <input type="text" name="date3" class="date" dateFmt="yyyy/MM/dd" minDate="2000-01" maxDate="2012-06" readonly="true" />
    <a class="inputDateButton" href="javascript:;">选择</a>
    <span class="info">yyyy/MM/dd</span>
</p>
<p>
    <label>自定义日期格式：</label>
    <input type="text" name="date4" class="date" dateFmt="dd/MM/yyyy" minDate="2000" maxDate="2012" readonly="true"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
    <span class="info">dd/MM/yyyy</span>
</p>
<p>
    <label>动态参数minDate：</label>
    <input type="text" name="date5" class="date" dateFmt="dd/MM/yy" minDate="{%y-10}-%M-%d" maxDate="{%y}-%M-{%d+1}"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
    <span class="info">dd/MM/yy</span>
</p>
<p>
    <label>自定义日期格式：</label>
    <input type="text" name="date6" class="date" dateFmt="yyyyMMdd" minDate="2000-01-01" maxDate="2020-12-31"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
    <span class="info">yyyyMMdd</span>
</p>
<p>
    <label>自定义日期格式：</label>
    <input type="text" name="date7" class="date" dateFmt="yyyy年MM月dd日" minDate="2000-01-01" maxDate="2020-12-31"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
    <span class="info">yyyy年MM月dd日</span>
</p>
<p>
    <label>自定义日期格式：</label>
    <input type="text" name="date8" class="date" dateFmt="y年M月d日" minDate="2000-01-01" maxDate="2020-12-31"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
    <span class="info">y年M月d日</span>
</p>
 
<div class="divider"></div>
<h3>日期 + 时间</h3>
<div class="unit">
    <label>自定义日期格式：</label>
    <input type="text" name="date10" class="date" dateFmt="yyyy-MM-ddHH:mm:ss" readonly="true"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
    <span class="info">yyyy-MM-dd HH:mm:ss</span>
</div>
<div class="unit">
    <label>自定义日期格式：</label>
    <input type="text" name="date11" class="date" dateFmt="yyyy-MM-dd HH:mm" readonly="true"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
    <span class="info">yyyy-MM-dd HH:mm</span>
</div>
<div class="unit">
    <label>自定义日期格式：</label>
    <input type="text" name="date12" class="date" dateFmt="yyyy-MM-dd HH:ss" readonly="true"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
    <span class="info">yyyy-MM-dd HH:ss</span>
</div>
   
<div class="unit">
    <label>自定义日期格式：</label>
    <input type="text" name="date13" class="date" dateFmt="y年M月d日 H点" readonly="true"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
    <span class="info">y年M月d日 H点</span>
</div>
<div class="unit">
    <label>自定义日期格式：</label>
    <input type="text" name="date14" class="date" dateFmt="EEE HH:mm:ss" readonly="true"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
    <span class="info">EEE HH:mm:ss</span>
</div>
<div class="unit">
    <label>自定义只有时间：</label>
    <input type="text" name="date15" class="date" dateFmt="HH:mm:ss" readonly="true"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
    <span class="info">HH:mm:ss</span>
</div>
<div class="unit">
    <label>自定义时间：</label>
    <input type="text" name="date16" class="date" dateFmt="HH:mm" mmStep="15" readonly="true"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
    <span class="info">HH:mm</span>
</div>

以上内容是否对您有帮助：