閱讀(7.6k) 書簽贊(0) 我要糾錯(cuò)

DWX框架的HTML擴(kuò)展(3)

2018-11-17 14:31 更新

6. ajaxTodo擴(kuò)展

navTab頁面上a鏈接添加target="ajaxTodo" 后框架會(huì)自動(dòng)綁定相應(yīng)的ajax處理?！緟⒖糳wz.ajax.js】
可選a鏈接擴(kuò)展屬性[title="xxx"] 提示確認(rèn)信息
示例：

<a href="/news.do?method=remove&id=${item.id}"target="ajaxTodo" title="確定要?jiǎng)h除嗎?">>刪除</a>
<a href="/news.do?method=publish&id=${item.id}"target="ajaxTodo">發(fā)表</a>

框架自動(dòng)綁定js

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

dwzExport列表數(shù)據(jù)導(dǎo)出

鏈接添加target="dwzExport" 后框架會(huì)自動(dòng)綁定相應(yīng)的ajax處理。

targetType="navTab" 根據(jù)當(dāng)期navTab頁面中的pagerForm參數(shù)導(dǎo)出, 默認(rèn)
targetType="dialog" 根據(jù)當(dāng)期dialog頁面中的pagerForm參數(shù)導(dǎo)出
title="實(shí)要導(dǎo)出這些記錄嗎?" 確認(rèn)提示信息，可選項(xiàng)

示例：

<a href="doc/dwz-team.xls" target="dwzExport"targetType="dialog" title="實(shí)要導(dǎo)出這些記錄嗎?">導(dǎo)出EXCEL</a>

Input alt擴(kuò)展
示例：

<input name="xxx" alt="請(qǐng)輸入客戶名稱"/>

Tree擴(kuò)展

<ul class="tree [treeFoldertreeCheck [expand|collapse]]" oncheck="kkk">
<li><a href="#" target="navTab" rel="main" tname="name" tvalue="value" checked="true">第一級(jí)菜單項(xiàng) A</a>
       <ul>
           <li><a href="#" target="dialog" rel="dialog1" tname="name" tvalue="value" checked="true">第二級(jí)菜單項(xiàng) A </a></li>
           <li><a href="#">第二級(jí)菜單項(xiàng) B </a></li>
           <li><a href="#">第二級(jí)菜單項(xiàng) C </a>
              <ul>
                  <li><a href="#">第三級(jí)菜單項(xiàng) A </a></li>
                  <li><a href="#">第三級(jí)菜單項(xiàng) B </a></li>
              </ul>
           </li>
       </ul>
    </li>
    <li><a href="#">第一級(jí)菜單項(xiàng) B</a></li>
</ul>

樹結(jié)構(gòu)是按<ul>,<li>的嵌套格式構(gòu)成，將最頂級(jí)的<ul>以class=”tree”標(biāo)識(shí)即可。treeFolder, treeCheck, expand|collapse則為可選的。

treeFolder:在所有樹節(jié)點(diǎn)前加上Icon圖標(biāo)
treeCheck:在所有樹節(jié)點(diǎn)前加上checkbox，此時(shí)需要在<a> 加上三個(gè)擴(kuò)展屬性tname=””, tvalue=””, checked, 其中tname與tvalue對(duì)應(yīng)該checkbox的name 與value屬性
checked表示checkbox的默認(rèn)狀態(tài)是否checked.
expand與collapse：expand表示樹的所有第一級(jí)節(jié)點(diǎn)默認(rèn)是展開狀態(tài)，collapse則表示所有第一級(jí)節(jié)點(diǎn)默認(rèn)為折疊狀態(tài)，當(dāng)expand與collapse都沒有時(shí)默認(rèn)則會(huì)展開第一個(gè)節(jié)點(diǎn)。

擴(kuò)展屬性oncheck是自定義函數(shù), 用來接收點(diǎn)擊checkbox時(shí)返回值, 當(dāng)點(diǎn)擊非子樹節(jié)點(diǎn)checkbox時(shí)返回?cái)?shù)據(jù)格式為:{checked:true|false,items:{name:name, value:value}}, 當(dāng)點(diǎn)擊了樹節(jié)點(diǎn)checkbox時(shí), 此子樹節(jié)點(diǎn)下所有的checkbox都將選中, 同時(shí)返回此子樹節(jié)點(diǎn)下所有的checkbox的值, 格式為

{checked:true|false,items:{{name:name, value:value}, {name:name, value:value}……}}

7. Panel擴(kuò)展

<divclass="panel [close collapse]" [defH="200"|minH=”100”]>
<h1>標(biāo)題</h1>
    <div>
       內(nèi)容
    </div>
</div>

頂層div 以class=”panel”標(biāo)識(shí)即可, 其中的<h1>為panel的標(biāo)題, <h1>后的<div>則是放置內(nèi)容的容器.
Class 中的close 與collapse為可選項(xiàng), close表示panel默認(rèn)為關(guān)閉狀態(tài), 沒有則默認(rèn)為打開狀態(tài).collapse 再表示此panel是否為可折疊的panel, 沒有則此panel不可折疊. 擴(kuò)展屬性defH則表示panel 內(nèi)容部分的固定高度, 沒有則panel內(nèi)容部分的高度為實(shí)際內(nèi)容的高度, minH可以指定panel內(nèi)容部分的最小高度.

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靜態(tài)格式y(tǒng)-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動(dòng)態(tài)態(tài)格式%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>默認(rèn)格式：</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>動(dòng)態(tài)參數(shù)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>日期 + 時(shí)間</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點(diǎn)" readonly="true"/>
    <a class="inputDateButton" href="javascript:;">選擇</a>
    <span class="info">y年M月d日 H點(diǎn)</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>自定義只有時(shí)間：</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>自定義時(shí)間：</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>

以上內(nèi)容是否對(duì)您有幫助：

← DWX框架的HTML擴(kuò)展(2)

DWZ框架的url變量替換 →

寫筆記

我要補(bǔ)充